Dialog: Add classes option

Ref #7053
Ref gh-1411

7 files changed, 200 insertions, 24 deletions

diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html
index 55da8c8f5..5434e6bfc 100644
--- a/tests/unit/dialog/dialog.html
+++ b/tests/unit/dialog/dialog.html
@@ -5,10 +5,14 @@
 	<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>
 	<script src="../testsuite.js"></script>
+	<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
 	<script>
 	TestHelpers.loadResources({
 		css: [ "core", "dialog" ],
diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js
index 87f7f7d15..fc5105d74 100644
--- a/tests/unit/dialog/dialog_common.js
+++ b/tests/unit/dialog/dialog_common.js
@@ -3,11 +3,13 @@ TestHelpers.commonWidgetTests( "dialog", {
 		appendTo: "body",
 		autoOpen: true,
 		buttons: [],
-		classes: {},
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-titlebar": "ui-corner-all"
+		},
 		closeOnEscape: true,
 		closeText: "Close",
 		disabled: false,
-		dialogClass: "",
 		draggable: true,
 		height: "auto",
 		hide: null,
diff --git a/tests/unit/dialog/dialog_common_deprecated.js b/tests/unit/dialog/dialog_common_deprecated.js
new file mode 100644
index 000000000..9ecf6a459
--- /dev/null
+++ b/tests/unit/dialog/dialog_common_deprecated.js
@@ -0,0 +1,47 @@
+TestHelpers.commonWidgetTests( "dialog", {
+	defaults: {
+		appendTo: "body",
+		autoOpen: true,
+		buttons: [],
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-titlebar": "ui-corner-all"
+		},
+		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
+	}
+});
diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js
index 56f1e3da8..f600722fc 100644
--- a/tests/unit/dialog/dialog_core.js
+++ b/tests/unit/dialog/dialog_core.js
@@ -7,11 +7,60 @@
 // TODO add teardown callback to remove dialogs
 module("dialog: core");
 
+test( "markup structure", function( assert ) {
+	expect( 11 );
+
+	var element = $( "<div>" ).dialog({
+			buttons: [ {
+				text: "Ok",
+				click: $.noop
+			} ]
+		}),
+		widget = element.dialog( "widget" ),
+		titlebar = widget.find( ".ui-dialog-titlebar" ),
+		title = titlebar.find( ".ui-dialog-title" ),
+		close = titlebar.find( ".ui-dialog-titlebar-close" ),
+		buttonpane = widget.find( ".ui-dialog-buttonpane" ),
+		buttonset = widget.find( ".ui-dialog-buttonset" ),
+		buttons = buttonset.find( ".ui-button" );
+
+	assert.hasClasses( widget, "ui-dialog ui-dialog-buttons ui-widget ui-widget-content" );
+	assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
+	equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
+	assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
+	equal( close.length, 1, "Titlebar has exactly one close button" );
+	equal( title.length, 1, "Titlebar has exactly one title" );
+	assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
+	assert.hasClasses( buttonpane, "ui-dialog-buttonpane ui-widget-content" );
+	equal( buttonpane.length, 1, "Dialog has exactly one buttonpane" );
+	equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" );
+	equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" );
+
+});
+
+test( "markup structure - no buttons", function( assert ) {
+	expect( 7 );
+
+	var element = $( "<div>" ).dialog(),
+		widget = element.dialog( "widget" ),
+		titlebar = widget.find( ".ui-dialog-titlebar" ),
+		title = titlebar.find( ".ui-dialog-title" ),
+		close = titlebar.find( ".ui-dialog-titlebar-close" );
+
+	assert.hasClasses( widget, "ui-dialog ui-widget ui-widget-content" );
+	assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
+	equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
+	assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
+	equal( close.length, 1, "Titlebar has exactly one close button" );
+	equal( title.length, 1, "Titlebar has exactly one title" );
+	assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
+});
+
 test("title id", function() {
 	expect(1);
 
 	var titleId,
-		element = $("<div></div>").dialog();
+		element = $("<div>").dialog();
 
 	titleId = element.dialog("widget").find(".ui-dialog-title").attr("id");
 	ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id");
@@ -21,7 +70,7 @@ test("title id", function() {
 test( "ARIA", function() {
 	expect( 4 );
 
-	var element = $( "<div></div>" ).dialog(),
+	var element = $( "<div>" ).dialog(),
 		wrapper = element.dialog( "widget" );
 	equal( wrapper.attr( "role" ), "dialog", "dialog role" );
 	equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );
diff --git a/tests/unit/dialog/dialog_deprecated.html b/tests/unit/dialog/dialog_deprecated.html
new file mode 100644
index 000000000..b26c38e9a
--- /dev/null
+++ b/tests/unit/dialog/dialog_deprecated.html
@@ -0,0 +1,66 @@
+<!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 src="../../../external/qunit-assert-classes/qunit-assert-classes.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>
diff --git a/tests/unit/dialog/dialog_deprecated.js b/tests/unit/dialog/dialog_deprecated.js
new file mode 100644
index 000000000..6a26c229e
--- /dev/null
+++ b/tests/unit/dialog/dialog_deprecated.js
@@ -0,0 +1,28 @@
+(function( $ ) {
+
+module( "dialog (deprecated): options" );
+
+test( "dialogClass", function() {
+	expect( 6 );
+
+	var element = $( "<div>" ).dialog(),
+		widget = element.dialog( "widget" );
+	equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" );
+	element.remove();
+
+	element = $( "<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>" ).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 );
diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js
index 6bab426fb..d9920b9fc 100644
--- a/tests/unit/dialog/dialog_options.js
+++ b/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);