jQuery UI Widget Test Suite

" ); - $.ui.testWidget.prototype._create = function() { - deepEqual( this.element[ 0 ], elem[ 0 ], "from jQuery object" ); - deepEqual( elem.data( "ui-testWidget" ), this, "instace stored in .data()" ); - }; - $.ui.testWidget( {}, elem ); - - elem = $( "

" ) - .appendTo( "#qunit-fixture" ); - $.ui.testWidget.prototype._create = function() { - deepEqual( this.element[ 0 ], elem[ 0 ], "from selector" ); - deepEqual( elem.data( "ui-testWidget" ), this, "instace stored in .data()" ); - }; - $.ui.testWidget( {}, "#element-normalization-selector" ); - - $.ui.testWidget.prototype.defaultElement = null; - $.ui.testWidget.prototype._create = function() { - // using strictEqual throws an error (Maximum call stack size exceeded) - ok( this.element[ 0 ] === this, "instance as element" ); - }; - $.ui.testWidget(); -}); - -test( "custom selector expression", function() { - expect( 1 ); - var elem = $( "

" ).appendTo( "#qunit-fixture" ); - $.widget( "ui.testWidget", {} ); - elem.testWidget(); - deepEqual( $( ":ui-testwidget" )[0], elem[0] ); - elem.testWidget( "destroy" ); -}); - -test( "jQuery usage", function() { - expect( 14 ); - - var elem, instance, ret, - shouldCreate = false; - - $.widget( "ui.testWidget", { - getterSetterVal: 5, - _create: function() { - ok( shouldCreate, "create called on instantiation" ); - }, - methodWithParams: function( param1, param2 ) { - ok( true, "method called via .pluginName(methodName)" ); - equal( param1, "value1", - "parameter passed via .pluginName(methodName, param)" ); - equal( param2, "value2", - "multiple parameters passed via .pluginName(methodName, param, param)" ); - - return this; - }, - getterSetterMethod: function( val ) { - if ( val ) { - this.getterSetterVal = val; - } else { - return this.getterSetterVal; - } - }, - jQueryObject: function() { - return $( "body" ); - } - }); - - shouldCreate = true; - elem = $( "

" ) - .bind( "testwidgetcreate", function() { - ok( shouldCreate, "create event triggered on instantiation" ); - }) - .testWidget(); - shouldCreate = false; - - instance = elem.data( "ui-testWidget" ); - equal( typeof instance, "object", "instance stored in .data(pluginName)" ); - equal( instance.element[0], elem[0], "element stored on widget" ); - ret = elem.testWidget( "methodWithParams", "value1", "value2" ); - equal( ret, elem, "jQuery object returned from method call" ); - - ret = elem.testWidget( "getterSetterMethod" ); - equal( ret, 5, "getter/setter can act as getter" ); - ret = elem.testWidget( "getterSetterMethod", 30 ); - equal( ret, elem, "getter/setter method can be chainable" ); - equal( instance.getterSetterVal, 30, "getter/setter can act as setter" ); - ret = elem.testWidget( "jQueryObject" ); - equal( ret[ 0 ], document.body, "returned jQuery object" ); - equal( ret.end(), elem, "stack preserved" ); - - elem.testWidget( "destroy" ); - equal( elem.data( "ui-testWidget" ), null ); -}); - -test( "direct usage", function() { - expect( 9 ); - - var elem, instance, ret, - shouldCreate = false; - - $.widget( "ui.testWidget", { - getterSetterVal: 5, - _create: function() { - ok( shouldCreate, "create called on instantiation" ); - }, - methodWithParams: function( param1, param2 ) { - ok( true, "method called dirctly" ); - equal( param1, "value1", "parameter passed via direct call" ); - equal( param2, "value2", "multiple parameters passed via direct call" ); - - return this; - }, - getterSetterMethod: function( val ) { - if ( val ) { - this.getterSetterVal = val; - } else { - return this.getterSetterVal; - } - } - }); - - elem = $( "

