unit/autocomplete/autocomplete_core.js

(function( $ ) {

module( "autocomplete: core" );

test( "prevent form submit on enter when menu is active", function() {
        expect( 2 );
        var event,
                element = $( "#autocomplete" )
                        .autocomplete({
                                source: [ "java", "javascript" ]
                        })
                        .val( "ja" )
                        .autocomplete( "search" ),
                menu = element.autocomplete( "widget" );

        event = $.Event( "keydown" );
        event.keyCode = $.ui.keyCode.DOWN;
        element.trigger( event );
        deepEqual( menu.find( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" );

        event = $.Event( "keydown" );
        event.keyCode = $.ui.keyCode.ENTER;
        element.trigger( event );
        ok( event.isDefaultPrevented(), "default action is prevented" );
});

test( "allow form submit on enter when menu is not active", function() {
        expect( 1 );
        var event,
                element = $( "#autocomplete" )
                        .autocomplete({
                                autoFocus: false,
                                source: [ "java", "javascript" ]
                        })
                        .val( "ja" )
                        .autocomplete( "search" );

        event = $.Event( "keydown" );
        event.keyCode = $.ui.keyCode.ENTER;
        element.trigger( event );
        ok( !event.isDefaultPrevented(), "default action is prevented" );
});

(function() {
        test( "up arrow invokes search - input", function() {
                arrowsInvokeSearch( "#autocomplete", true, true );
        });

        test( "down arrow invokes search - input", function() {
                arrowsInvokeSearch( "#autocomplete", false, true );
        });

        test( "up arrow invokes search - textarea", function() {
                arrowsInvokeSearch( "#autocomplete-textarea", true, false );
        });

        test( "down arrow invokes search - textarea", function() {
                arrowsInvokeSearch( "#autocomplete-textarea", false, false );
        });

        test( "up arrow invokes search - contenteditable", function() {
                arrowsInvokeSearch( "#autocomplete-contenteditable", true, false );
        });

        test( "down arrow invokes search - contenteditable", function() {
                arrowsInvokeSearch( "#autocomplete-contenteditable", false, false );
        });

        test( "up arrow moves focus - input", function() {
                arrowsMoveFocus( "#autocomplete", true );
        });

        test( "down arrow moves focus - input", function() {
                arrowsMoveFocus( "#autocomplete", false );
        });

        test( "up arrow moves focus - textarea", function() {
                arrowsMoveFocus( "#autocomplete-textarea", true );
        });

        test( "down arrow moves focus - textarea", function() {
                arrowsMoveFocus( "#autocomplete-textarea", false );
        });

        test( "up arrow moves focus - contenteditable", function() {
                arrowsMoveFocus( "#autocomplete-contenteditable", true );
        });

        test( "down arrow moves focus - contenteditable", function() {
                arrowsMoveFocus( "#autocomplete-contenteditable", false );
        });
        
        test( "up arrow moves cursor - input", function() {
                arrowsNavigateElement( "#autocomplete", true, false );
        });

        test( "down arrow moves cursor - input", function() {
                arrowsNavigateElement( "#autocomplete", false, false );
        });

        test( "up arrow moves cursor - textarea", function() {
                arrowsNavigateElement( "#autocomplete-textarea", true, true );
        });

        test( "down arrow moves cursor - textarea", function() {
                arrowsNavigateElement( "#autocomplete-textarea", false, true );
        });

        test( "up arrow moves cursor - contenteditable", function() {
                arrowsNavigateElement( "#autocomplete-contenteditable", true, true );
        });

        test( "down arrow moves cursor - contenteditable", function() {
                arrowsNavigateElement( "#autocomplete-contenteditable", false, true );
        });

        function arrowsInvokeSearch( id, isKeyUp, shouldMove ) {
                expect( 1 );

                var didMove = false,
                        element = $( id ).autocomplete({
                                source: [ "a" ],
                                delay: 0,
                                minLength: 0
                        });
                element.data( "ui-autocomplete" )._move = function() {
                        didMove = true;
                };
                element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
                equal( didMove, shouldMove, "respond to arrow" );
        }

        function arrowsMoveFocus( id, isKeyUp ) {
                expect( 1 );

                var element = $( id ).autocomplete({
                                source: [ "a" ],
                                delay: 0,
                                minLength: 0
                        });
                element.data( "ui-autocomplete" )._move = function() {
                        ok( true, "repsond to arrow" );
                };
                element.autocomplete( "search" );
                element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
        }
        
        function arrowsNavigateElement( id, isKeyUp, shouldMove ) {
                expect( 1 );

                var didMove = false,
                        element = $( id ).autocomplete({
                                source: [ "a" ],
                                delay: 0,
                                minLength: 0
                        });
                element.on( "keypress", function( e ) {
                        didMove = !e.isDefaultPrevented();
                });
                element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
                element.simulate( "keypress" );
                equal( didMove, shouldMove, "respond to arrow" );
        }
})();

asyncTest( "handle race condition", function() {
        expect( 3 );
        var count = 0,
                element = $( "#autocomplete" ).autocomplete({
                source: function( request, response ) {
                        count++;
                        if ( request.term.length === 1 ) {
                                equal( count, 1, "request with 1 character is first" );
                                setTimeout(function() {
                                        response([ "one" ]);
                                        setTimeout( checkResults, 1 );
                                }, 1 );
                                return;
                        }
                        equal( count, 2, "request with 2 characters is second" );
                        response([ "two" ]);
                }
        });

        element.autocomplete( "search", "a" );
        element.autocomplete( "search", "ab" );

        function checkResults() {
                equal( element.autocomplete( "widget" ).find( ".ui-menu-item" ).text(), "two",
                        "correct results displayed" );
                start();
        }
});

test( "ARIA", function() {
        expect( 7 );
        var element = $( "#autocomplete" ).autocomplete({
                        source: [ "java", "javascript" ]
                }),
                liveRegion = element.data( "ui-autocomplete" ).liveRegion;

        equal( liveRegion.text(), "", "Empty live region on create" );

        element.autocomplete( "search", "j" );
        equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
                "Live region for multiple values" );

        element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
        equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
                "Live region not changed on focus" );

        element.one( "autocompletefocus", function( event ) {
                event.preventDefault();
        });
        element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
        equal( liveRegion.text(), "javascript",
                "Live region updated when default focus is prevented" );

        element.autocomplete( "search", "javas" );
        equal( liveRegion.text(), "1 result is available, use up and down arrow keys to navigate.",
                "Live region for one value" );

        element.autocomplete( "search", "z" );
        equal( liveRegion.text(), "No search results.",
                "Live region for no values" );

        element.autocomplete( "search", "j" );
        equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
                "Live region for multiple values" );
});

test( ".replaceWith() (#9172)", function() {
        expect( 1 );

        var element = $( "#autocomplete" ).autocomplete(),
                replacement = "<div>test</div>",
                parent = element.parent();
        element.replaceWith( replacement );
        equal( parent.html().toLowerCase(), replacement );
});

}( jQuery ) );
1	(function( $ ) {
2
3	module( "autocomplete: core" );
4
5	test( "prevent form submit on enter when menu is active", function() {
6	expect( 2 );
7	var event,
8	element = $( "#autocomplete" )
9	.autocomplete({
10	source: [ "java", "javascript" ]
11	})
12	.val( "ja" )
13	.autocomplete( "search" ),
14	menu = element.autocomplete( "widget" );
15
16	event = $.Event( "keydown" );
17	event.keyCode = $.ui.keyCode.DOWN;
18	element.trigger( event );
19	deepEqual( menu.find( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" );
20
21	event = $.Event( "keydown" );
22	event.keyCode = $.ui.keyCode.ENTER;
23	element.trigger( event );
24	ok( event.isDefaultPrevented(), "default action is prevented" );
25	});
26
27	test( "allow form submit on enter when menu is not active", function() {
28	expect( 1 );
29	var event,
30	element = $( "#autocomplete" )
31	.autocomplete({
32	autoFocus: false,
33	source: [ "java", "javascript" ]
34	})
35	.val( "ja" )
36	.autocomplete( "search" );
37
38	event = $.Event( "keydown" );
39	event.keyCode = $.ui.keyCode.ENTER;
40	element.trigger( event );
41	ok( !event.isDefaultPrevented(), "default action is prevented" );
42	});
43
44	(function() {
45	test( "up arrow invokes search - input", function() {
46	arrowsInvokeSearch( "#autocomplete", true, true );
47	});
48
49	test( "down arrow invokes search - input", function() {
50	arrowsInvokeSearch( "#autocomplete", false, true );
51	});
52
53	test( "up arrow invokes search - textarea", function() {
54	arrowsInvokeSearch( "#autocomplete-textarea", true, false );
55	});
56
57	test( "down arrow invokes search - textarea", function() {
58	arrowsInvokeSearch( "#autocomplete-textarea", false, false );
59	});
60
61	test( "up arrow invokes search - contenteditable", function() {
62	arrowsInvokeSearch( "#autocomplete-contenteditable", true, false );
63	});
64
65	test( "down arrow invokes search - contenteditable", function() {
66	arrowsInvokeSearch( "#autocomplete-contenteditable", false, false );
67	});
68
69	test( "up arrow moves focus - input", function() {
70	arrowsMoveFocus( "#autocomplete", true );
71	});
72
73	test( "down arrow moves focus - input", function() {
74	arrowsMoveFocus( "#autocomplete", false );
75	});
76
77	test( "up arrow moves focus - textarea", function() {
78	arrowsMoveFocus( "#autocomplete-textarea", true );
79	});
80
81	test( "down arrow moves focus - textarea", function() {
82	arrowsMoveFocus( "#autocomplete-textarea", false );
83	});
84
85	test( "up arrow moves focus - contenteditable", function() {
86	arrowsMoveFocus( "#autocomplete-contenteditable", true );
87	});
88
89	test( "down arrow moves focus - contenteditable", function() {
90	arrowsMoveFocus( "#autocomplete-contenteditable", false );
91	});
92
93	test( "up arrow moves cursor - input", function() {
94	arrowsNavigateElement( "#autocomplete", true, false );
95	});
96
97	test( "down arrow moves cursor - input", function() {
98	arrowsNavigateElement( "#autocomplete", false, false );
99	});
100
101	test( "up arrow moves cursor - textarea", function() {
102	arrowsNavigateElement( "#autocomplete-textarea", true, true );
103	});
104
105	test( "down arrow moves cursor - textarea", function() {
106	arrowsNavigateElement( "#autocomplete-textarea", false, true );
107	});
108
109	test( "up arrow moves cursor - contenteditable", function() {
110	arrowsNavigateElement( "#autocomplete-contenteditable", true, true );
111	});
112
113	test( "down arrow moves cursor - contenteditable", function() {
114	arrowsNavigateElement( "#autocomplete-contenteditable", false, true );
115	});
116
117	function arrowsInvokeSearch( id, isKeyUp, shouldMove ) {
118	expect( 1 );
119
120	var didMove = false,
121	element = $( id ).autocomplete({
122	source: [ "a" ],
123	delay: 0,
124	minLength: 0
125	});
126	element.data( "ui-autocomplete" )._move = function() {
127	didMove = true;
128	};
129	element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
130	equal( didMove, shouldMove, "respond to arrow" );
131	}
132
133	function arrowsMoveFocus( id, isKeyUp ) {
134	expect( 1 );
135
136	var element = $( id ).autocomplete({
137	source: [ "a" ],
138	delay: 0,
139	minLength: 0
140	});
141	element.data( "ui-autocomplete" )._move = function() {
142	ok( true, "repsond to arrow" );
143	};
144	element.autocomplete( "search" );
145	element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
146	}
147
148	function arrowsNavigateElement( id, isKeyUp, shouldMove ) {
149	expect( 1 );
150
151	var didMove = false,
152	element = $( id ).autocomplete({
153	source: [ "a" ],
154	delay: 0,
155	minLength: 0
156	});
157	element.on( "keypress", function( e ) {
158	didMove = !e.isDefaultPrevented();
159	});
160	element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } );
161	element.simulate( "keypress" );
162	equal( didMove, shouldMove, "respond to arrow" );
163	}
164	})();
165
166	asyncTest( "handle race condition", function() {
167	expect( 3 );
168	var count = 0,
169	element = $( "#autocomplete" ).autocomplete({
170	source: function( request, response ) {
171	count++;
172	if ( request.term.length === 1 ) {
173	equal( count, 1, "request with 1 character is first" );
174	setTimeout(function() {
175	response([ "one" ]);
176	setTimeout( checkResults, 1 );
177	}, 1 );
178	return;
179	}
180	equal( count, 2, "request with 2 characters is second" );
181	response([ "two" ]);
182	}
183	});
184
185	element.autocomplete( "search", "a" );
186	element.autocomplete( "search", "ab" );
187
188	function checkResults() {
189	equal( element.autocomplete( "widget" ).find( ".ui-menu-item" ).text(), "two",
190	"correct results displayed" );
191	start();
192	}
193	});
194
195	test( "ARIA", function() {
196	expect( 7 );
197	var element = $( "#autocomplete" ).autocomplete({
198	source: [ "java", "javascript" ]
199	}),
200	liveRegion = element.data( "ui-autocomplete" ).liveRegion;
201
202	equal( liveRegion.text(), "", "Empty live region on create" );
203
204	element.autocomplete( "search", "j" );
205	equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
206	"Live region for multiple values" );
207
208	element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
209	equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
210	"Live region not changed on focus" );
211
212	element.one( "autocompletefocus", function( event ) {
213	event.preventDefault();
214	});
215	element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
216	equal( liveRegion.text(), "javascript",
217	"Live region updated when default focus is prevented" );
218
219	element.autocomplete( "search", "javas" );
220	equal( liveRegion.text(), "1 result is available, use up and down arrow keys to navigate.",
221	"Live region for one value" );
222
223	element.autocomplete( "search", "z" );
224	equal( liveRegion.text(), "No search results.",
225	"Live region for no values" );
226
227	element.autocomplete( "search", "j" );
228	equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
229	"Live region for multiple values" );
230	});
231
232	test( ".replaceWith() (#9172)", function() {
233	expect( 1 );
234
235	var element = $( "#autocomplete" ).autocomplete(),
236	replacement = "<div>test</div>",
237	parent = element.parent();
238	element.replaceWith( replacement );
239	equal( parent.html().toLowerCase(), replacement );
240	});
241
242	}( jQuery ) );