Classes

Gruntfile.js

@@ -229,6 +229,9 @@ grunt.initConfig({
 				"qunit/qunit.css": "qunit/qunit/qunit.css",
 				"qunit/LICENSE.txt": "qunit/LICENSE.txt",
 
+				"qunit-assert-classes/qunit-assert-classes.js": "qunit-assert-classes/qunit-assert-classes.js",
+				"qunit-assert-classes/LICENSE.txt": "qunit-assert-classes/LICENSE",
+
 				"jquery-mousewheel/jquery.mousewheel.js": "jquery-mousewheel/jquery.mousewheel.js",
 				"jquery-mousewheel/LICENSE.txt": "jquery-mousewheel/LICENSE.txt",
 

bower.json

@@ -15,6 +15,7 @@
 		"jquery-simulate": "1.0.0",
 		"jshint": "2.4.4",
 		"qunit": "1.17.1",
+		"qunit-assert-classes": "0.1.5",
 
 		"jquery-1.7.0": "jquery#1.7.0",
 		"jquery-1.7.1": "jquery#1.7.1",

demos/autocomplete/combobox.html

@@ -58,7 +58,9 @@
 						source: $.proxy( this, "_source" )
 					})
 					.tooltip({
-						tooltipClass: "ui-state-highlight"
+						classes: {
+							"ui-tooltip": "ui-state-highlight"
+						}
 					});
 
 				this._on( this.input, {

demos/droppable/accepted-elements.html

@@ -20,8 +20,10 @@
 		$( "#draggable, #draggable-nonvalid" ).draggable();
 		$( "#droppable" ).droppable({
 			accept: "#draggable",
-			activeClass: "ui-state-hover",
-			hoverClass: "ui-state-active",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )

demos/droppable/photo-manager.html

@@ -47,7 +47,9 @@
 		// let the trash be droppable, accepting the gallery items
 		$trash.droppable({
 			accept: "#gallery > li",
-			activeClass: "ui-state-highlight",
+			classes: {
+				"ui-droppable-active": "ui-state-highlight"
+			},
 			drop: function( event, ui ) {
 				deleteImage( ui.draggable );
 			}
@@ -56,7 +58,9 @@
 		// let the gallery be droppable as well, accepting items from the trash
 		$gallery.droppable({
 			accept: "#trash li",
-			activeClass: "custom-state-active",
+			classes: {
+				"ui-droppable-active": "custom-state-active"
+			},
 			drop: function( event, ui ) {
 				recycleImage( ui.draggable );
 			}

demos/droppable/propagation.html

@@ -21,8 +21,10 @@
 		$( "#draggable" ).draggable();
 
 		$( "#droppable, #droppable-inner" ).droppable({
-			activeClass: "ui-state-hover",
-			hoverClass: "ui-state-active",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -34,8 +36,10 @@
 
 		$( "#droppable2, #droppable2-inner" ).droppable({
 			greedy: true,
-			activeClass: "ui-state-hover",
-			hoverClass: "ui-state-active",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )

demos/droppable/revert.html

@@ -21,8 +21,10 @@
 		$( "#draggable2" ).draggable({ revert: "invalid" });
 
 		$( "#droppable" ).droppable({
-			activeClass: "ui-state-default",
-			hoverClass: "ui-state-hover",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )

demos/droppable/visual-feedback.html

@@ -20,7 +20,9 @@
 	$(function() {
 		$( "#draggable" ).draggable();
 		$( "#droppable" ).droppable({
-			hoverClass: "ui-state-hover",
+			classes: {
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -32,7 +34,9 @@
 		$( "#draggable2" ).draggable();
 		$( "#droppable2" ).droppable({
 			accept: "#draggable2",
-			activeClass: "ui-state-default",
+			classes: {
+				"ui-droppable-active": "ui-state-default"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -66,7 +70,7 @@ <h3>Feedback on activating draggable:</h3>
 </div>
 
 <div class="demo-description">
-<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
+<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Set the values of the <code>ui-droppable-hover</code> or <code>ui-droppable-active</code> properties on the <code>classes</code> option to specify the respective classes.</p>
 </div>
 </body>
 </html>

external/qunit-assert-classes/LICENSE.txt

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Alexander Schmitz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

external/qunit-assert-classes/qunit-assert-classes.js

@@ -0,0 +1,47 @@
+( function( QUnit ) {
+	function inArray( haystack, needle ) {
+		for ( var i = 0; i < haystack.length; i++ ) {
+			if ( haystack[ i ] === needle ) {
+				return true;
+			}
+		}
+		return false;
+	}
+	function check( element, classes, stateVal, message ) {
+		var i, result, classAttribute, elementClassArray,
+			classArray = classes.split( " " ),
+			missing = [],
+			found = [];
+
+		if ( element.jquery && element.length !== 1 ) {
+			throw( "Class checks can only be performed on a single element on a collection" );
+		}
+		element = element.jquery ? element[ 0 ] : element;
+		classAttribute = element.getAttribute( "class" );
+		message = message || "Element must " + ( stateVal? "" : "not " ) + "have classes";
+		if ( classAttribute ) {
+			elementClassArray = classAttribute.split( " " );
+			for( i = 0; i < classArray.length; i++ ) {
+				if ( !inArray( elementClassArray, classArray[ i ] ) ) {
+					missing.push( classArray[ i ] );
+				} else {
+					found.push( classArray[ i ] );
+				}
+			}
+		} else {
+			missing = classArray;
+		}
+
+		result = stateVal ? !missing.length : !found.length;
+		QUnit.push( result, classes, result ? classes : found.join( " " ), message );
+	}
+
+	QUnit.extend( QUnit.assert, {
+		hasClasses: function( element, classes, message ) {
+			check( element, classes, true, message );
+		},
+		lacksClasses: function( element, classes, message ) {
+			check( element, classes, false, message );
+		}
+	});
+})( QUnit );

tests/unit/accordion/accordion.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", "accordion" ],

tests/unit/accordion/accordion_common.js

@@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "accordion", {
 	defaults: {
 		active: 0,
 		animate: {},
+		classes: {
+			"ui-accordion-header": "ui-corner-top",
+			"ui-accordion-header-collapsed": "ui-corner-all",
+			"ui-accordion-content": "ui-corner-bottom"
+		},
 		collapsible: false,
 		disabled: false,
 		event: "click",