corrade-http-templates – Blame information for rev 57

Subversion Repositories:
Rev:
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 } );