" )[ 0 ]; - - shouldCreate = true; - instance = new $.ui.testWidget( {}, elem ); - shouldCreate = false; - - equal( $( elem ).data( "ui-testWidget" ), instance, - "instance stored in .data(pluginName)" ); - equal( instance.element[ 0 ], elem, "element stored on widget" ); - - ret = instance.methodWithParams( "value1", "value2" ); - equal( ret, instance, "plugin returned from method call" ); - - ret = instance.getterSetterMethod(); - equal( ret, 5, "getter/setter can act as getter" ); - instance.getterSetterMethod( 30 ); - equal( instance.getterSetterVal, 30, "getter/setter can act as setter" ); -}); - -test( "error handling", function() { - expect( 3 ); - var error = $.error; - $.widget( "ui.testWidget", { - _privateMethod: function () {} - }); - $.error = function( msg ) { - equal( msg, "cannot call methods on testWidget prior to initialization; " + - "attempted to call method 'missing'", "method call before init" ); - }; - $( "

" ).testWidget( "missing" ); - $.error = function( msg ) { - equal( msg, "no such method 'missing' for testWidget widget instance", - "invalid method call on widget instance" ); - }; - $( "

" ).testWidget().testWidget( "missing" ); - $.error = function ( msg ) { - equal( msg, "no such method '_privateMethod' for testWidget widget instance", - "invalid method call on widget instance" ); - }; - $( "

" ).testWidget().testWidget( "_privateMethod" ); - $.error = error; -}); - -test( "merge multiple option arguments", function() { - expect( 1 ); - $.widget( "ui.testWidget", { - _create: function() { - deepEqual( this.options, { - create: null, - disabled: false, - option1: "value1", - option2: "value2", - option3: "value3", - option4: { - option4a: "valuea", - option4b: "valueb" - } - }); - } - }); - $( "

" ).testWidget({ - option1: "valuex", - option2: "valuex", - option3: "value3", - option4: { - option4a: "valuex" - } - }, { - option1: "value1", - option2: "value2", - option4: { - option4b: "valueb" - } - }, { - option4: { - option4a: "valuea" - } - }); -}); - -test( "._getCreateOptions()", function() { - expect( 1 ); - $.widget( "ui.testWidget", { - options: { - option1: "valuex", - option2: "valuex", - option3: "value3" - }, - _getCreateOptions: function() { - return { - option1: "override1", - option2: "overideX" - }; - }, - _create: function() { - deepEqual( this.options, { - create: null, - disabled: false, - option1: "override1", - option2: "value2", - option3: "value3" - }); - } - }); - $( "

" ).testWidget({ option2: "value2" }); -}); - -test( "._getCreateEventData()", function() { - expect( 1 ); - var data = { foo: "bar" }; - $.widget( "ui.testWidget", { - _getCreateEventData: function() { - return data; - } - }); - $( "

" ).testWidget({ - create: function( event, ui ) { - strictEqual( ui, data, "event data" ); - } - }); -}); - -test( "re-init", function() { - expect( 3 ); - var div = $( "

