All: Example of _addClass _removeClass implementation

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, {

tests/unit/accordion/accordion_common.js

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

tests/unit/accordion/accordion_core.js

@@ -7,15 +7,23 @@ module( "accordion: core", setupTeardown() );
 
 $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
 	test( "markup structure: " + type, function() {
-		expect( 4 );
-		var element = $( selector ).accordion();
-		ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
-		equal( element.find( ".ui-accordion-header" ).length, 3,
+		expect( 8 );
+		var element = $( selector ).accordion(),
+			headers = element.find( ".ui-accordion-header" ),
+			panels = element.find( ".ui-accordion-content" );
+
+		ok( element.is( ".ui-accordion.ui-widget" ), "main has proper classes" );
+		ok( headers.hasClass( "ui-corner-top" ), "header is .ui-corner-top" );
+		ok( !headers.eq( 0 ).hasClass( "ui-corner-all" ), "open header is not .ui-corner-all" );
+		ok( headers.eq( 1 ).hasClass( "ui-corner-all" ), "closed header is .ui-corner-all" );
+		ok( headers.next().is( ".ui-accordion-content.ui-widget-content.ui-corner-bottom" ),
+			"panel has proper classes" );
+
+		equal( headers.length, 3,
 			".ui-accordion-header elements exist, correct number" );
-		equal( element.find( ".ui-accordion-content" ).length, 3,
+		equal( panels.length, 3,
 			".ui-accordion-content elements exist, correct number" );
-		deepEqual( element.find( ".ui-accordion-header" ).next().get(),
-			element.find( ".ui-accordion-content" ).get(),
+		deepEqual( headers.next().get(), panels.get(),
 			"content panels come immediately after headers" );
 	});
 });

tests/unit/accordion/accordion_methods.js

@@ -7,10 +7,17 @@ var equalHeight = TestHelpers.accordion.equalHeight,
 module( "accordion: methods", setupTeardown() );
 
 test( "destroy", function() {
-	expect( 1 );
+	expect( 2 );
 	domEqual( "#list1", function() {
 		$( "#list1" ).accordion().accordion( "destroy" );
 	});
+
+	// Animate
+	domEqual( "#list1", function() {
+		$( "#list1" ).accordion()
+			.accordion( "option", "active", 1 )
+			.accordion( "destroy" );
+	});
 });
 
 test( "enable/disable", function() {

tests/unit/autocomplete/autocomplete_common.js

@@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "autocomplete", {
 	defaults: {
 		appendTo: null,
 		autoFocus: false,
+		classes: {
+			"ui-autocomplete": "",
+			"ui-autocomplete-input": "",
+			"ui-autocomplete-loading": ""
+		},
 		delay: 300,
 		disabled: false,
 		messages: {

tests/unit/autocomplete/autocomplete_core.js

@@ -2,6 +2,15 @@
 
 module( "autocomplete: core" );
 
+test( "markup structure", function() {
+	expect( 2 );
+	var element = $( "#autocomplete" ).autocomplete(),
+		menu = element.autocomplete( "widget" );
+
+	ok( element.hasClass( "ui-autocomplete-input" ), "main element is .ui-autocomplete-input" );
+	ok( menu.hasClass( "ui-autocomplete" ), "menu is .ui-autocomplete" );
+});
+
 test( "prevent form submit on enter when menu is active", function() {
 	expect( 2 );
 	var event,

tests/unit/dialog/dialog.html

@@ -5,6 +5,9 @@
 	<title>jQuery UI Dialog Test Suite</title>
 
 	<script src="../../jquery.js"></script>
+	<script>
+		$.uiBackCompat = false;
+	</script>
 	<link rel="stylesheet" href="../../../external/qunit/qunit.css">
 	<script src="../../../external/qunit/qunit.js"></script>
 	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>

tests/unit/dialog/dialog_common.js

@@ -3,10 +3,22 @@ TestHelpers.commonWidgetTests( "dialog", {
 		appendTo: "body",
 		autoOpen: true,
 		buttons: [],
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-content": "",
+			"ui-dialog-titlebar": "ui-corner-all",
+			"ui-dialog-titlebar-close": "",
+			"ui-dialog-title": "",
+			"ui-dialog-buttons": "",
+			"ui-dialog-buttonpane": "",
+			"ui-dialog-buttonset": "",
+			"ui-dialog-dragging": "",
+			"ui-dialog-resizing": "",
+			"ui-widget-overlay": ""
+		},
 		closeOnEscape: true,
 		closeText: "Close",
 		disabled: false,
-		dialogClass: "",
 		draggable: true,
 		height: "auto",
 		hide: null,

tests/unit/dialog/dialog_common_deprecated.js

@@ -0,0 +1,56 @@
+TestHelpers.commonWidgetTests( "dialog", {
+	defaults: {
+		appendTo: "body",
+		autoOpen: true,
+		buttons: [],
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-content": "",
+			"ui-dialog-titlebar": "ui-corner-all",
+			"ui-dialog-titlebar-close": "",
+			"ui-dialog-title": "",
+			"ui-dialog-buttons": "",
+			"ui-dialog-buttonpane": "",
+			"ui-dialog-buttonset": "",
+			"ui-dialog-dragging": "",
+			"ui-dialog-resizing": "",
+			"ui-widget-overlay": ""
+		},
+		closeOnEscape: true,
+		closeText: "close",
+		dialogClass: "",
+		disabled: false,
+		draggable: true,
+		height: "auto",
+		hide: null,
+		maxHeight: null,
+		maxWidth: null,
+		minHeight: 150,
+		minWidth: 150,
+		modal: false,
+		position: {
+			my: "center",
+			at: "center",
+			of: window,
+			collision: "fit",
+			using: $.ui.dialog.prototype.options.position.using
+		},
+		resizable: true,
+		show: null,
+		title: null,
+		width: 300,
+
+		// callbacks
+		beforeClose: null,
+		close: null,
+		create: null,
+		drag: null,
+		dragStart: null,
+		dragStop: null,
+		focus: null,
+		open: null,
+		resize: null,
+		resizeStart: null,
+		resizeStop: null
+	}
+});

tests/unit/dialog/dialog_core.js

@@ -7,6 +7,37 @@
 // TODO add teardown callback to remove dialogs
 module("dialog: core");
 
+test( "markup structure", function() {
+	expect( 7 );
+	var element = $("<div></div>").dialog({
+			buttons: [{
+				text: "Ok",
+				click: $.noop
+			}]
+		}),
+		widget = element.dialog( "widget" ),
+		titlebar = widget.find( ".ui-dialog-titlebar" ),
+		close = titlebar.find( "button" ),
+		buttonpane = widget.find( ".ui-dialog-buttonpane" );
+
+	ok( widget.is( ".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-dialog-buttons" ),
+		"Widget has proper classes" );
+
+	ok( titlebar.is( ".ui-dialog-titlebar.ui-corner-all.ui-widget-header"),
+		"Titlebar has proper classes");
+
+	ok( titlebar.find( ".ui-dialog-title" ).length, "Title is .ui-dialog-title" );
+
+	ok( close.hasClass( "ui-dialog-titlebar-close" ), "Close button is .ui-dialog-titlebar-close" );
+
+	ok( element.is( ".ui-dialog-content.ui-widget-content" ), "Element is .ui-widget-content" );
+
+	ok( buttonpane.is( ".ui-dialog-buttonpane.ui-widget-content" ),
+		"Buttonpane is .ui-widget-content" );
+	ok( buttonpane.find( ".ui-dialog-buttonset" ).length, "buttonset is .ui-dialog-buttonset" );
+
+});
+
 test("title id", function() {
 	expect(1);
 

tests/unit/dialog/dialog_deprecated.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog Test Suite</title>
+
+	<script src="../../jquery.js"></script>
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css">
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
+	<script src="../testsuite.js"></script>
+	<script>
+	TestHelpers.loadResources({
+		css: [ "core", "dialog" ],
+		js: [
+			"ui/core.js",
+			"ui/widget.js",
+			"ui/position.js",
+			"ui/mouse.js",
+			"ui/draggable.js",
+			"ui/resizable.js",
+			"ui/button.js",
+			"ui/effect.js",
+			"ui/effect-blind.js",
+			"ui/effect-clip.js",
+			"ui/effect-explode.js",
+			"ui/dialog.js"
+		]
+	});
+	</script>
+
+	<script src="dialog_common_derecated.js"></script>
+	<script src="dialog_core.js"></script>
+	<script src="dialog_events.js"></script>
+	<script src="dialog_methods.js"></script>
+	<script src="dialog_options.js"></script>
+	<script src="dialog_deprecated.js"></script>
+	<script src="dialog_test_helpers.js"></script>
+
+	<script src="../swarminject.js"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+	<div id="dialog1"></div>
+	<div id="dialog2"></div>
+	<div id="form-dialog" title="Profile Information">
+		<!-- create a spacer to ensure there's enough space to scroll -->
+		<div style="height: 250px;">...</div>
+		<fieldset>
+			<legend>Please share some personal information</legend>
+			<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
+			<label for="favorite-color">Your favorite color</label><input id="favorite-color">
+		</fieldset>
+		<div role="group" aria-describedby="section2">
+			<p id="section2">Some more (optional) information</p>
+			<label for="favorite-food">Favorite food</label><input id="favorite-food">
+		</div>
+	</div>
+	<div class="wrap" id="wrap1"></div>
+	<div class="wrap" id="wrap2"></div>
+</div>
+</body>
+</html>

tests/unit/dialog/dialog_deprecated.js

@@ -0,0 +1,31 @@
+/*
+ * dialog_deprecated.js
+ */
+(function( $ ) {
+
+module( "dialog (deprecated): options" );
+
+test( "dialogClass", function() {
+	expect( 6 );
+
+	var element = $( "<div></div>" ).dialog(),
+		widget = element.dialog( "widget" );
+	equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" );
+	element.remove();
+
+	element = $( "<div></div>" ).dialog({ dialogClass: "foo" });
+	widget = element.dialog( "widget" );
+	equal( widget.is( ".foo" ), true, "dialogClass in init. foo class added");
+	element.dialog( "option", "dialogClass", "foobar" );
+	equal( widget.is( ".foo" ), false, "dialogClass changed, previous one was removed" );
+	equal( widget.is( ".foobar" ), true, "dialogClass changed, new one was added" );
+	element.remove();
+
+	element = $( "<div></div>" ).dialog({ dialogClass: "foo bar" });
+	widget = element.dialog( "widget" );
+	equal( widget.is( ".foo" ), true, "dialogClass in init, two classes. foo class added" );
+	equal( widget.is( ".bar" ), true, "dialogClass in init, two classes. bar class added" );
+	element.remove();
+});
+
+})( jQuery );

tests/unit/dialog/dialog_options.js

@@ -224,26 +224,6 @@ test("closeText", function() {
 	element.remove();
 });
 
-test("dialogClass", function() {
-	expect( 6 );
-
-	var element = $("<div></div>").dialog();
-		equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added");
-	element.remove();
-
-	element = $("<div></div>").dialog({ dialogClass: "foo" });
-		equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added");
-	element.dialog( "option", "dialogClass", "foobar" );
-		equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" );
-		equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" );
-	element.remove();
-
-	element = $("<div></div>").dialog({ dialogClass: "foo bar" });
-		equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added");
-		equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added");
-	element.remove();
-});
-
 test("draggable", function() {
 	expect(4);
 

tests/unit/menu/menu_common.js

@@ -1,5 +1,13 @@
 TestHelpers.commonWidgetTests( "menu", {
 	defaults: {
+		classes: {
+			"ui-menu": "",
+			"ui-menu-icons": "",
+			"ui-menu-icon": "",
+			"ui-menu-item": "",
+			"ui-menu-item-wrapper": "",
+			"ui-menu-divider": ""
+		},
 		disabled: false,
 		icons: {
 			submenu: "ui-icon-caret-1-e"

tests/unit/menu/menu_core.js

@@ -5,7 +5,7 @@ module( "menu: core" );
 test( "markup structure", function() {
 	expect( 6 );
 	var element = $( "#menu1" ).menu();
-	ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" );
+	ok( element.hasClass( "ui-menu" ), "main element has proper classes" );
 	element.children().each(function( index ) {
 		ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" );
 	});

tests/unit/progressbar/progressbar_common.js

@@ -1,5 +1,12 @@
 TestHelpers.commonWidgetTests( "progressbar", {
 	defaults: {
+		classes: {
+			"ui-progressbar": "ui-corner-all",
+			"ui-progressbar-value": "ui-corner-left",
+			"ui-progressbar-overlay": "",
+			"ui-progressbar-indeterminate": "",
+			"ui-progressbar-complete": "ui-corner-right"
+		},
 		disabled: false,
 		max: 100,
 		value: 0,