jquery-ui/tests/unit/autocomplete/autocomplete_events.js

(function( $ ) {

module( "autocomplete: events" );

var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ];

asyncTest( "all events", function() {
	expect( 13 );
	var element = $( "#autocomplete" )
			.autocomplete({
				autoFocus: false,
				delay: 0,
				source: data,
				search: function( event ) {
					equal( event.originalEvent.type, "keydown", "search originalEvent" );
				},
				response: function( event, ui ) {
					deepEqual( ui.content, [
						{ label: "Clojure", value: "Clojure" },
						{ label: "Java", value: "Java" },
						{ label: "JavaScript", value: "JavaScript" }
					], "response ui.content" );
					ui.content.splice( 0, 1 );
				},
				open: function( event ) {
					ok( menu.is( ":visible" ), "menu open on open" );
				},
				focus: function( event, ui ) {
					equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
					deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
				},
				close: function( event ) {
					equal( event.originalEvent.type, "menuselect", "close originalEvent" );
					ok( menu.is( ":hidden" ), "menu closed on close" );
				},
				select: function( event, ui ) {
					equal( event.originalEvent.type, "menuselect", "select originalEvent" );
					deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
				},
				change: function( event, ui ) {
					equal( event.originalEvent.type, "blur", "change originalEvent" );
					deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" );
					ok( menu.is( ":hidden" ), "menu closed on change" );
					start();
				}
			}),
		menu = element.autocomplete( "widget" );

	element.focus().val( "j" ).keydown();
	setTimeout(function() {
		ok( menu.is( ":visible" ), "menu is visible after delay" );
		element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
		element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
		// blurring through jQuery causes a bug in IE 6 which causes the
		// autocompletechange event to occur twice
		element[0].blur();
	}, 50 );
});

asyncTest( "all events - contenteditable", function() {
	expect( 13 );
	var element = $( "#autocomplete-contenteditable" )
		.autocomplete({
			autoFocus: false,
			delay: 0,
			source: data,
			search: function( event ) {
				equal( event.originalEvent.type, "keydown", "search originalEvent" );
			},
			response: function( event, ui ) {
				deepEqual( ui.content, [
					{ label: "Clojure", value: "Clojure" },
					{ label: "Java", value: "Java" },
					{ label: "JavaScript", value: "JavaScript" }
				], "response ui.content" );
				ui.content.splice( 0, 1 );
			},
			open: function( event ) {
				ok( menu.is( ":visible" ), "menu open on open" );
			},
			focus: function( event, ui ) {
				equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
				deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
			},
			close: function( event ) {
				equal( event.originalEvent.type, "menuselect", "close originalEvent" );
				ok( menu.is( ":hidden" ), "menu closed on close" );
			},
			select: function( event, ui ) {
				equal( event.originalEvent.type, "menuselect", "select originalEvent" );
				deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
			},
			change: function( event, ui ) {
				equal( event.originalEvent.type, "blur", "change originalEvent" );
				deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" );
				ok( menu.is( ":hidden" ), "menu closed on change" );
				start();
			}
		}),
	menu = element.autocomplete( "widget" );

	element.focus().text( "j" ).keydown();
	setTimeout(function() {
		ok( menu.is( ":visible" ), "menu is visible after delay" );
		element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
		element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
		// TODO: blurring through jQuery causes a bug in IE 6 which causes the
		// autocompletechange event to occur twice
		element[0].blur();
	}, 50 );
});

asyncTest( "change without selection", function() {
	expect( 1 );
	var element = $( "#autocomplete" ).autocomplete({
		delay: 0,
		source: data,
		change: function( event, ui ) {
			strictEqual( ui.item, null );
			start();
		}
	});
	element.triggerHandler( "focus" );
	element.val( "ja" ).triggerHandler( "blur" );
});

asyncTest( "cancel search", function() {
	expect( 6 );
	var first = true,
		element = $( "#autocomplete" ).autocomplete({
			delay: 0,
			source: data,
			search: function() {
				if ( first ) {
					equal( element.val(), "ja", "val on first search" );
					first = false;
					return false;
				}
				equal( element.val(), "java", "val on second search" );
			},
			open: function() {
				ok( true, "menu opened" );
			}
		}),
		menu = element.autocomplete( "widget" );
	element.val( "ja" ).keydown();
	setTimeout(function() {
		ok( menu.is( ":hidden" ), "menu is hidden after first search" );
		element.val( "java" ).keydown();
		setTimeout(function() {
			ok( menu.is( ":visible" ), "menu is visible after second search" );
			equal( menu.find( ".ui-menu-item" ).length, 2, "# of menu items" );
			start();
		}, 50 );
	}, 50 );
});

asyncTest( "cancel focus", function() {
	expect( 1 );
	var customVal = "custom value";
		element = $( "#autocomplete" ).autocomplete({
			delay: 0,
			source: data,
			focus: function( event, ui ) {
				$( this ).val( customVal );
				return false;
			}
		});
	element.val( "ja" ).keydown();
	setTimeout(function() {
		element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
		equal( element.val(), customVal );
		start();
	}, 50 );
});

asyncTest( "cancel select", function() {
	expect( 1 );
	var customVal = "custom value",
		element = $( "#autocomplete" ).autocomplete({
			delay: 0,
			source: data,
			select: function( event, ui ) {
				$( this ).val( customVal );
				return false;
			}
		});
	element.val( "ja" ).keydown();
	setTimeout(function() {
		element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
		element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
		equal( element.val(), customVal );
		start();
	}, 50 );
});

/* TODO previous fix broke more than it fixed, disabling this for now - messed up regular menu select event
test("blur without selection", function() {
	expect(1);
	var ac = $("#autocomplete").autocomplete({
		delay: 0,
		source: data
	});
	stop();
	ac.val("j").keydown();
	setTimeout(function() {
		$( ".ui-menu-item" ).first().simulate("mouseover");
		ac.simulate("keydown", { keyCode: $.ui.keyCode.TAB });
		deepEqual( ac.val(), "j" );
		start();
	}, 50);
});
*/

}( jQuery ) );