" ), - actions = []; - - $.widget( "ui.testWidget", { - _create: function() { - actions.push( "create" ); - }, - _init: function() { - actions.push( "init" ); - }, - _setOption: function( key ) { - actions.push( "option" + key ); - } - }); - - actions = []; - div.testWidget({ foo: "bar" }); - deepEqual( actions, [ "create", "init" ], "correct methods called on init" ); - - actions = []; - div.testWidget(); - deepEqual( actions, [ "init" ], "correct methods call on re-init" ); - - actions = []; - div.testWidget({ foo: "bar" }); - deepEqual( actions, [ "optionfoo", "init" ], "correct methods called on re-init with options" ); -}); - -test( "redeclare", function() { - expect( 2 ); - - $.widget( "ui.testWidget", {} ); - equal( $.ui.testWidget.prototype.widgetEventPrefix, "testWidget" ); - - $.widget( "ui.testWidget", {} ); - equal( $.ui.testWidget.prototype.widgetEventPrefix, "testWidget" ); -}); - -test( "inheritance", function() { - expect( 6 ); - // #5830 - Widget: Using inheritance overwrites the base classes options - $.widget( "ui.testWidgetBase", { - options: { - obj: { - key1: "foo", - key2: "bar" - }, - arr: [ "testing" ] - } - }); - - $.widget( "ui.testWidgetExtension", $.ui.testWidgetBase, { - options: { - obj: { - key1: "baz" - }, - arr: [ "alpha", "beta" ] - } - }); - - equal( $.ui.testWidgetBase.prototype.widgetEventPrefix, "testWidgetBase", - "base class event prefix" ); - deepEqual( $.ui.testWidgetBase.prototype.options.obj, { - key1: "foo", - key2: "bar" - }, "base class option object not overridden"); - deepEqual( $.ui.testWidgetBase.prototype.options.arr, [ "testing" ], - "base class option array not overridden"); - - equal( $.ui.testWidgetExtension.prototype.widgetEventPrefix, "testWidgetExtension", - "extension class event prefix" ); - deepEqual( $.ui.testWidgetExtension.prototype.options.obj, { - key1: "baz", - key2: "bar" - }, "extension class option object extends base"); - deepEqual( $.ui.testWidgetExtension.prototype.options.arr, [ "alpha", "beta" ], - "extension class option array overwrites base"); - - delete $.ui.testWidgetBase; - delete $.ui.testWidgetExtension; -}); - -test( "._super()", function() { - expect( 9 ); - var instance; - $.widget( "ui.testWidget", { - method: function( a, b ) { - deepEqual( this, instance, "this is correct in testWidget" ); - deepEqual( a, 5, "parameter passed to testWidget" ); - deepEqual( b, 20, "second parameter passed to testWidget" ); - return a + b; - } - }); - - $.widget( "ui.testWidget2", $.ui.testWidget, { - method: function( a, b ) { - deepEqual( this, instance, "this is correct in testWidget2" ); - deepEqual( a, 5, "parameter passed to testWidget2" ); - deepEqual( b, 10, "parameter passed to testWidget2" ); - return this._super( a, b*2 ); - } - }); - - $.widget( "ui.testWidget3", $.ui.testWidget2, { - method: function( a ) { - deepEqual( this, instance, "this is correct in testWidget3" ); - deepEqual( a, 5, "parameter passed to testWidget3" ); - var ret = this._super( a, a*2 ); - deepEqual( ret, 25, "super returned value" ); - } - }); - - instance = $( "

" ).testWidget3().data( "ui-testWidget3" ); - instance.method( 5 ); - delete $.ui.testWidget3; - delete $.ui.testWidget2; -}); - -test( "._superApply()", function() { - expect( 10 ); - var instance; - $.widget( "ui.testWidget", { - method: function( a, b ) { - deepEqual( this, instance, "this is correct in testWidget" ); - deepEqual( a, 5, "parameter passed to testWidget" ); - deepEqual( b, 10, "second parameter passed to testWidget" ); - return a + b; - } - }); - - $.widget( "ui.testWidget2", $.ui.testWidget, { - method: function( a, b ) { - deepEqual( this, instance, "this is correct in testWidget2" ); - deepEqual( a, 5, "parameter passed to testWidget2" ); - deepEqual( b, 10, "second parameter passed to testWidget2" ); - return this._superApply( arguments ); - } - }); - - $.widget( "ui.testWidget3", $.ui.testWidget2, { - method: function( a, b ) { - deepEqual( this, instance, "this is correct in testWidget3" ); - deepEqual( a, 5, "parameter passed to testWidget3" ); - deepEqual( b, 10, "second parameter passed to testWidget3" ); - var ret = this._superApply( arguments ); - deepEqual( ret, 15, "super returned value" ); - } - }); - - instance = $( "

" ).testWidget3().data( "ui-testWidget3" ); - instance.method( 5, 10 ); - delete $.ui.testWidget3; - delete $.ui.testWidget2; -}); - -test( ".option() - getter", function() { - expect( 6 ); - $.widget( "ui.testWidget", { - _create: function() {} - }); - - var options, - div = $( "

