Permalink
Browse files

Dialog: Add classes option

Ref #7053
Ref gh-1411
  • Loading branch information...
1 parent cff1fb2 commit 6f4884f6f5b422bacbb20dbd82d90d351a985a4b @arschmitz arschmitz committed Dec 3, 2014
@@ -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" ],
@@ -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,
@@ -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
+ }
+});
@@ -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" ) );
@@ -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>
@@ -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 );
@@ -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);
Oops, something went wrong.

0 comments on commit 6f4884f

Please sign in to comment.