corrade-http-templates – Blame information for rev 57
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
57 | office | 1 | define( [ |
2 | "qunit", |
||
3 | "jquery", |
||
4 | "ui/widgets/autocomplete" |
||
5 | ], function( QUnit, $ ) { |
||
6 | |||
7 | QUnit.module( "autocomplete: core" ); |
||
8 | |||
9 | QUnit.test( "markup structure", function( assert ) { |
||
10 | assert.expect( 2 ); |
||
11 | var element = $( "#autocomplete" ).autocomplete(), |
||
12 | menu = element.autocomplete( "widget" ); |
||
13 | |||
14 | assert.hasClasses( element, "ui-autocomplete-input" ); |
||
15 | assert.hasClasses( menu, "ui-autocomplete ui-widget ui-widget-content" ); |
||
16 | } ); |
||
17 | |||
18 | QUnit.test( "prevent form submit on enter when menu is active", function( assert ) { |
||
19 | assert.expect( 2 ); |
||
20 | var event, |
||
21 | element = $( "#autocomplete" ) |
||
22 | .autocomplete( { |
||
23 | source: [ "java", "javascript" ] |
||
24 | } ) |
||
25 | .val( "ja" ) |
||
26 | .autocomplete( "search" ), |
||
27 | menu = element.autocomplete( "widget" ); |
||
28 | |||
29 | event = $.Event( "keydown" ); |
||
30 | event.keyCode = $.ui.keyCode.DOWN; |
||
31 | element.trigger( event ); |
||
32 | assert.equal( menu.find( ".ui-menu-item-wrapper.ui-state-active" ).length, 1, |
||
33 | "menu item is active" ); |
||
34 | |||
35 | event = $.Event( "keydown" ); |
||
36 | event.keyCode = $.ui.keyCode.ENTER; |
||
37 | element.trigger( event ); |
||
38 | assert.ok( event.isDefaultPrevented(), "default action is prevented" ); |
||
39 | } ); |
||
40 | |||
41 | QUnit.test( "allow form submit on enter when menu is not active", function( assert ) { |
||
42 | assert.expect( 1 ); |
||
43 | var event, |
||
44 | element = $( "#autocomplete" ) |
||
45 | .autocomplete( { |
||
46 | autoFocus: false, |
||
47 | source: [ "java", "javascript" ] |
||
48 | } ) |
||
49 | .val( "ja" ) |
||
50 | .autocomplete( "search" ); |
||
51 | |||
52 | event = $.Event( "keydown" ); |
||
53 | event.keyCode = $.ui.keyCode.ENTER; |
||
54 | element.trigger( event ); |
||
55 | assert.ok( !event.isDefaultPrevented(), "default action is prevented" ); |
||
56 | } ); |
||
57 | |||
58 | ( function() { |
||
59 | QUnit.test( "up arrow invokes search - input", function( assert ) { |
||
60 | arrowsInvokeSearch( assert, "#autocomplete", true, true ); |
||
61 | } ); |
||
62 | |||
63 | QUnit.test( "down arrow invokes search - input", function( assert ) { |
||
64 | arrowsInvokeSearch( assert, "#autocomplete", false, true ); |
||
65 | } ); |
||
66 | |||
67 | QUnit.test( "up arrow invokes search - textarea", function( assert ) { |
||
68 | arrowsInvokeSearch( assert, "#autocomplete-textarea", true, false ); |
||
69 | } ); |
||
70 | |||
71 | QUnit.test( "down arrow invokes search - textarea", function( assert ) { |
||
72 | arrowsInvokeSearch( assert, "#autocomplete-textarea", false, false ); |
||
73 | } ); |
||
74 | |||
75 | QUnit.test( "up arrow invokes search - contenteditable", function( assert ) { |
||
76 | arrowsInvokeSearch( assert, "#autocomplete-contenteditable", true, false ); |
||
77 | } ); |
||
78 | |||
79 | QUnit.test( "down arrow invokes search - contenteditable", function( assert ) { |
||
80 | arrowsInvokeSearch( assert, "#autocomplete-contenteditable", false, false ); |
||
81 | } ); |
||
82 | |||
83 | QUnit.test( "up arrow moves focus - input", function( assert ) { |
||
84 | arrowsMoveFocus( assert, "#autocomplete", true ); |
||
85 | } ); |
||
86 | |||
87 | QUnit.test( "down arrow moves focus - input", function( assert ) { |
||
88 | arrowsMoveFocus( assert, "#autocomplete", false ); |
||
89 | } ); |
||
90 | |||
91 | QUnit.test( "up arrow moves focus - textarea", function( assert ) { |
||
92 | arrowsMoveFocus( assert, "#autocomplete-textarea", true ); |
||
93 | } ); |
||
94 | |||
95 | QUnit.test( "down arrow moves focus - textarea", function( assert ) { |
||
96 | arrowsMoveFocus( assert, "#autocomplete-textarea", false ); |
||
97 | } ); |
||
98 | |||
99 | QUnit.test( "up arrow moves focus - contenteditable", function( assert ) { |
||
100 | arrowsMoveFocus( assert, "#autocomplete-contenteditable", true ); |
||
101 | } ); |
||
102 | |||
103 | QUnit.test( "down arrow moves focus - contenteditable", function( assert ) { |
||
104 | arrowsMoveFocus( assert, "#autocomplete-contenteditable", false ); |
||
105 | } ); |
||
106 | |||
107 | QUnit.test( "up arrow moves cursor - input", function( assert ) { |
||
108 | arrowsNavigateElement( assert, "#autocomplete", true, false ); |
||
109 | } ); |
||
110 | |||
111 | QUnit.test( "down arrow moves cursor - input", function( assert ) { |
||
112 | arrowsNavigateElement( assert, "#autocomplete", false, false ); |
||
113 | } ); |
||
114 | |||
115 | QUnit.test( "up arrow moves cursor - textarea", function( assert ) { |
||
116 | arrowsNavigateElement( assert, "#autocomplete-textarea", true, true ); |
||
117 | } ); |
||
118 | |||
119 | QUnit.test( "down arrow moves cursor - textarea", function( assert ) { |
||
120 | arrowsNavigateElement( assert, "#autocomplete-textarea", false, true ); |
||
121 | } ); |
||
122 | |||
123 | QUnit.test( "up arrow moves cursor - contenteditable", function( assert ) { |
||
124 | arrowsNavigateElement( assert, "#autocomplete-contenteditable", true, true ); |
||
125 | } ); |
||
126 | |||
127 | QUnit.test( "down arrow moves cursor - contenteditable", function( assert ) { |
||
128 | arrowsNavigateElement( assert, "#autocomplete-contenteditable", false, true ); |
||
129 | } ); |
||
130 | |||
131 | function arrowsInvokeSearch( assert, id, isKeyUp, shouldMove ) { |
||
132 | assert.expect( 1 ); |
||
133 | |||
134 | var didMove = false, |
||
135 | element = $( id ).autocomplete( { |
||
136 | source: [ "a" ], |
||
137 | delay: 0, |
||
138 | minLength: 0 |
||
139 | } ); |
||
140 | element.autocomplete( "instance" )._move = function() { |
||
141 | didMove = true; |
||
142 | }; |
||
143 | element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } ); |
||
144 | assert.equal( didMove, shouldMove, "respond to arrow" ); |
||
145 | } |
||
146 | |||
147 | function arrowsMoveFocus( assert, id, isKeyUp ) { |
||
148 | assert.expect( 1 ); |
||
149 | |||
150 | var element = $( id ).autocomplete( { |
||
151 | source: [ "a" ], |
||
152 | delay: 0, |
||
153 | minLength: 0 |
||
154 | } ); |
||
155 | element.autocomplete( "instance" )._move = function() { |
||
156 | assert.ok( true, "repsond to arrow" ); |
||
157 | }; |
||
158 | element.autocomplete( "search" ); |
||
159 | element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } ); |
||
160 | } |
||
161 | |||
162 | function arrowsNavigateElement( assert, id, isKeyUp, shouldMove ) { |
||
163 | assert.expect( 1 ); |
||
164 | |||
165 | var didMove = false, |
||
166 | element = $( id ).autocomplete( { |
||
167 | source: [ "a" ], |
||
168 | delay: 0, |
||
169 | minLength: 0 |
||
170 | } ); |
||
171 | element.on( "keypress", function( e ) { |
||
172 | didMove = !e.isDefaultPrevented(); |
||
173 | } ); |
||
174 | element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } ); |
||
175 | element.simulate( "keypress" ); |
||
176 | assert.equal( didMove, shouldMove, "respond to arrow" ); |
||
177 | } |
||
178 | } )(); |
||
179 | |||
180 | QUnit.test( "past end of menu in multiline autocomplete", function( assert ) { |
||
181 | var ready = assert.async(); |
||
182 | assert.expect( 2 ); |
||
183 | |||
184 | var customVal = "custom value", |
||
185 | element = $( "#autocomplete-contenteditable" ).autocomplete( { |
||
186 | delay: 0, |
||
187 | source: [ "javascript" ], |
||
188 | focus: function( event, ui ) { |
||
189 | assert.equal( ui.item.value, "javascript", "Item gained focus" ); |
||
190 | $( this ).text( customVal ); |
||
191 | event.preventDefault(); |
||
192 | } |
||
193 | } ); |
||
194 | |||
195 | element |
||
196 | .simulate( "focus" ) |
||
197 | .autocomplete( "search", "ja" ); |
||
198 | |||
199 | setTimeout( function() { |
||
200 | element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); |
||
201 | element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); |
||
202 | assert.equal( element.text(), customVal ); |
||
203 | ready(); |
||
204 | } ); |
||
205 | } ); |
||
206 | |||
207 | QUnit.test( "ESCAPE in multiline autocomplete", function( assert ) { |
||
208 | var ready = assert.async(); |
||
209 | assert.expect( 2 ); |
||
210 | |||
211 | var customVal = "custom value", |
||
212 | element = $( "#autocomplete-contenteditable" ).autocomplete( { |
||
213 | delay: 0, |
||
214 | source: [ "javascript" ], |
||
215 | focus: function( event, ui ) { |
||
216 | assert.equal( ui.item.value, "javascript", "Item gained focus" ); |
||
217 | $( this ).text( customVal ); |
||
218 | event.preventDefault(); |
||
219 | } |
||
220 | } ); |
||
221 | |||
222 | element |
||
223 | .simulate( "focus" ) |
||
224 | .autocomplete( "search", "ja" ); |
||
225 | |||
226 | setTimeout( function() { |
||
227 | element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); |
||
228 | element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); |
||
229 | assert.equal( element.text(), customVal ); |
||
230 | ready(); |
||
231 | } ); |
||
232 | } ); |
||
233 | |||
234 | QUnit.test( "handle race condition", function( assert ) { |
||
235 | var ready = assert.async(); |
||
236 | assert.expect( 3 ); |
||
237 | var count = 0, |
||
238 | element = $( "#autocomplete" ).autocomplete( { |
||
239 | source: function( request, response ) { |
||
240 | count++; |
||
241 | if ( request.term.length === 1 ) { |
||
242 | assert.equal( count, 1, "request with 1 character is first" ); |
||
243 | setTimeout( function() { |
||
244 | response( [ "one" ] ); |
||
245 | setTimeout( checkResults ); |
||
246 | } ); |
||
247 | return; |
||
248 | } |
||
249 | assert.equal( count, 2, "request with 2 characters is second" ); |
||
250 | response( [ "two" ] ); |
||
251 | } |
||
252 | } ); |
||
253 | |||
254 | element.autocomplete( "search", "a" ); |
||
255 | element.autocomplete( "search", "ab" ); |
||
256 | |||
257 | function checkResults() { |
||
258 | assert.equal( element.autocomplete( "widget" ).find( ".ui-menu-item" ).text(), "two", |
||
259 | "correct results displayed" ); |
||
260 | ready(); |
||
261 | } |
||
262 | } ); |
||
263 | |||
264 | QUnit.test( "simultaneous searches (#9334)", function( assert ) { |
||
265 | var ready = assert.async(); |
||
266 | assert.expect( 2 ); |
||
267 | var element = $( "#autocomplete" ).autocomplete( { |
||
268 | source: function( request, response ) { |
||
269 | setTimeout( function() { |
||
270 | response( [ request.term ] ); |
||
271 | } ); |
||
272 | }, |
||
273 | response: function() { |
||
274 | assert.ok( true, "response from first instance" ); |
||
275 | } |
||
276 | } ), |
||
277 | element2 = $( "#autocomplete-textarea" ).autocomplete( { |
||
278 | source: function( request, response ) { |
||
279 | setTimeout( function() { |
||
280 | response( [ request.term ] ); |
||
281 | } ); |
||
282 | }, |
||
283 | response: function() { |
||
284 | assert.ok( true, "response from second instance" ); |
||
285 | ready(); |
||
286 | } |
||
287 | } ); |
||
288 | |||
289 | element.autocomplete( "search", "test" ); |
||
290 | element2.autocomplete( "search", "test" ); |
||
291 | } ); |
||
292 | |||
293 | QUnit.test( "ARIA", function( assert ) { |
||
294 | assert.expect( 13 ); |
||
295 | var element = $( "#autocomplete" ).autocomplete( { |
||
296 | source: [ "java", "javascript" ] |
||
297 | } ), |
||
298 | liveRegion = element.autocomplete( "instance" ).liveRegion; |
||
299 | |||
300 | assert.equal( liveRegion.children().length, 0, "Empty live region on create" ); |
||
301 | assert.equal( liveRegion.attr( "aria-live" ), "assertive", |
||
302 | "Live region's aria-live attribute must be assertive" ); |
||
303 | assert.equal( liveRegion.attr( "aria-relevant" ), "additions", |
||
304 | "Live region's aria-relevant attribute must be additions" ); |
||
305 | assert.equal( liveRegion.attr( "role" ), "status", |
||
306 | "Live region's role attribute must be status" ); |
||
307 | |||
308 | element.autocomplete( "search", "j" ); |
||
309 | assert.equal( liveRegion.children().first().text(), |
||
310 | "2 results are available, use up and down arrow keys to navigate.", |
||
311 | "Live region for multiple values" ); |
||
312 | |||
313 | element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); |
||
314 | assert.equal( liveRegion.children().filter( ":visible" ).text(), "java", |
||
315 | "Live region changed on keydown to announce the highlighted value" ); |
||
316 | |||
317 | element.one( "autocompletefocus", function( event ) { |
||
318 | event.preventDefault(); |
||
319 | } ); |
||
320 | element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); |
||
321 | assert.equal( liveRegion.children().filter( ":visible" ).text(), "javascript", |
||
322 | "Live region updated when default focus is prevented" ); |
||
323 | |||
324 | element.autocomplete( "search", "javas" ); |
||
325 | assert.equal( liveRegion.children().filter( ":visible" ).text(), |
||
326 | "1 result is available, use up and down arrow keys to navigate.", |
||
327 | "Live region for one value" ); |
||
328 | |||
329 | element.autocomplete( "search", "z" ); |
||
330 | assert.equal( liveRegion.children().filter( ":visible" ).text(), "No search results.", |
||
331 | "Live region for no values" ); |
||
332 | |||
333 | assert.equal( liveRegion.children().length, 5, |
||
334 | "Should be five children in the live region after the above" ); |
||
335 | assert.equal( liveRegion.children().filter( ":visible" ).length, 1, |
||
336 | "Only one should be still visible" ); |
||
337 | assert.ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ], |
||
338 | "The last one should be the visible one" ); |
||
339 | |||
340 | element.autocomplete( "destroy" ); |
||
341 | assert.equal( liveRegion.parent().length, 0, |
||
342 | "The liveRegion should be detached after destroy" ); |
||
343 | } ); |
||
344 | |||
345 | QUnit.test( "ARIA, aria-label announcement", function( assert ) { |
||
346 | assert.expect( 1 ); |
||
347 | $.widget( "custom.catcomplete", $.ui.autocomplete, { |
||
348 | _renderMenu: function( ul, items ) { |
||
349 | var that = this; |
||
350 | $.each( items, function( index, item ) { |
||
351 | that._renderItemData( ul, item ) |
||
352 | .attr( "aria-label", item.category + " : " + item.label ); |
||
353 | } ); |
||
354 | } |
||
355 | } ); |
||
356 | var element = $( "#autocomplete" ).catcomplete( { |
||
357 | source: [ { label: "anders andersson", category: "People" } ] |
||
358 | } ), |
||
359 | liveRegion = element.catcomplete( "instance" ).liveRegion; |
||
360 | element.catcomplete( "search", "a" ); |
||
361 | element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); |
||
362 | assert.equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson", |
||
363 | "Live region changed on keydown to announce the highlighted value's aria-label attribute" ); |
||
364 | } ); |
||
365 | |||
366 | QUnit.test( "ARIA, init on detached input", function( assert ) { |
||
367 | assert.expect( 1 ); |
||
368 | var element = $( "<input>" ).autocomplete( { |
||
369 | source: [ "java", "javascript" ] |
||
370 | } ), |
||
371 | liveRegion = element.autocomplete( "instance" ).liveRegion; |
||
372 | assert.equal( liveRegion.parent().length, 1, "liveRegion must have a parent" ); |
||
373 | } ); |
||
374 | |||
375 | QUnit.test( ".replaceWith() (#9172)", function( assert ) { |
||
376 | assert.expect( 1 ); |
||
377 | |||
378 | var element = $( "#autocomplete" ).autocomplete(), |
||
379 | replacement = "<div>test</div>", |
||
380 | parent = element.parent(); |
||
381 | element.replaceWith( replacement ); |
||
382 | assert.equal( parent.html().toLowerCase(), replacement ); |
||
383 | } ); |
||
384 | |||
385 | QUnit.test( "Search if the user retypes the same value (#7434)", function( assert ) { |
||
386 | var ready = assert.async(); |
||
387 | assert.expect( 3 ); |
||
388 | var element = $( "#autocomplete" ).autocomplete( { |
||
389 | source: [ "java", "javascript" ], |
||
390 | delay: 0 |
||
391 | } ), |
||
392 | menu = element.autocomplete( "instance" ).menu.element; |
||
393 | |||
394 | element.val( "j" ).simulate( "keydown" ); |
||
395 | setTimeout( function() { |
||
396 | assert.ok( menu.is( ":visible" ), "menu displays initially" ); |
||
397 | element.trigger( "blur" ); |
||
398 | assert.ok( !menu.is( ":visible" ), "menu hidden after blur" ); |
||
399 | element.val( "j" ).simulate( "keydown" ); |
||
400 | setTimeout( function() { |
||
401 | assert.ok( menu.is( ":visible" ), "menu displays after typing the same value" ); |
||
402 | ready(); |
||
403 | } ); |
||
404 | } ); |
||
405 | } ); |
||
406 | |||
407 | QUnit.test( "Close on click outside when focus remains", function( assert ) { |
||
408 | var ready = assert.async(); |
||
409 | assert.expect( 2 ); |
||
410 | |||
411 | var element = $( "#autocomplete" ).autocomplete( { |
||
412 | source: [ "java", "javascript" ], |
||
413 | delay: 0 |
||
414 | } ); |
||
415 | var menu = element.autocomplete( "widget" ); |
||
416 | |||
417 | $( "body" ).on( "mousedown", function( event ) { |
||
418 | event.preventDefault(); |
||
419 | } ); |
||
420 | |||
421 | element.val( "j" ).autocomplete( "search", "j" ); |
||
422 | setTimeout( function() { |
||
423 | assert.ok( menu.is( ":visible" ), "menu displays initially" ); |
||
424 | $( "body" ).simulate( "mousedown" ); |
||
425 | setTimeout( function() { |
||
426 | assert.ok( menu.is( ":hidden" ), "menu closes after clicking elsewhere" ); |
||
427 | ready(); |
||
428 | } ); |
||
429 | } ); |
||
430 | } ); |
||
431 | |||
432 | } ); |