" ).testWidget({ - foo: "bar", - baz: 5, - qux: [ "quux", "quuux" ] - }); - - deepEqual( div.testWidget( "option", "x" ), null, "non-existent option" ); - deepEqual( div.testWidget( "option", "foo"), "bar", "single option - string" ); - deepEqual( div.testWidget( "option", "baz"), 5, "single option - number" ); - deepEqual( div.testWidget( "option", "qux"), [ "quux", "quuux" ], - "single option - array" ); - - options = div.testWidget( "option" ); - deepEqual( options, { - create: null, - disabled: false, - foo: "bar", - baz: 5, - qux: [ "quux", "quuux" ] - }, "full options hash returned" ); - options.foo = "notbar"; - deepEqual( div.testWidget( "option", "foo"), "bar", - "modifying returned options hash does not modify plugin instance" ); -}); - -test( ".option() - deep option getter", function() { - expect( 5 ); - $.widget( "ui.testWidget", {} ); - var div = $( "

" ).testWidget({ - foo: { - bar: "baz", - qux: { - quux: "xyzzy" - } - } - }); - equal( div.testWidget( "option", "foo.bar" ), "baz", "one level deep - string" ); - deepEqual( div.testWidget( "option", "foo.qux" ), { quux: "xyzzy" }, - "one level deep - object" ); - equal( div.testWidget( "option", "foo.qux.quux" ), "xyzzy", "two levels deep - string" ); - equal( div.testWidget( "option", "x.y" ), null, "top level non-existent" ); - equal( div.testWidget( "option", "foo.x.y" ), null, "one level deep - non-existent" ); -}); - -test( ".option() - delegate to ._setOptions()", function() { - expect( 2 ); - var div, - calls = []; - $.widget( "ui.testWidget", { - _create: function() {}, - _setOptions: function( options ) { - calls.push( options ); - } - }); - div = $( "

" ).testWidget(); - - calls = []; - div.testWidget( "option", "foo", "bar" ); - deepEqual( calls, [{ foo: "bar" }], "_setOptions called for single option" ); - - calls = []; - div.testWidget( "option", { - bar: "qux", - quux: "quuux" - }); - deepEqual( calls, [{ bar: "qux", quux: "quuux" }], - "_setOptions called with multiple options" ); -}); - -test( ".option() - delegate to ._setOption()", function() { - expect( 3 ); - var div, - calls = []; - $.widget( "ui.testWidget", { - _create: function() {}, - _setOption: function( key, val ) { - calls.push({ - key: key, - val: val - }); - } - }); - div = $( "

" ).testWidget(); - - calls = []; - div.testWidget( "option", "foo", "bar" ); - deepEqual( calls, [{ key: "foo", val: "bar" }], - "_setOption called for single option" ); - - calls = []; - div.testWidget( "option", "foo", undefined ); - deepEqual( calls, [{ key: "foo", val: undefined }], - "_setOption called for single option where value is undefined" ); - - calls = []; - div.testWidget( "option", { - bar: "qux", - quux: "quuux" - }); - deepEqual( calls, [ - { key: "bar", val: "qux" }, - { key: "quux", val: "quuux" } - ], "_setOption called with multiple options" ); -}); - -test( ".option() - deep option setter", function() { - expect( 9 ); - $.widget( "ui.testWidget", {} ); - var result, div = $( "

