jquery-ui/tests/unit/autocomplete/autocomplete_events.js
2011-06-13 14:09:44 -04:00

216 lines
6.5 KiB
JavaScript

(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 ) );