Skip to content

Commit 6f4884f

Browse files
arschmitzarschmitz
committed
Dialog: Add classes option
Ref #7053 Ref gh-1411
1 parent cff1fb2 commit 6f4884f

File tree

8 files changed

+255
-54
lines changed

8 files changed

+255
-54
lines changed

‎tests/unit/dialog/dialog.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,14 @@
55
<title>jQuery UI Dialog Test Suite</title>
66

77
<script src="../../jquery.js"></script>
8+
<script>
9+
$.uiBackCompat = false;
10+
</script>
811
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
912
<script src="../../../external/qunit/qunit.js"></script>
1013
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
1114
<script src="../testsuite.js"></script>
15+
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
1216
<script>
1317
TestHelpers.loadResources({
1418
css: [ "core", "dialog" ],

‎tests/unit/dialog/dialog_common.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ TestHelpers.commonWidgetTests( "dialog", {
33
appendTo: "body",
44
autoOpen: true,
55
buttons: [],
6-
classes: {},
6+
classes: {
7+
"ui-dialog": "ui-corner-all",
8+
"ui-dialog-titlebar": "ui-corner-all"
9+
},
710
closeOnEscape: true,
811
closeText: "Close",
912
disabled: false,
10-
dialogClass: "",
1113
draggable: true,
1214
height: "auto",
1315
hide: null,

‎tests/unit/dialog/dialog_common_deprecated.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
TestHelpers.commonWidgetTests( "dialog", {
2+
defaults: {
3+
appendTo: "body",
4+
autoOpen: true,
5+
buttons: [],
6+
classes: {
7+
"ui-dialog": "ui-corner-all",
8+
"ui-dialog-titlebar": "ui-corner-all"
9+
},
10+
closeOnEscape: true,
11+
closeText: "close",
12+
dialogClass: "",
13+
disabled: false,
14+
draggable: true,
15+
height: "auto",
16+
hide: null,
17+
maxHeight: null,
18+
maxWidth: null,
19+
minHeight: 150,
20+
minWidth: 150,
21+
modal: false,
22+
position: {
23+
my: "center",
24+
at: "center",
25+
of: window,
26+
collision: "fit",
27+
using: $.ui.dialog.prototype.options.position.using
28+
},
29+
resizable: true,
30+
show: null,
31+
title: null,
32+
width: 300,
33+
34+
// callbacks
35+
beforeClose: null,
36+
close: null,
37+
create: null,
38+
drag: null,
39+
dragStart: null,
40+
dragStop: null,
41+
focus: null,
42+
open: null,
43+
resize: null,
44+
resizeStart: null,
45+
resizeStop: null
46+
}
47+
});

‎tests/unit/dialog/dialog_core.js

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,60 @@
77
// TODO add teardown callback to remove dialogs
88
module("dialog: core");
99

10+
test( "markup structure", function( assert ) {
11+
expect( 11 );
12+
13+
var element = $( "<div>" ).dialog({
14+
buttons: [ {
15+
text: "Ok",
16+
click: $.noop
17+
} ]
18+
}),
19+
widget = element.dialog( "widget" ),
20+
titlebar = widget.find( ".ui-dialog-titlebar" ),
21+
title = titlebar.find( ".ui-dialog-title" ),
22+
close = titlebar.find( ".ui-dialog-titlebar-close" ),
23+
buttonpane = widget.find( ".ui-dialog-buttonpane" ),
24+
buttonset = widget.find( ".ui-dialog-buttonset" ),
25+
buttons = buttonset.find( ".ui-button" );
26+
27+
assert.hasClasses( widget, "ui-dialog ui-dialog-buttons ui-widget ui-widget-content" );
28+
assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
29+
equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
30+
assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
31+
equal( close.length, 1, "Titlebar has exactly one close button" );
32+
equal( title.length, 1, "Titlebar has exactly one title" );
33+
assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
34+
assert.hasClasses( buttonpane, "ui-dialog-buttonpane ui-widget-content" );
35+
equal( buttonpane.length, 1, "Dialog has exactly one buttonpane" );
36+
equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" );
37+
equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" );
38+
39+
});
40+
41+
test( "markup structure - no buttons", function( assert ) {
42+
expect( 7 );
43+
44+
var element = $( "<div>" ).dialog(),
45+
widget = element.dialog( "widget" ),
46+
titlebar = widget.find( ".ui-dialog-titlebar" ),
47+
title = titlebar.find( ".ui-dialog-title" ),
48+
close = titlebar.find( ".ui-dialog-titlebar-close" );
49+
50+
assert.hasClasses( widget, "ui-dialog ui-widget ui-widget-content" );
51+
assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
52+
equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
53+
assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
54+
equal( close.length, 1, "Titlebar has exactly one close button" );
55+
equal( title.length, 1, "Titlebar has exactly one title" );
56+
assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
57+
});
58+
1059
test("title id", function() {
1160
expect(1);
1261

1362
var titleId,
14-
element = $("<div></div>").dialog();
63+
element = $("<div>").dialog();
1564

1665
titleId = element.dialog("widget").find(".ui-dialog-title").attr("id");
1766
ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id");
@@ -21,7 +70,7 @@ test("title id", function() {
2170
test( "ARIA", function() {
2271
expect( 4 );
2372

24-
var element = $( "<div></div>" ).dialog(),
73+
var element = $( "<div>" ).dialog(),
2574
wrapper = element.dialog( "widget" );
2675
equal( wrapper.attr( "role" ), "dialog", "dialog role" );
2776
equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );

‎tests/unit/dialog/dialog_deprecated.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Dialog Test Suite</title>
6+
7+
<script src="../../jquery.js"></script>
8+
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
9+
<script src="../../../external/qunit/qunit.js"></script>
10+
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
11+
<script src="../testsuite.js"></script>
12+
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
13+
<script>
14+
TestHelpers.loadResources({
15+
css: [ "core", "dialog" ],
16+
js: [
17+
"ui/core.js",
18+
"ui/widget.js",
19+
"ui/position.js",
20+
"ui/mouse.js",
21+
"ui/draggable.js",
22+
"ui/resizable.js",
23+
"ui/button.js",
24+
"ui/effect.js",
25+
"ui/effect-blind.js",
26+
"ui/effect-clip.js",
27+
"ui/effect-explode.js",
28+
"ui/dialog.js"
29+
]
30+
});
31+
</script>
32+
33+
<script src="dialog_common_derecated.js"></script>
34+
<script src="dialog_core.js"></script>
35+
<script src="dialog_events.js"></script>
36+
<script src="dialog_methods.js"></script>
37+
<script src="dialog_options.js"></script>
38+
<script src="dialog_deprecated.js"></script>
39+
<script src="dialog_test_helpers.js"></script>
40+
41+
<script src="../swarminject.js"></script>
42+
</head>
43+
<body>
44+
45+
<div id="qunit"></div>
46+
<div id="qunit-fixture">
47+
<div id="dialog1"></div>
48+
<div id="dialog2"></div>
49+
<div id="form-dialog" title="Profile Information">
50+
<!-- create a spacer to ensure there's enough space to scroll -->
51+
<div style="height: 250px;">...</div>
52+
<fieldset>
53+
<legend>Please share some personal information</legend>
54+
<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
55+
<label for="favorite-color">Your favorite color</label><input id="favorite-color">
56+
</fieldset>
57+
<div role="group" aria-describedby="section2">
58+
<p id="section2">Some more (optional) information</p>
59+
<label for="favorite-food">Favorite food</label><input id="favorite-food">
60+
</div>
61+
</div>
62+
<div class="wrap" id="wrap1"></div>
63+
<div class="wrap" id="wrap2"></div>
64+
</div>
65+
</body>
66+
</html>

‎tests/unit/dialog/dialog_deprecated.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
(function( $ ) {
2+
3+
module( "dialog (deprecated): options" );
4+
5+
test( "dialogClass", function() {
6+
expect( 6 );
7+
8+
var element = $( "<div>" ).dialog(),
9+
widget = element.dialog( "widget" );
10+
equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" );
11+
element.remove();
12+
13+
element = $( "<div>" ).dialog({ dialogClass: "foo" });
14+
widget = element.dialog( "widget" );
15+
equal( widget.is( ".foo" ), true, "dialogClass in init, foo class added" );
16+
element.dialog( "option", "dialogClass", "foobar" );
17+
equal( widget.is( ".foo" ), false, "dialogClass changed, previous one was removed" );
18+
equal( widget.is( ".foobar" ), true, "dialogClass changed, new one was added" );
19+
element.remove();
20+
21+
element = $( "<div>" ).dialog({ dialogClass: "foo bar" });
22+
widget = element.dialog( "widget" );
23+
equal( widget.is( ".foo" ), true, "dialogClass in init, two classes. foo class added" );
24+
equal( widget.is( ".bar" ), true, "dialogClass in init, two classes. bar class added" );
25+
element.remove();
26+
});
27+
28+
})( jQuery );

‎tests/unit/dialog/dialog_options.js

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -224,26 +224,6 @@ test("closeText", function() {
224224
element.remove();
225225
});
226226

227-
test("dialogClass", function() {
228-
expect( 6 );
229-
230-
var element = $("<div></div>").dialog();
231-
equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added");
232-
element.remove();
233-
234-
element = $("<div></div>").dialog({ dialogClass: "foo" });
235-
equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added");
236-
element.dialog( "option", "dialogClass", "foobar" );
237-
equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" );
238-
equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" );
239-
element.remove();
240-
241-
element = $("<div></div>").dialog({ dialogClass: "foo bar" });
242-
equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added");
243-
equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added");
244-
element.remove();
245-
});
246-
247227
test("draggable", function() {
248228
expect(4);
249229

0 commit comments

Comments
 (0)