" ).testWidget(); - function deepOption( from, to, msg ) { - div.data( "ui-testWidget" ).options.foo = from; - $.ui.testWidget.prototype._setOption = function( key, value ) { - deepEqual( key, "foo", msg + ": key" ); - deepEqual( value, to, msg + ": value" ); - }; - } - - deepOption( { bar: "baz" }, { bar: "qux" }, "one deep" ); - div.testWidget( "option", "foo.bar", "qux" ); - - deepOption( { bar: "baz" }, { bar: undefined }, "one deep - value = undefined" ); - - result = div.testWidget( "option", "foo.bar", undefined ); - - deepEqual ( result, div, "option should return widget on successful set operation" ); - - deepOption( null, { bar: "baz" }, "null" ); - div.testWidget( "option", "foo.bar", "baz" ); - - deepOption( - { bar: "baz", qux: { quux: "quuux" } }, - { bar: "baz", qux: { quux: "quuux", newOpt: "newVal" } }, - "add property" ); - div.testWidget( "option", "foo.qux.newOpt", "newVal" ); -}); - -test( ".enable()", function() { - expect( 2 ); - $.widget( "ui.testWidget", { - _create: function() {}, - _setOption: function( key, val ) { - deepEqual( key, "disabled", "_setOption called with disabled option" ); - deepEqual( val, false, "disabled set to false" ); - } - }); - $( "

" ).testWidget().testWidget( "enable" ); -}); - -test( ".disable()", function() { - expect( 2 ); - $.widget( "ui.testWidget", { - _create: function() {}, - _setOption: function( key, val ) { - deepEqual( key, "disabled", "_setOption called with disabled option" ); - deepEqual( val, true, "disabled set to true" ); - } - }); - $( "

" ).testWidget().testWidget( "disable" ); -}); - -test( ".widget() - base", function() { - expect( 1 ); - $.widget( "ui.testWidget", { - _create: function() {} - }); - var div = $( "

" ).testWidget(); - deepEqual( div[0], div.testWidget( "widget" )[0]); -}); - -test( ".widget() - overriden", function() { - expect( 1 ); - var wrapper = $( "

