Show
Ignore:
Timestamp:
05/10/08 06:04:37 (7 months ago)
Author:
dante
Message:

refs #6664 - all "public" dijit tests using _testCommon now use tundra as the default theme. WARNING: this currently breaks
tests in nihilo / soria where there is a dijit.byId('something') in an addOnLoad because we're stalling parsing (not in the
tundra case ... ) by a few ms. we probably don't need to, but we're fighting an inconsistant css race condition.

need to do dijit/demos, and dojox/* still ... that's next. please svn up dijit/ and check for any regressions based on this
checkin. I've tested in ie6, ff2 and safari _most_ every test, but it is admittedly a little overwhelming so extra eyes
would be appreciated.

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • dijit/trunk/tests/form/test_ComboBox.html

    r13614 r13661  
    1111        </style> 
    1212 
     13        <!-- required: the default dijit theme: --> 
     14        <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css" /> 
     15 
     16        <!-- required: dojo.js --> 
    1317        <script type="text/javascript" src="../../../dojo/dojo.js" 
    1418                djConfig="isDebug: true, parseOnLoad: true"></script> 
     19 
     20        <!-- only needed for alternate theme testing: --> 
    1521        <script type="text/javascript" src="../_testCommon.js"></script> 
    1622 
    … …  
    6369</head> 
    6470 
    65 <body> 
    66 <h1>Dojo ComboBox Widget Test</h1> 
    67 <p> 
    68 A ComboBox is like a text &lt;input&gt; field (ie, you can input any value you want), 
    69 but it also has a list of suggested values that you can choose from. 
    70 The drop down list is filtered by the data you have already typed in. 
    71 </p> 
    72 <form action="#" method="GET"> 
    73  
    74         <p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p> 
    75         <label for="setvaluetest">US State test 1</label> (200% Courier font): 
    76         <select id="setvaluetest" 
    77                         name="state1" 
    78                         dojoType="dijit.form.ComboBox" 
    79                         class="medium" 
    80                         style="width:50%;font-size:200%;font-family:Courier;" 
    81                         name="foo.bar1" 
    82                         autoComplete="false" 
    83                         onChange="dojo.byId('oc1').value=arguments[0]" 
    84                         pageSize="30" 
    85         > 
    86                 <option></option> 
    87                 <option>Alabama</option> 
    88                 <option>Alaska</option> 
    89                 <option>American Samoa</option> 
    90                 <option>Arizona</option> 
    91                 <option>Arkansas</option> 
    92                 <option>Armed Forces Europe</option> 
    93                 <option>Armed Forces Pacific</option> 
    94                 <option>Armed Forces the Americas</option> 
    95                 <option>California</option> 
    96                 <option>Colorado</option> 
    97                 <option>Connecticut</option> 
    98                 <option>Delaware</option> 
    99                 <option>District of Columbia</option> 
    100                 <option>Federated States of Micronesia</option> 
    101                 <option>Florida</option> 
    102                 <option>Georgia</option> 
    103                 <option>Guam</option> 
    104                 <option>Hawaii</option> 
    105                 <option>Idaho</option> 
    106                 <option>Illinois</option> 
    107                 <option>Indiana</option> 
    108                 <option selected>Iowa</option> 
    109                 <option>Kansas</option> 
    110                 <option>Kentucky</option> 
    111                 <option>Louisiana</option> 
    112                 <option>Maine</option> 
    113                 <option>Marshall Islands</option> 
    114                 <option>Maryland</option> 
    115                 <option>Massachusetts</option> 
    116                 <option>Michigan</option> 
    117                 <option>Minnesota</option> 
    118                 <option>Mississippi</option> 
    119                 <option>Missouri</option> 
    120                 <option>Montana</option> 
    121                 <option>Nebraska</option> 
    122                 <option>Nevada</option> 
    123                 <option>New Hampshire</option> 
    124                 <option>New Jersey</option> 
    125                 <option>New Mexico</option> 
    126                 <option>New York</option> 
    127                 <option>North Carolina</option> 
    128                 <option>North Dakota</option> 
    129                 <option>Northern Mariana Islands</option> 
    130                 <option>Ohio</option> 
    131                 <option>Oklahoma</option> 
    132                 <option>Oregon</option> 
    133                 <option>Pennsylvania</option> 
    134                 <option>Puerto Rico</option> 
    135                 <option>Rhode Island</option> 
    136                 <option>South Carolina</option> 
    137                 <option>South Dakota</option> 
    138                 <option>Tennessee</option> 
    139                 <option>Texas</option> 
    140                 <option>Utah</option> 
    141                 <option>Vermont</option> 
    142                 <option>Virgin Islands, U.S.</option> 
    143                 <option>Virginia</option> 
    144                 <option>Washington</option> 
    145                 <option>West Virginia</option> 
    146                 <option>Wisconsin</option> 
    147                 <option>Wyoming</option> 
     71<body class="tundra"> 
     72 
     73        <h1 class="testTitle">Dojo ComboBox Widget Test</h1> 
     74        <p> 
     75        A ComboBox is like a text &lt;input&gt; field (ie, you can input any value you want), 
     76        but it also has a list of suggested values that you can choose from. 
     77        The drop down list is filtered by the data you have already typed in. 
     78        </p> 
     79        <form action="#" method="GET"> 
     80 
     81                <p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p> 
     82                <label for="setvaluetest">US State test 1</label> (200% Courier font): 
     83                <select id="setvaluetest" 
     84                                name="state1" 
     85                                dojoType="dijit.form.ComboBox" 
     86                                class="medium" 
     87                                style="width:50%;font-size:200%;font-family:Courier;" 
     88                                name="foo.bar1" 
     89                                autoComplete="false" 
     90                                onChange="dojo.byId('oc1').value=arguments[0]" 
     91                                pageSize="30" 
     92                > 
     93                        <option></option> 
     94                        <option>Alabama</option> 
     95                        <option>Alaska</option> 
     96                        <option>American Samoa</option> 
     97                        <option>Arizona</option> 
     98                        <option>Arkansas</option> 
     99                        <option>Armed Forces Europe</option> 
     100                        <option>Armed Forces Pacific</option> 
     101                        <option>Armed Forces the Americas</option> 
     102                        <option>California</option> 
     103                        <option>Colorado</option> 
     104                        <option>Connecticut</option> 
     105                        <option>Delaware</option> 
     106                        <option>District of Columbia</option> 
     107                        <option>Federated States of Micronesia</option> 
     108                        <option>Florida</option> 
     109                        <option>Georgia</option> 
     110                        <option>Guam</option> 
     111                        <option>Hawaii</option> 
     112                        <option>Idaho</option> 
     113                        <option>Illinois</option> 
     114                        <option>Indiana</option> 
     115                        <option selected>Iowa</option> 
     116                        <option>Kansas</option> 
     117                        <option>Kentucky</option> 
     118                        <option>Louisiana</option> 
     119                        <option>Maine</option> 
     120                        <option>Marshall Islands</option> 
     121                        <option>Maryland</option> 
     122                        <option>Massachusetts</option> 
     123                        <option>Michigan</option> 
     124                        <option>Minnesota</option> 
     125                        <option>Mississippi</option> 
     126                        <option>Missouri</option> 
     127                        <option>Montana</option> 
     128                        <option>Nebraska</option> 
     129                        <option>Nevada</option> 
     130                        <option>New Hampshire</option> 
     131                        <option>New Jersey</option> 
     132                        <option>New Mexico</option> 
     133                        <option>New York</option> 
     134                        <option>North Carolina</option> 
     135                        <option>North Dakota</option> 
     136                        <option>Northern Mariana Islands</option> 
     137                        <option>Ohio</option> 
     138                        <option>Oklahoma</option> 
     139                        <option>Oregon</option> 
     140                        <option>Pennsylvania</option> 
     141                        <option>Puerto Rico</option> 
     142                        <option>Rhode Island</option> 
     143                        <option>South Carolina</option> 
     144                        <option>South Dakota</option> 
     145                        <option>Tennessee</option> 
     146                        <option>Texas</option> 
     147                        <option>Utah</option> 
     148                        <option>Vermont</option> 
     149                        <option>Virgin Islands, U.S.</option> 
     150                        <option>Virginia</option> 
     151                        <option>Washington</option> 
     152                        <option>West Virginia</option> 
     153                        <option>Wisconsin</option> 
     154                        <option>Wyoming</option> 
     155                </select> 
     156                <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> 
     157                <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')"> 
     158                <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')"> 
     159 
     160                <hr> 
     161 
     162                <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" 
     163                        url="../_data/states.json"></div> 
     164 
     165                <div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore" 
     166                        url="../_data/dijits.json"></div> 
     167 
     168                <p>ComboBox #2: url, autoComplete=true:</p> 
     169                <label for="datatest">US State test 2</label> (8pt font):  
     170                <input dojoType="dijit.form.ComboBox" 
     171                                value="California" 
     172                                class="medium" 
     173                                store="stateStore" 
     174                                searchAttr="name" 
     175                                style="width: 200px; font-size: 8pt;" 
     176                                name="state2" 
     177                                onChange="setVal2" 
     178                                id="datatest" 
     179                > 
     180                <span>Value: <input id="value2" disabled value="California"></span> 
     181                <hr> 
     182                <label for="datatestDijit">Dijit List test #1</label> (150% font):  
     183                <input dojoType="dijit.form.ComboBox" 
     184                                value="dijit.Editor" 
     185                                class="medium" 
     186                                store="dijitStore" 
     187                                searchAttr="className" 
     188                                style="width: 200px; font-size: 150%;" 
     189                                name="dijitList1" 
     190                                id="datatestDijit" 
     191                > 
     192                <span>Hey look, this one is kind of useful.</span> 
     193                <hr> 
     194 
     195                <p>ComboBox #3: initially disabled, url, autoComplete=false:</p> 
     196                <label for="combo3">US State test 3: </label> 
     197                <input id="combo3" 
     198                                dojoType="dijit.form.ComboBox" 
     199                                value="California" 
     200                                class="medium" 
     201                                store="stateStore" 
     202                                searchAttr="name" 
     203                                style="width: 300px;" 
     204                                name="state3" 
     205                                autoComplete="false" 
     206                                onChange="setVal3" 
     207                                disabled 
     208                > 
     209                <span>Value: <input id="value3" disabled></span> 
     210                <div> 
     211                        <button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button> 
     212                </div> 
     213                <hr> 
     214                <p>ComboBox #4: url, autoComplete=false required=true and highlightMatch="none"</p> 
     215                <label for="combobox4">US State test 4: </label> 
     216                <input dojoType="dijit.form.ComboBox" 
     217                                value="" 
     218                                class="medium" 
     219                                store="stateStore" 
     220                                searchAttr="name" 
     221                                style="width: 300px;" 
     222                                name="state4" 
     223                                onChange="setVal4" 
     224                                autoComplete="false" 
     225                                id="combobox4" 
     226                                required="true" 
     227                                highlightMatch="none" 
     228                > 
     229                <span>Value: <input id="value4" disabled></span> 
     230                <hr> 
     231                <p>A ComboBox with no arrow, and with highlightMatch="all", which highlights all matches (the server is not searching accordingly!)</p> 
     232                <input dojoType="dijit.form.ComboBox" 
     233                                value="California" 
     234                                store="stateStore" 
     235                                searchAttr="name" 
     236                                name="state5" 
     237                                autoComplete="false" 
     238                                hasDownArrow="false" 
     239                                highlightMatch="all" 
     240                > 
     241                <hr> 
     242                <p>A combo created by createWidget</p> 
     243                <input id="progCombo"> 
     244                <hr> 
     245                <p>A ComboBox with an initial query.  (Limits list to items with type = country.)</p> 
     246                <input id="progCombo2"> 
     247                <hr> 
     248                <input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input> 
     249                <input type="submit"> 
     250 
     251        </form> 
     252        <p> 
     253        This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. 
     254        also: adding a simple combo box to test IE bleed through problem: 
     255        </p> 
     256 
     257        <select> 
     258          <option>test for</option> 
     259          <option>IE bleed through</option> 
     260          <option>problem</option> 
    148261        </select> 
    149         <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> 
    150         <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')"> 
    151         <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')"> 
    152  
    153         <hr> 
    154  
    155         <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" 
    156                 url="../_data/states.json"></div> 
    157  
    158         <div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore" 
    159                 url="../_data/dijits.json"></div> 
    160  
    161         <p>ComboBox #2: url, autoComplete=true:</p> 
    162         <label for="datatest">US State test 2</label> (8pt font):  
    163         <input dojoType="dijit.form.ComboBox" 
    164                         value="California" 
    165                         class="medium" 
    166                         store="stateStore" 
    167                         searchAttr="name" 
    168                         style="width: 200px; font-size: 8pt;" 
    169                         name="state2" 
    170                         onChange="setVal2" 
    171                         id="datatest" 
    172         > 
    173         <span>Value: <input id="value2" disabled value="California"></span> 
    174         <hr> 
    175         <label for="datatestDijit">Dijit List test #1</label> (150% font):  
    176         <input dojoType="dijit.form.ComboBox" 
    177                         value="dijit.Editor" 
    178                         class="medium" 
    179                         store="dijitStore" 
    180                         searchAttr="className" 
    181                         style="width: 200px; font-size: 150%;" 
    182                         name="dijitList1" 
    183                         id="datatestDijit" 
    184         > 
    185         <span>Hey look, this one is kind of useful.</span> 
    186         <hr> 
    187  
    188         <p>ComboBox #3: initially disabled, url, autoComplete=false:</p> 
    189         <label for="combo3">US State test 3: </label> 
    190         <input id="combo3" 
    191                         dojoType="dijit.form.ComboBox" 
    192                         value="California" 
    193                         class="medium" 
    194                         store="stateStore" 
    195                         searchAttr="name" 
    196                         style="width: 300px;" 
    197                         name="state3" 
    198                         autoComplete="false" 
    199                         onChange="setVal3" 
    200                         disabled 
    201         > 
    202         <span>Value: <input id="value3" disabled></span> 
    203         <div> 
    204                 <button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button> 
    205         </div> 
    206         <hr> 
    207         <p>ComboBox #4: url, autoComplete=false required=true and highlightMatch="none"</p> 
    208         <label for="combobox4">US State test 4: </label> 
    209         <input dojoType="dijit.form.ComboBox" 
    210                         value="" 
    211                         class="medium" 
    212                         store="stateStore" 
    213                         searchAttr="name" 
    214                         style="width: 300px;" 
    215                         name="state4" 
    216                         onChange="setVal4" 
    217                         autoComplete="false" 
    218                         id="combobox4" 
    219                         required="true" 
    220                         highlightMatch="none" 
    221         > 
    222         <span>Value: <input id="value4" disabled></span> 
    223         <hr> 
    224         <p>A ComboBox with no arrow, and with highlightMatch="all", which highlights all matches (the server is not searching accordingly!)</p> 
    225         <input dojoType="dijit.form.ComboBox" 
    226                         value="California" 
    227                         store="stateStore" 
    228                         searchAttr="name" 
    229                         name="state5" 
    230                         autoComplete="false" 
    231                         hasDownArrow="false" 
    232                         highlightMatch="all" 
    233         > 
    234         <hr> 
    235         <p>A combo created by createWidget</p> 
    236         <input id="progCombo"> 
    237         <hr> 
    238         <p>A ComboBox with an initial query.  (Limits list to items with type = country.)</p> 
    239         <input id="progCombo2"> 
    240         <hr> 
    241         <input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input> 
    242         <input type="submit"> 
    243  
    244 </form> 
    245 <p> 
    246 This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. 
    247 also: adding a simple combo box to test IE bleed through problem: 
    248 </p> 
    249  
    250 <select> 
    251   <option>test for</option> 
    252   <option>IE bleed through</option> 
    253   <option>problem</option> 
    254 </select> 
    255 <h3>Some tests:</h3> 
    256 <ol> 
    257 <li>Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]</li> 
    258 <li>Type in DX - input box shows DX and no dropdown.</li> 
    259 <li>Open dropdown, click an item, it selects and closes dropdown.</li> 
    260 <li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li> 
    261 <li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li> 
    262 <li>Tab into the combo works, list should not apear.</li> 
    263 <li>Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").</li> 
    264 <li>Do the dropdown and click outside of it - the dropdown disappears.</li> 
    265 <li>Javascript disabled -&gt; fallback to old style combo?</li> 
    266 <li>Can you paste in the start of a match? [no]</li> 
    267 <li>Backspace to start - dropdown shows all all items</li> 
    268 <li>Backspace deselects last character [Borked: currently you have to backspace twice]</li> 
    269 <li>Press down key to open dropdown</li> 
    270 <li>Down and up keys select previous/next in dropdown.</li> 
    271 <li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li> 
    272 <li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li> 
    273 <li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li> 
    274 <li>Check that pressing escape undoes the previous action and closes the dropdown</li> 
    275 <li>Check that pressing escape again clears the input box.</li> 
    276 <li>In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)</li> 
    277 <li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li> 
    278 <li>Check dropdown is aligned correctly with bottom of the text input</li> 
    279 <li>Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)</li> 
    280 <li>Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]</li> 
    281 <li>Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)</li> 
    282 <li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li> 
    283 <li>Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)</li> 
    284 <li>Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?</li> 
    285 <li>(Add any other tests here)</li> 
    286 </ol> 
    287 <div id="debugbox"></div> 
    288 <!-- maintain state of combo box if user presses back/forward button --> 
    289 <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form> 
     262         
     263        <h3>Some tests:</h3> 
     264        <ol> 
     265                <li>Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]</li> 
     266                <li>Type in DX - input box shows DX and no dropdown.</li> 
     267                <li>Open dropdown, click an item, it selects and closes dropdown.</li> 
     268                <li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li> 
     269                <li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li> 
     270                <li>Tab into the combo works, list should not apear.</li> 
     271                <li>Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").</li> 
     272                <li>Do the dropdown and click outside of it - the dropdown disappears.</li> 
     273                <li>Javascript disabled -&gt; fallback to old style combo?</li> 
     274                <li>Can you paste in the start of a match? [no]</li> 
     275                <li>Backspace to start - dropdown shows all all items</li> 
     276                <li>Backspace deselects last character [Borked: currently you have to backspace twice]</li> 
     277                <li>Press down key to open dropdown</li> 
     278                <li>Down and up keys select previous/next in dropdown.</li> 
     279                <li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li> 
     280                <li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li> 
     281                <li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li> 
     282                <li>Check that pressing escape undoes the previous action and closes the dropdown</li> 
     283                <li>Check that pressing escape again clears the input box.</li> 
     284                <li>In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)</li> 
     285                <li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li> 
     286                <li>Check dropdown is aligned correctly with bottom of the text input</li> 
     287                <li>Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)</li> 
     288                <li>Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]</li> 
     289                <li>Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)</li> 
     290                <li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li> 
     291                <li>Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)</li> 
     292                <li>Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?</li> 
     293                <li>(Add any other tests here)</li> 
     294        </ol> 
     295        <div id="debugbox"></div> 
     296        <!-- maintain state of combo box if user presses back/forward button --> 
     297        <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form> 
    290298</body> 
    291299</html>