Skip to content
Permalink
Browse files

Dialog: Add classes option

Ref #7053
Ref gh-1411
  • Loading branch information...
arschmitz committed Dec 3, 2014
1 parent cff1fb2 commit 6f4884f6f5b422bacbb20dbd82d90d351a985a4b
@@ -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.
You can’t perform that action at this time.