(function( $ ) { module( "widget factory", { teardown: function() { if ( $.ui ) { delete $.ui.testWidget; delete $.fn.testWidget; } } }); TestHelpers.testJshint( "widget" ); test( "widget creation", function() { expect( 5 ); var method, myPrototype = { _create: function() { equal( method, "_create", "create function is copied over" ); }, creationTest: function() { equal( method, "creationTest", "random function is copied over" ); } }; $.widget( "ui.testWidget", myPrototype ); ok( $.isFunction( $.ui.testWidget ), "constructor was created" ); equal( typeof $.ui.testWidget.prototype, "object", "prototype was created" ); method = "_create"; $.ui.testWidget.prototype._create(); method = "creationTest"; $.ui.testWidget.prototype.creationTest(); equal( $.ui.testWidget.prototype.option, $.Widget.prototype.option, "option method copied over from base widget" ); }); test( "element normalization", function() { expect( 11 ); var elem; $.widget( "ui.testWidget", {} ); $.ui.testWidget.prototype._create = function() { // workaround for core ticket #8381 this.element.appendTo( "#qunit-fixture" ); ok( this.element.is( "div" ), "generated div" ); deepEqual( this.element.testWidget( "instance" ), this, "instance stored in .data()" ); }; $.ui.testWidget(); $.ui.testWidget.prototype.defaultElement = ""; $.ui.testWidget.prototype._create = function() { ok( this.element.is( "span[data-test=pass]" ), "generated span with properties" ); deepEqual( this.element.testWidget( "instance" ), this, "instance stored in .data()" ); }; $.ui.testWidget(); elem = $( "" ); $.ui.testWidget.prototype._create = function() { deepEqual( this.element[ 0 ], elem[ 0 ], "from element" ); deepEqual( elem.testWidget( "instance" ), this, "instance stored in .data()" ); }; $.ui.testWidget( {}, elem[ 0 ] ); elem = $( "
hello world
hello world
" ); this.child = this.target.children(); this._on( this.target, { "keyup": "handlerDirect", "keyup strong": "handlerDelegated" }); this.child.trigger( "keyup" ); }, handlerDirect: function( event ) { deepEqual( event.currentTarget, this.target[ 0 ] ); deepEqual( event.target, this.child[ 0 ] ); }, handlerDelegated: function( event ) { deepEqual( event.currentTarget, this.child[ 0 ] ); deepEqual( event.target, this.child[ 0 ] ); } }); $.ui.testWidget(); }); test( "_on() to common element", function() { expect( 4 ); $.widget( "ui.testWidget", { _create: function() { this._on( this.document, { "customevent": "_handler", "with:colons": "_colonHandler", "with-dashes": "_dashHandler", "with-dashes:and-colons": "_commbinedHandler" }); }, _handler: function() { ok( true, "handler triggered" ); }, _colonHandler: function() { ok( true, "colon handler triggered" ); }, _dashHandler: function() { ok( true, "dash handler triggered" ); }, _commbinedHandler: function() { ok( true, "combined handler triggered" ); } }); var widget = $( "#widget" ).testWidget().testWidget( "instance" ); $( "#widget-wrapper" ).testWidget(); widget.destroy(); $( document ).trigger( "customevent" ); $( document ).trigger( "with:colons" ); $( document ).trigger( "with-dashes" ); $( document ).trigger( "with-dashes:and-colons" ); }); test( "_off() - single event", function() { expect( 3 ); $.widget( "ui.testWidget", {} ); var shouldTriggerWidget, shouldTriggerOther, element = $( "#widget" ), widget = element.testWidget().testWidget( "instance" ); 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().testWidget( "instance" ); 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().testWidget( "instance" ); 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() { expect( 10 ); $.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() { expect( 10 ); $.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" ).testWidget( "instance" )._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() { ok( true, "callback invoked even if event is cancelled" ); } }) .bind( "testwidgetfoo", function() { ok( true, "event was triggered" ); return false; }); deepEqual( $( "#widget" ).testWidget( "instance" )._trigger( "foo" ), false, "_trigger returns false when event is cancelled" ); }); test( "._trigger() - cancelled callback", function() { expect( 1 ); $.widget( "ui.testWidget", { _create: function() {} }); $( "#widget" ).testWidget({ foo: function() { return false; } }); deepEqual( $( "#widget" ).testWidget( "instance" )._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() when disabled", function() { shouldDestroy( true, function() { $( "#widget" ).testWidget({ disabled: true }).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( "destroy - remove event bubbling", function() { shouldDestroy( false, function() { $( "