mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
180 lines
7.0 KiB
JavaScript
180 lines
7.0 KiB
JavaScript
define( [
|
|
"qunit",
|
|
"jquery",
|
|
"ui/widget"
|
|
], function( QUnit, $ ) {
|
|
|
|
QUnit.module( "widget factory classes", {
|
|
beforeEach: function() {
|
|
$.widget( "ui.classesWidget", {
|
|
options: {
|
|
classes: {
|
|
"ui-classes-widget": "ui-theme-widget",
|
|
"ui-classes-element": "ui-theme-element ui-theme-element-2"
|
|
}
|
|
},
|
|
_create: function() {
|
|
this.span = $( "<span>" )
|
|
.add( "<span>" )
|
|
.add( "<span>" )
|
|
.appendTo( this.element );
|
|
|
|
this.element.wrap( "<div>" );
|
|
|
|
this.wrapper = this.element.parent();
|
|
|
|
this._addClass( "ui-classes-element", "ui-core-element" )
|
|
._addClass( "ui-classes-element-2" )
|
|
._addClass( null, "ui-core-element-null" )
|
|
._addClass( this.span, null, "ui-core-span-null" )
|
|
._addClass( this.span, "ui-classes-span", "ui-core-span" )
|
|
._addClass( this.wrapper, "ui-classes-widget" );
|
|
|
|
},
|
|
toggleClasses: function( bool ) {
|
|
this._toggleClass( "ui-classes-element", "ui-core-element", bool )
|
|
._toggleClass( "ui-classes-element-2", null, bool )
|
|
._toggleClass( null, "ui-core-element-null", bool )
|
|
._toggleClass( this.span, null, "ui-core-span-null", bool )
|
|
._toggleClass( this.span, "ui-classes-span", "ui-core-span", bool )
|
|
._toggleClass( this.wrapper, "ui-classes-widget", null, bool );
|
|
},
|
|
removeClasses: function() {
|
|
this._removeClass( "ui-classes-element", "ui-core-element" )
|
|
._removeClass( "ui-classes-element-2" )
|
|
._removeClass( null, "ui-core-element-null" )
|
|
._removeClass( this.span, null, "ui-core-span-null" )
|
|
._removeClass( this.span, "ui-classes-span", "ui-core-span" )
|
|
._removeClass( this.wrapper, "ui-classes-widget" );
|
|
},
|
|
_destroy: function() {
|
|
this.span.remove();
|
|
this.element.unwrap();
|
|
}
|
|
} );
|
|
},
|
|
afterEach: function() {
|
|
delete $.ui.classesWidget;
|
|
delete $.fn.classesWidget;
|
|
}
|
|
} );
|
|
|
|
function elementHasClasses( widget, method, assert ) {
|
|
var toggle = method === "toggle" ? ( ", true" ) : "";
|
|
|
|
assert.hasClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2",
|
|
"_" + method + "Class works with ( keys, extra" + toggle + " )" );
|
|
assert.hasClasses( widget, "ui-classes-element-2",
|
|
"_" + method + "Class works with ( keys, null" + toggle + " )" );
|
|
assert.hasClasses( widget, "ui-core-element-null",
|
|
"_" + method + "Class works with ( null, extra" + toggle + " )" );
|
|
assert.hasClasses( widget.parent(), "ui-classes-widget ui-theme-widget",
|
|
"_" + method + "Class works with ( element, null, extra" + toggle + " )" );
|
|
assert.hasClasses( widget.find( "span" )[ 0 ], "ui-classes-span ui-core-span",
|
|
"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
|
|
assert.hasClasses( widget.find( "span" )[ 0 ], "ui-core-span-null",
|
|
"_" + method + "Class works with ( element, keys, null" + toggle + " )" );
|
|
}
|
|
function elementLacksClasses( widget, method, assert ) {
|
|
var toggle = method === "toggle" ? ( ", false" ) : "";
|
|
|
|
assert.lacksClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2",
|
|
"_" + method + "Class works with ( keys, extra" + toggle + " )" );
|
|
assert.lacksClasses( widget, "ui-classes-element-2",
|
|
"_" + method + "Class works with ( keys, null" + toggle + " )" );
|
|
assert.lacksClasses( widget, "ui-core-element-null",
|
|
"_" + method + "Class works with ( null, extra" + toggle + " )" );
|
|
assert.lacksClasses( widget.parent(), "ui-classes-widget ui-theme-widget",
|
|
"_" + method + "Class works with ( element, null, extra" + toggle + " )" );
|
|
assert.lacksClasses( widget.find( "span" )[ 0 ], "ui-classes-span ui-core-span",
|
|
"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
|
|
assert.lacksClasses( widget.find( "span" )[ 0 ], "ui-core-span-null",
|
|
"_" + method + "Class works with ( element, keys, null" + toggle + " )" );
|
|
}
|
|
|
|
QUnit.test( ".option() - classes setter", function( assert ) {
|
|
assert.expect( 11 );
|
|
|
|
var testWidget = $.ui.classesWidget();
|
|
|
|
elementHasClasses( testWidget.element, "add", assert );
|
|
|
|
testWidget.option( {
|
|
classes: {
|
|
"ui-classes-span": "custom-theme-span",
|
|
"ui-classes-widget": "ui-theme-widget custom-theme-widget",
|
|
"ui-classes-element": "ui-theme-element-2"
|
|
}
|
|
} );
|
|
|
|
assert.lacksClasses( testWidget.element, "ui-theme-element",
|
|
"Removing a class from the value removes the class" );
|
|
|
|
testWidget.option( "classes.ui-classes-element", "" );
|
|
assert.hasClasses( testWidget.element, "ui-classes-element",
|
|
"Setting to empty value leaves structure class" );
|
|
assert.lacksClasses( testWidget.element, "ui-theme-element-2",
|
|
"Setting empty value removes previous value classes" );
|
|
assert.hasClasses( testWidget.span[ 0 ], "ui-classes-span custom-theme-span",
|
|
"Adding a class to an empty value works as expected" );
|
|
assert.hasClasses( testWidget.wrapper, "ui-classes-widget custom-theme-widget",
|
|
"Appending a class to the current value works as expected" );
|
|
} );
|
|
|
|
QUnit.test( ".destroy() - class removal", function( assert ) {
|
|
assert.expect( 1 );
|
|
|
|
assert.domEqual( "#widget", function() {
|
|
$( "#widget" ).classesWidget().classesWidget( "destroy" );
|
|
} );
|
|
} );
|
|
|
|
QUnit.test( "._add/_remove/_toggleClass()", function( assert ) {
|
|
assert.expect( 24 );
|
|
|
|
var widget = $( "#widget" ).classesWidget();
|
|
|
|
elementHasClasses( widget, "add", assert );
|
|
|
|
widget.classesWidget( "toggleClasses", false );
|
|
elementLacksClasses( widget, "toggle", assert );
|
|
|
|
widget.classesWidget( "toggleClasses", true );
|
|
elementHasClasses( widget, "toggle", assert );
|
|
|
|
widget.classesWidget( "removeClasses" );
|
|
elementLacksClasses( widget, "remove", assert );
|
|
} );
|
|
|
|
QUnit.test( "Classes elements are untracked as they are removed from the DOM", function( assert ) {
|
|
assert.expect( 9 );
|
|
|
|
var widget = $( "#widget" ).classesWidget();
|
|
var instance = widget.classesWidget( "instance" );
|
|
|
|
assert.equal( instance.classesElementLookup[ "ui-classes-span" ].length, 3,
|
|
"Widget is tracking 3 ui-classes-span elements" );
|
|
assert.equal( instance.classesElementLookup[ "ui-core-span-null" ].length, 3,
|
|
"Widget is tracking 3 ui-core-span-null elements" );
|
|
assert.equal( instance.classesElementLookup[ "ui-core-span" ].length, 3,
|
|
"Widget is tracking 3 ui-core-span elements" );
|
|
|
|
widget.find( "span" ).eq( 0 ).remove();
|
|
assert.equal( instance.classesElementLookup[ "ui-classes-span" ].length, 2,
|
|
"After removing 1 span from dom 2 ui-classes-span elements are tracked" );
|
|
assert.equal( instance.classesElementLookup[ "ui-core-span-null" ].length, 2,
|
|
"After removing 1 span from dom 2 ui-core-span-null elements are tracked" );
|
|
assert.equal( instance.classesElementLookup[ "ui-core-span" ].length, 2,
|
|
"After removing 1 span from dom 2 ui-core-span elements are tracked" );
|
|
|
|
widget.find( "span" ).remove();
|
|
assert.equal( instance.classesElementLookup[ "ui-classes-span" ].length, 0,
|
|
"No ui-classes-span elements are tracked after removing all spans" );
|
|
assert.equal( instance.classesElementLookup[ "ui-core-span-null" ].length, 0,
|
|
"No ui-core-span-null elements are tracked after removing all spans" );
|
|
assert.equal( instance.classesElementLookup[ "ui-core-span" ].length, 0,
|
|
"No ui-core-span elements are tracked after removing all spans" );
|
|
} );
|
|
|
|
} );
|