" ); - $.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 element with suppressDisabledCheck", function() { - expect( 18 ); - var that, widget; - $.widget( "ui.testWidget", { - _create: function() { - that = this; - this._on( true, { - 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 = $( "

hello world

" ) - .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() with delegate to descendent", function() { - expect( 4 ); - $.widget( "ui.testWidget", { - _create: function() { - this.target = $( "

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( 1 ); - $.widget( "ui.testWidget", { - _create: function() { - this._on( this.document, { - "customevent": "_handler" - }); - }, - _handler: function() { - ok( true, "handler triggered" ); - } - }); - var widget = $( "#widget" ).testWidget().data( "ui-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( "ui-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( "ui-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( "ui-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() { - 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" ).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() { - ok( true, "callback invoked even if event is cancelled" ); - } - }) - .bind( "testwidgetfoo", function() { - 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() { - expect( 1 ); - $.widget( "ui.testWidget", { - _create: function() {} - }); - - $( "#widget" ).testWidget({ - foo: function() { - 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() 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() { - $( "

child

" ).appendTo( $( "#widget" ).testWidget() ) - .trigger( "remove" ); - }); - }); -}()); - -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; -}); - -test( "redefine - widgetEventPrefix", function() { - expect( 2 ); - - $.widget( "ui.testWidget", { - widgetEventPrefix: "test" - }); - equal( $.ui.testWidget.prototype.widgetEventPrefix, "test", - "cusotm prefix in original" ); - - $.widget( "ui.testWidget", $.ui.testWidget, {} ); - equal( $.ui.testWidget.prototype.widgetEventPrefix, "test", - "cusotm prefix in extension" ); - -}); - -test( "mixins", function() { - expect( 2 ); - - var mixin = { - method: function() { - return "mixed " + this._super(); - } - }; - - $.widget( "ui.testWidget1", { - method: function() { - return "testWidget1"; - } - }); - $.widget( "ui.testWidget2", { - method: function() { - return "testWidget2"; - } - }); - $.widget( "ui.testWidget1", $.ui.testWidget1, mixin ); - $.widget( "ui.testWidget2", $.ui.testWidget2, mixin ); - - equal( $( "

" ).testWidget1().testWidget1( "method" ), - "mixed testWidget1", "testWidget1 mixin successful" ); - equal( $( "

" ).testWidget2().testWidget2( "method" ), - "mixed testWidget2", "testWidget2 mixin successful" ); -}); - -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(); -}); - -test( "$.widget.bridge()", function() { - expect( 9 ); - - var instance, ret, - elem = $( "

" ); - - function TestWidget( options, element ) { - deepEqual( options, { foo: "bar" }, "options passed" ); - strictEqual( element, elem[ 0 ], "element passed" ); - } - - $.extend( TestWidget.prototype, { - method: function( param ) { - ok( true, "method called via .pluginName(methodName)" ); - equal( param, "value1", - "parameter passed via .pluginName(methodName, param)" ); - }, - getter: function() { - return "qux"; - } - }); - - $.widget.bridge( "testWidget", TestWidget ); - - ok( $.isFunction( $.fn.testWidget ), "jQuery plugin was created" ); - - strictEqual( elem.testWidget({ foo: "bar" }), elem, "plugin returns original jQuery object" ); - instance = elem.data( "testWidget" ); - equal( typeof instance, "object", "instance stored in .data(pluginName)" ); - - ret = elem.testWidget( "method", "value1" ); - equal( ret, elem, "jQuery object returned from method call" ); - - ret = elem.testWidget( "getter" ); - equal( ret, "qux", "getter returns value" ); -}); - -test( "$.widget.bridge() - widgetFullName", function() { - expect( 1 ); - - var instance, - elem = $( "

" ); - - function TestWidget() {} - TestWidget.prototype.widgetFullName = "custom-widget"; - $.widget.bridge( "testWidget", TestWidget ); - - elem.testWidget(); - instance = elem.data( "custom-widget" ); - equal( typeof instance, "object", "instance stored in .data(widgetFullName)" ); -}); - -}( jQuery ) ); diff --git a/apps/it/static/js/ui/tests/unit/widget/widget_extend.js b/apps/it/static/js/ui/tests/unit/widget/widget_extend.js deleted file mode 100644 index 14f9a46..0000000 --- a/apps/it/static/js/ui/tests/unit/widget/widget_extend.js +++ /dev/null @@ -1,105 +0,0 @@ -test( "$.widget.extend()", function() { - expect( 27 ); - - var ret, empty, optionsWithLength, optionsWithDate, myKlass, customObject, optionsWithCustomObject, nullUndef, - target, recursive, obj, input, output, - settings = { xnumber1: 5, xnumber2: 7, xstring1: "peter", xstring2: "pan" }, - options = { xnumber2: 1, xstring2: "x", xxx: "newstring" }, - optionsCopy = { xnumber2: 1, xstring2: "x", xxx: "newstring" }, - merged = { xnumber1: 5, xnumber2: 1, xstring1: "peter", xstring2: "x", xxx: "newstring" }, - deep1 = { foo: { bar: true } }, - deep2 = { foo: { baz: true }, foo2: document }, - deep2copy = { foo: { baz: true }, foo2: document }, - deepmerged = { foo: { bar: true, baz: true }, foo2: document }, - arr = [1, 2, 3], - nestedarray = { arr: arr }, - defaults = { xnumber1: 5, xnumber2: 7, xstring1: "peter", xstring2: "pan" }, - defaultsCopy = { xnumber1: 5, xnumber2: 7, xstring1: "peter", xstring2: "pan" }, - options1 = { xnumber2: 1, xstring2: "x" }, - options1Copy = { xnumber2: 1, xstring2: "x" }, - options2 = { xstring2: "xx", xxx: "newstringx" }, - options2Copy = { xstring2: "xx", xxx: "newstringx" }, - merged2 = { xnumber1: 5, xnumber2: 1, xstring1: "peter", xstring2: "xx", xxx: "newstringx" }; - - $.widget.extend( settings, options ); - deepEqual( settings, merged, "Check if extended: settings must be extended" ); - deepEqual( options, optionsCopy, "Check if not modified: options must not be modified" ); - - $.widget.extend( deep1, deep2 ); - deepEqual( deep1.foo, deepmerged.foo, "Check if foo: settings must be extended" ); - deepEqual( deep2.foo, deep2copy.foo, "Check if not deep2: options must not be modified" ); - equal( deep1.foo2, document, "Make sure that a deep clone was not attempted on the document" ); - - strictEqual( $.widget.extend({}, nestedarray).arr, arr, "Don't clone arrays" ); - ok( $.isPlainObject( $.widget.extend({ arr: arr }, { arr: {} }).arr ), "Cloned object heve to be an plain object" ); - - empty = {}; - optionsWithLength = { foo: { length: -1 } }; - $.widget.extend( empty, optionsWithLength ); - deepEqual( empty.foo, optionsWithLength.foo, "The length property must copy correctly" ); - - empty = {}; - optionsWithDate = { foo: { date: new Date() } }; - $.widget.extend( empty, optionsWithDate ); - deepEqual( empty.foo, optionsWithDate.foo, "Dates copy correctly" ); - - myKlass = function() {}; - customObject = new myKlass(); - optionsWithCustomObject = { foo: { date: customObject } }; - empty = {}; - $.widget.extend( empty, optionsWithCustomObject ); - strictEqual( empty.foo.date, customObject, "Custom objects copy correctly (no methods)" ); - - // Makes the class a little more realistic - myKlass.prototype = { someMethod: function(){} }; - empty = {}; - $.widget.extend( empty, optionsWithCustomObject ); - strictEqual( empty.foo.date, customObject, "Custom objects copy correctly" ); - - ret = $.widget.extend({ foo: 4 }, { foo: Number(5) } ); - equal( ret.foo, 5, "Wrapped numbers copy correctly" ); - - nullUndef = $.widget.extend( {}, options, { xnumber2: null } ); - strictEqual( nullUndef.xnumber2, null, "Check to make sure null values are copied"); - - nullUndef = $.widget.extend( {}, options, { xnumber2: undefined } ); - strictEqual( nullUndef.xnumber2, options.xnumber2, "Check to make sure undefined values are not copied"); - - nullUndef = $.widget.extend( {}, options, { xnumber0: null } ); - strictEqual( nullUndef.xnumber0, null, "Check to make sure null values are inserted"); - - target = {}; - recursive = { foo:target, bar:5 }; - $.widget.extend( target, recursive ); - deepEqual( target, { foo: {}, bar: 5 }, "Check to make sure a recursive obj doesn't go never-ending loop by not copying it over" ); - - ret = $.widget.extend( { foo: [] }, { foo: [0] } ); // 1907 - equal( ret.foo.length, 1, "Check to make sure a value with coersion 'false' copies over when necessary to fix #1907" ); - - ret = $.widget.extend( { foo: "1,2,3" }, { foo: [ 1, 2, 3 ] } ); - deepEqual( ret.foo, [ 1, 2, 3 ], "Properly extend a string to array." ); - - ret = $.widget.extend( { foo: "1,2,3" }, { foo: { to: "object" } } ); - deepEqual( ret.foo, { to: "object" }, "Properly extend a string to object." ); - - ret = $.widget.extend( { foo: "bar" }, { foo: null } ); - strictEqual( ret.foo, null, "Make sure a null value doesn't crash with deep extend, for #1908" ); - - obj = { foo: null }; - $.widget.extend( obj, { foo:"notnull" } ); - equal( obj.foo, "notnull", "Make sure a null value can be overwritten" ); - - settings = $.widget.extend( {}, defaults, options1, options2 ); - deepEqual( settings, merged2, "Check if extended: settings must be extended" ); - deepEqual( defaults, defaultsCopy, "Check if not modified: options1 must not be modified" ); - deepEqual( options1, options1Copy, "Check if not modified: options1 must not be modified" ); - deepEqual( options2, options2Copy, "Check if not modified: options2 must not be modified" ); - - input = { - key: [ 1, 2, 3 ] - }; - output = $.widget.extend( {}, input ); - deepEqual( input, output, "don't clone arrays" ); - input.key[0] = 10; - deepEqual( input, output, "don't clone arrays" ); -}); -- cgit v1.2.3