" );
$.widget( "ui.testWidget", {
_create: function() {},
widget: function() {
return wrapper;
}
});
deepEqual( wrapper[0], $( "
" ).testWidget().testWidget( "widget" )[0] );
});
test( "._on() to element (default)", function() {
expect( 12 );
var that, widget;
$.widget( "ui.testWidget", {
_create: function() {
that = this;
this._on({
keyup: this.keyup,
keydown: "keydown"
});
},
keyup: function( event ) {
equal( that, this );
equal( that.element[0], event.currentTarget );
equal( "keyup", event.type );
},
keydown: function( event ) {
equal( that, this );
equal( that.element[0], event.currentTarget );
equal( "keydown", event.type );
}
});
widget = $( "
" )
.testWidget()
.trigger( "keyup" )
.trigger( "keydown" );
widget
.testWidget( "disable" )
.trigger( "keyup" )
.trigger( "keydown" );
widget
.testWidget( "enable" )
.trigger( "keyup" )
.trigger( "keydown" );
widget
.testWidget( "destroy" )
.trigger( "keyup" )
.trigger( "keydown" );
});
test( "._on() to descendent", function() {
expect( 12 );
var that, widget, descendant;
$.widget( "ui.testWidget", {
_create: function() {
that = this;
this._on( this.element.find( "strong" ), {
keyup: this.keyup,
keydown: "keydown"
});
},
keyup: function( event ) {
equal( that, this );
equal( that.element.find( "strong" )[0], event.currentTarget );
equal( "keyup", event.type );
},
keydown: function(event) {
equal( that, this );
equal( that.element.find( "strong" )[0], event.currentTarget );
equal( "keydown", event.type );
}
});
// trigger events on both widget and descendent to ensure that only descendent receives them
widget = $( "
" )
.testWidget()
.trigger( "keyup" )
.trigger( "keydown" );
descendant = widget.find( "strong" )
.trigger( "keyup" )
.trigger( "keydown" );
widget
.testWidget( "disable" )
.trigger( "keyup" )
.trigger( "keydown" );
descendant
.trigger( "keyup" )
.trigger( "keydown" );
widget
.testWidget( "enable" )
.trigger( "keyup" )
.trigger( "keydown" );
descendant
.trigger( "keyup" )
.trigger( "keydown" );
descendant
.addClass( "ui-state-disabled" )
.trigger( "keyup" )
.trigger( "keydown" );
widget
.testWidget( "destroy" )
.trigger( "keyup" )
.trigger( "keydown" );
descendant
.trigger( "keyup" )
.trigger( "keydown" );
});
test( "_on() with delegate", function() {
expect( 8 );
$.widget( "ui.testWidget", {
_create: function() {
var uuid = this.uuid;
this.element = {
bind: function( event, handler ) {
equal( event, "click.testWidget" + uuid );
ok( $.isFunction(handler) );
},
trigger: $.noop
};
this.widget = function() {
return {
delegate: function( selector, event, handler ) {
equal( selector, "a" );
equal( event, "click.testWidget" + uuid );
ok( $.isFunction(handler) );
}
};
};
this._on({
"click": "handler",
"click a": "handler"
});
this.widget = function() {
return {
delegate: function( selector, event, handler ) {
equal( selector, "form fieldset > input" );
equal( event, "change.testWidget" + uuid );
ok( $.isFunction(handler) );
}
};
};
this._on({
"change form fieldset > input": "handler"
});
}
});
$.ui.testWidget();
});
test( "_on() to common element", function() {
expect( 1 );
$.widget( "ui.testWidget", {
_create: function() {
this._on( this.document, {
"customevent": "_handler"
});
},
_handler: function() {
ok( true, "handler triggered" );
}
});
var widget = $( "#widget" ).testWidget().data( "testWidget" );
$( "#widget-wrapper" ).testWidget();
widget.destroy();
$( document ).trigger( "customevent" );
});
test( "_off() - single event", function() {
expect( 3 );
$.widget( "ui.testWidget", {} );
var shouldTriggerWidget, shouldTriggerOther,
element = $( "#widget" ),
widget = element.testWidget().data( "testWidget" );
widget._on( element, { foo: function() {
ok( shouldTriggerWidget, "foo called from _on" );
}});
element.bind( "foo", function() {
ok( shouldTriggerOther, "foo called from bind" );
});
shouldTriggerWidget = true;
shouldTriggerOther = true;
element.trigger( "foo" );
shouldTriggerWidget = false;
widget._off( element, "foo" );
element.trigger( "foo" );
});
test( "_off() - multiple events", function() {
expect( 6 );
$.widget( "ui.testWidget", {} );
var shouldTriggerWidget, shouldTriggerOther,
element = $( "#widget" ),
widget = element.testWidget().data( "testWidget" );
widget._on( element, {
foo: function() {
ok( shouldTriggerWidget, "foo called from _on" );
},
bar: function() {
ok( shouldTriggerWidget, "bar called from _on" );
}
});
element.bind( "foo bar", function( event ) {
ok( shouldTriggerOther, event.type + " called from bind" );
});
shouldTriggerWidget = true;
shouldTriggerOther = true;
element.trigger( "foo" );
element.trigger( "bar" );
shouldTriggerWidget = false;
widget._off( element, "foo bar" );
element.trigger( "foo" );
element.trigger( "bar" );
});
test( "_off() - all events", function() {
expect( 6 );
$.widget( "ui.testWidget", {} );
var shouldTriggerWidget, shouldTriggerOther,
element = $( "#widget" ),
widget = element.testWidget().data( "testWidget" );
widget._on( element, {
foo: function() {
ok( shouldTriggerWidget, "foo called from _on" );
},
bar: function() {
ok( shouldTriggerWidget, "bar called from _on" );
}
});
element.bind( "foo bar", function( event ) {
ok( shouldTriggerOther, event.type + " called from bind" );
});
shouldTriggerWidget = true;
shouldTriggerOther = true;
element.trigger( "foo" );
element.trigger( "bar" );
shouldTriggerWidget = false;
widget._off( element );
element.trigger( "foo" );
element.trigger( "bar" );
});
test( "._hoverable()", function() {
$.widget( "ui.testWidget", {
_create: function() {
this._hoverable( this.element.children() );
}
});
var div = $( "#widget" ).testWidget().children();
ok( !div.hasClass( "ui-state-hover" ), "not hovered on init" );
div.trigger( "mouseenter" );
ok( div.hasClass( "ui-state-hover" ), "hovered after mouseenter" );
div.trigger( "mouseleave" );
ok( !div.hasClass( "ui-state-hover" ), "not hovered after mouseleave" );
div.trigger( "mouseenter" );
ok( div.hasClass( "ui-state-hover" ), "hovered after mouseenter" );
$( "#widget" ).testWidget( "disable" );
ok( !div.hasClass( "ui-state-hover" ), "not hovered while disabled" );
div.trigger( "mouseenter" );
ok( !div.hasClass( "ui-state-hover" ), "can't hover while disabled" );
$( "#widget" ).testWidget( "enable" );
ok( !div.hasClass( "ui-state-hover" ), "enabling doesn't reset hover" );
div.trigger( "mouseenter" );
ok( div.hasClass( "ui-state-hover" ), "hovered after mouseenter" );
$( "#widget" ).testWidget( "destroy" );
ok( !div.hasClass( "ui-state-hover" ), "not hovered after destroy" );
div.trigger( "mouseenter" );
ok( !div.hasClass( "ui-state-hover" ), "event handler removed on destroy" );
});
test( "._focusable()", function() {
$.widget( "ui.testWidget", {
_create: function() {
this._focusable( this.element.children() );
}
});
var div = $( "#widget" ).testWidget().children();
ok( !div.hasClass( "ui-state-focus" ), "not focused on init" );
div.trigger( "focusin" );
ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
div.trigger( "focusout" );
ok( !div.hasClass( "ui-state-focus" ), "not focused after blur" );
div.trigger( "focusin" );
ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
$( "#widget" ).testWidget( "disable" );
ok( !div.hasClass( "ui-state-focus" ), "not focused while disabled" );
div.trigger( "focusin" );
ok( !div.hasClass( "ui-state-focus" ), "can't focus while disabled" );
$( "#widget" ).testWidget( "enable" );
ok( !div.hasClass( "ui-state-focus" ), "enabling doesn't reset focus" );
div.trigger( "focusin" );
ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
$( "#widget" ).testWidget( "destroy" );
ok( !div.hasClass( "ui-state-focus" ), "not focused after destroy" );
div.trigger( "focusin" );
ok( !div.hasClass( "ui-state-focus" ), "event handler removed on destroy" );
});
test( "._trigger() - no event, no ui", function() {
expect( 7 );
var handlers = [];
$.widget( "ui.testWidget", {
_create: function() {}
});
$( "#widget" ).testWidget({
foo: function( event, ui ) {
deepEqual( event.type, "testwidgetfoo", "correct event type in callback" );
deepEqual( ui, {}, "empty ui hash passed" );
handlers.push( "callback" );
}
});
$( document ).add( "#widget-wrapper" ).add( "#widget" )
.bind( "testwidgetfoo", function( event, ui ) {
deepEqual( ui, {}, "empty ui hash passed" );
handlers.push( this );
});
deepEqual( $( "#widget" ).data( "ui-testWidget" )._trigger( "foo" ), true,
"_trigger returns true when event is not cancelled" );
deepEqual( handlers, [
$( "#widget" )[ 0 ],
$( "#widget-wrapper" )[ 0 ],
document,
"callback"
], "event bubbles and then invokes callback" );
$( document ).unbind( "testwidgetfoo" );
});
test( "._trigger() - cancelled event", function() {
expect( 3 );
$.widget( "ui.testWidget", {
_create: function() {}
});
$( "#widget" ).testWidget({
foo: function( event, ui ) {
ok( true, "callback invoked even if event is cancelled" );
}
})
.bind( "testwidgetfoo", function( event, ui ) {
ok( true, "event was triggered" );
return false;
});
deepEqual( $( "#widget" ).data( "ui-testWidget" )._trigger( "foo" ), false,
"_trigger returns false when event is cancelled" );
});
test( "._trigger() - cancelled callback", function() {
$.widget( "ui.testWidget", {
_create: function() {}
});
$( "#widget" ).testWidget({
foo: function( event, ui ) {
return false;
}
});
deepEqual( $( "#widget" ).data( "ui-testWidget" )._trigger( "foo" ), false,
"_trigger returns false when callback returns false" );
});
test( "._trigger() - provide event and ui", function() {
expect( 7 );
var originalEvent = $.Event( "originalTest" );
$.widget( "ui.testWidget", {
_create: function() {},
testEvent: function() {
var ui = {
foo: "bar",
baz: {
qux: 5,
quux: 20
}
};
this._trigger( "foo", originalEvent, ui );
deepEqual( ui, {
foo: "notbar",
baz: {
qux: 10,
quux: "jQuery"
}
}, "ui object modified" );
}
});
$( "#widget" ).bind( "testwidgetfoo", function( event, ui ) {
equal( event.originalEvent, originalEvent, "original event object passed" );
deepEqual( ui, {
foo: "bar",
baz: {
qux: 5,
quux: 20
}
}, "ui hash passed" );
ui.foo = "notbar";
});
$( "#widget-wrapper" ).bind( "testwidgetfoo", function( event, ui ) {
equal( event.originalEvent, originalEvent, "original event object passed" );
deepEqual( ui, {
foo: "notbar",
baz: {
qux: 5,
quux: 20
}
}, "modified ui hash passed" );
ui.baz.qux = 10;
});
$( "#widget" ).testWidget({
foo: function( event, ui ) {
equal( event.originalEvent, originalEvent, "original event object passed" );
deepEqual( ui, {
foo: "notbar",
baz: {
qux: 10,
quux: 20
}
}, "modified ui hash passed" );
ui.baz.quux = "jQuery";
}
})
.testWidget( "testEvent" );
});
test( "._trigger() - array as ui", function() {
// #6795 - Widget: handle array arguments to _trigger consistently
expect( 4 );
$.widget( "ui.testWidget", {
_create: function() {},
testEvent: function() {
var ui = {
foo: "bar",
baz: {
qux: 5,
quux: 20
}
},
extra = {
bar: 5
};
this._trigger( "foo", null, [ ui, extra ] );
}
});
$( "#widget" ).bind( "testwidgetfoo", function( event, ui, extra ) {
deepEqual( ui, {
foo: "bar",
baz: {
qux: 5,
quux: 20
}
}, "event: ui hash passed" );
deepEqual( extra, {
bar: 5
}, "event: extra argument passed" );
});
$( "#widget" ).testWidget({
foo: function( event, ui, extra ) {
deepEqual( ui, {
foo: "bar",
baz: {
qux: 5,
quux: 20
}
}, "callback: ui hash passed" );
deepEqual( extra, {
bar: 5
}, "callback: extra argument passed" );
}
})
.testWidget( "testEvent" );
});
test( "._trigger() - instance as element", function() {
expect( 4 );
$.widget( "ui.testWidget", {
defaultElement: null,
testEvent: function() {
this._trigger( "foo", null, { foo: "bar" } );
}
});
var instance = $.ui.testWidget({
foo: function( event, ui ) {
equal( event.type, "testwidgetfoo", "event object passed to callback" );
deepEqual( ui, { foo: "bar" }, "ui object passed to callback" );
}
});
$( instance ).bind( "testwidgetfoo", function( event, ui ) {
equal( event.type, "testwidgetfoo", "event object passed to event handler" );
deepEqual( ui, { foo: "bar" }, "ui object passed to event handler" );
});
instance.testEvent();
});
(function() {
function shouldDestroy( expected, callback ) {
expect( 1 );
var destroyed = false;
$.widget( "ui.testWidget", {
_create: function() {},
destroy: function() {
destroyed = true;
}
});
callback();
equal( destroyed, expected );
}
test( "auto-destroy - .remove()", function() {
shouldDestroy( true, function() {
$( "#widget" ).testWidget().remove();
});
});
test( "auto-destroy - .remove() on parent", function() {
shouldDestroy( true, function() {
$( "#widget" ).testWidget().parent().remove();
});
});
test( "auto-destroy - .remove() on child", function() {
shouldDestroy( false, function() {
$( "#widget" ).testWidget().children().remove();
});
});
test( "auto-destroy - .empty()", function() {
shouldDestroy( false, function() {
$( "#widget" ).testWidget().empty();
});
});
test( "auto-destroy - .empty() on parent", function() {
shouldDestroy( true, function() {
$( "#widget" ).testWidget().parent().empty();
});
});
test( "auto-destroy - .detach()", function() {
shouldDestroy( false, function() {
$( "#widget" ).testWidget().detach();
});
});
}());
test( "redefine", function() {
expect( 4 );
$.widget( "ui.testWidget", {
method: function( str ) {
strictEqual( this, instance, "original invoked with correct this" );
equal( str, "bar", "original invoked with correct parameter" );
}
});
$.ui.testWidget.foo = "bar";
$.widget( "ui.testWidget", $.ui.testWidget, {
method: function( str ) {
equal( str, "foo", "new invoked with correct parameter" );
this._super( "bar" );
}
});
var instance = new $.ui.testWidget({});
instance.method( "foo" );
equal( $.ui.testWidget.foo, "bar", "static properties remain" );
});
test( "redefine deep prototype chain", function() {
expect( 8 );
$.widget( "ui.testWidget", {
method: function( str ) {
strictEqual( this, instance, "original invoked with correct this" );
equal( str, "level 4", "original invoked with correct parameter" );
}
});
$.widget( "ui.testWidget2", $.ui.testWidget, {
method: function( str ) {
strictEqual( this, instance, "testWidget2 invoked with correct this" );
equal( str, "level 2", "testWidget2 invoked with correct parameter" );
this._super( "level 3" );
}
});
$.widget( "ui.testWidget3", $.ui.testWidget2, {
method: function( str ) {
strictEqual( this, instance, "testWidget3 invoked with correct this" );
equal( str, "level 1", "testWidget3 invoked with correct parameter" );
this._super( "level 2" );
}
});
// redefine testWidget after other widgets have inherited from it
// this tests whether the inheriting widgets get updated prototype chains
$.widget( "ui.testWidget", $.ui.testWidget, {
method: function( str ) {
strictEqual( this, instance, "new invoked with correct this" );
equal( str, "level 3", "new invoked with correct parameter" );
this._super( "level 4" );
}
});
// redefine testWidget3 after it has been automatically redefined
// this tests whether we properly handle _super() when the topmost prototype
// doesn't have the method defined
$.widget( "ui.testWidget3", $.ui.testWidget3, {} );
var instance = new $.ui.testWidget3({});
instance.method( "level 1" );
delete $.ui.testWidget3;
delete $.ui.testWidget2;
});
asyncTest( "_delay", function() {
expect( 6 );
var order = 0,
that;
$.widget( "ui.testWidget", {
defaultElement: null,
_create: function() {
that = this;
var timer = this._delay(function() {
strictEqual( this, that );
equal( order, 1 );
start();
}, 500);
ok( timer !== undefined );
timer = this._delay("callback");
ok( timer !== undefined );
},
callback: function() {
strictEqual( this, that );
equal( order, 0 );
order += 1;
}
});
$( "#widget" ).testWidget();
});
}( jQuery ) );