Widget: Add classes option and _add/_remove/_toggleClass methods

Fixes #7053
Closes gh-1411

3 files changed, 149 insertions, 1 deletions

diff --git a/tests/unit/widget/widget.html b/tests/unit/widget/widget.html
index 2b764abab..ac106ea32 100644
--- a/tests/unit/widget/widget.html
+++ b/tests/unit/widget/widget.html
@@ -9,6 +9,7 @@
 	<script src="../../../external/qunit/qunit.js"></script>
 	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
 	<script src="../testsuite.js"></script>
+	<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
 	<script>
 	TestHelpers.loadResources({
 		css: [ "core" ],
@@ -21,6 +22,7 @@
 	<script src="widget_core.js"></script>
 	<script src="widget_extend.js"></script>
 	<script src="widget_animation.js"></script>
+	<script src="widget_classes.js"></script>
 
 	<script src="../swarminject.js"></script>
 </head>
diff --git a/tests/unit/widget/widget_classes.js b/tests/unit/widget/widget_classes.js
new file mode 100644
index 000000000..0202d2683
--- /dev/null
+++ b/tests/unit/widget/widget_classes.js
@@ -0,0 +1,143 @@
+(function( $ ) {
+
+module( "widget factory classes", {
+	setup: 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>" )
+					.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();
+			}
+		});
+	},
+	teardown: 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" ), "ui-classes-span ui-core-span",
+		"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
+	assert.hasClasses( widget.find( "span" ), "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" ), "ui-classes-span ui-core-span",
+		"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
+	assert.lacksClasses( widget.find( "span" ), "ui-core-span-null",
+		"_" + method + "Class works with ( element, keys, null" + toggle + " )" );
+}
+
+test( ".option() - classes setter", function( 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, "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" );
+});
+
+test( ".destroy() - class removal", function() {
+	expect( 1 );
+
+	domEqual( "#widget", function() {
+		$( "#widget" ).classesWidget().classesWidget( "destroy" );
+	});
+});
+
+test( "._add/_remove/_toggleClass()", function( 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 );
+});
+
+}( jQuery ) );
diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js
index 2b88e39ef..4e5b02349 100644
--- a/tests/unit/widget/widget_core.js
+++ b/tests/unit/widget/widget_core.js
@@ -227,6 +227,7 @@ test( "merge multiple option arguments", function() {
 	$.widget( "ui.testWidget", {
 		_create: function() {
 			deepEqual( this.options, {
+				classes: {},
 				create: null,
 				disabled: false,
 				option1: "value1",
@@ -281,6 +282,7 @@ test( "._getCreateOptions()", function() {
 		},
 		_create: function() {
 			deepEqual( this.options, {
+				classes: {},
 				create: null,
 				disabled: false,
 				option1: "override1",
@@ -485,10 +487,11 @@ test( ".option() - getter", function() {
 
 	options = div.testWidget( "option" );
 	deepEqual( options, {
+		baz: 5,
+		classes: {},
 		create: null,
 		disabled: false,
 		foo: "bar",
-		baz: 5,
 		qux: [ "quux", "quuux" ]
 	}, "full options hash returned" );
 	options.foo = "notbar";