1
1
define ( [
2
+ "qunit" ,
2
3
"jquery" ,
3
4
"ui/widgets/dialog"
4
- ] , function ( $ ) {
5
+ ] , function ( QUnit , $ ) {
5
6
6
7
// TODO add teardown callback to remove dialogs
7
- module ( "dialog: core" ) ;
8
+ QUnit . module ( "dialog: core" ) ;
8
9
9
- test ( "markup structure" , function ( assert ) {
10
- expect ( 11 ) ;
10
+ QUnit . test ( "markup structure" , function ( assert ) {
11
+ assert . expect ( 11 ) ;
11
12
12
13
var element = $ ( "<div>" ) . dialog ( {
13
14
buttons : [ {
@@ -25,20 +26,20 @@ test( "markup structure", function( assert ) {
25
26
26
27
assert . hasClasses ( widget , "ui-dialog ui-dialog-buttons ui-widget ui-widget-content" ) ;
27
28
assert . hasClasses ( titlebar , "ui-dialog-titlebar ui-widget-header" ) ;
28
- equal ( titlebar . length , 1 , "Dialog has exactly one titlebar" ) ;
29
+ assert . equal ( titlebar . length , 1 , "Dialog has exactly one titlebar" ) ;
29
30
assert . hasClasses ( close , "ui-dialog-titlebar-close ui-widget" ) ;
30
- equal ( close . length , 1 , "Titlebar has exactly one close button" ) ;
31
- equal ( title . length , 1 , "Titlebar has exactly one title" ) ;
31
+ assert . equal ( close . length , 1 , "Titlebar has exactly one close button" ) ;
32
+ assert . equal ( title . length , 1 , "Titlebar has exactly one title" ) ;
32
33
assert . hasClasses ( element , "ui-dialog-content ui-widget-content" ) ;
33
34
assert . hasClasses ( buttonpane , "ui-dialog-buttonpane ui-widget-content" ) ;
34
- equal ( buttonpane . length , 1 , "Dialog has exactly one buttonpane" ) ;
35
- equal ( buttonset . length , 1 , "Buttonpane has exactly one buttonset" ) ;
36
- equal ( buttons . length , 1 , "Buttonset contains exactly 1 button when created with 1" ) ;
35
+ assert . equal ( buttonpane . length , 1 , "Dialog has exactly one buttonpane" ) ;
36
+ assert . equal ( buttonset . length , 1 , "Buttonpane has exactly one buttonset" ) ;
37
+ assert . equal ( buttons . length , 1 , "Buttonset contains exactly 1 button when created with 1" ) ;
37
38
38
39
} ) ;
39
40
40
- test ( "markup structure - no buttons" , function ( assert ) {
41
- expect ( 7 ) ;
41
+ QUnit . test ( "markup structure - no buttons" , function ( assert ) {
42
+ assert . expect ( 7 ) ;
42
43
43
44
var element = $ ( "<div>" ) . dialog ( ) ,
44
45
widget = element . dialog ( "widget" ) ,
@@ -48,48 +49,49 @@ test( "markup structure - no buttons", function( assert ) {
48
49
49
50
assert . hasClasses ( widget , "ui-dialog ui-widget ui-widget-content" ) ;
50
51
assert . hasClasses ( titlebar , "ui-dialog-titlebar ui-widget-header" ) ;
51
- equal ( titlebar . length , 1 , "Dialog has exactly one titlebar" ) ;
52
+ assert . equal ( titlebar . length , 1 , "Dialog has exactly one titlebar" ) ;
52
53
assert . hasClasses ( close , "ui-dialog-titlebar-close ui-widget" ) ;
53
- equal ( close . length , 1 , "Titlebar has exactly one close button" ) ;
54
- equal ( title . length , 1 , "Titlebar has exactly one title" ) ;
54
+ assert . equal ( close . length , 1 , "Titlebar has exactly one close button" ) ;
55
+ assert . equal ( title . length , 1 , "Titlebar has exactly one title" ) ;
55
56
assert . hasClasses ( element , "ui-dialog-content ui-widget-content" ) ;
56
57
} ) ;
57
58
58
- test ( "title id" , function ( ) {
59
- expect ( 1 ) ;
59
+ QUnit . test ( "title id" , function ( assert ) {
60
+ assert . expect ( 1 ) ;
60
61
61
62
var titleId ,
62
63
element = $ ( "<div>" ) . dialog ( ) ;
63
64
64
65
titleId = element . dialog ( "widget" ) . find ( ".ui-dialog-title" ) . attr ( "id" ) ;
65
- ok ( / u i - i d - \d + $ / . test ( titleId ) , "auto-numbered title id" ) ;
66
+ assert . ok ( / u i - i d - \d + $ / . test ( titleId ) , "auto-numbered title id" ) ;
66
67
element . remove ( ) ;
67
68
} ) ;
68
69
69
- test ( "ARIA" , function ( ) {
70
- expect ( 4 ) ;
70
+ QUnit . test ( "ARIA" , function ( assert ) {
71
+ assert . expect ( 4 ) ;
71
72
72
73
var element = $ ( "<div>" ) . dialog ( ) ,
73
74
wrapper = element . dialog ( "widget" ) ;
74
- equal ( wrapper . attr ( "role" ) , "dialog" , "dialog role" ) ;
75
- equal ( wrapper . attr ( "aria-labelledby" ) , wrapper . find ( ".ui-dialog-title" ) . attr ( "id" ) ) ;
76
- equal ( wrapper . attr ( "aria-describedby" ) , element . attr ( "id" ) , "aria-describedby added" ) ;
75
+ assert . equal ( wrapper . attr ( "role" ) , "dialog" , "dialog role" ) ;
76
+ assert . equal ( wrapper . attr ( "aria-labelledby" ) , wrapper . find ( ".ui-dialog-title" ) . attr ( "id" ) ) ;
77
+ assert . equal ( wrapper . attr ( "aria-describedby" ) , element . attr ( "id" ) , "aria-describedby added" ) ;
77
78
element . remove ( ) ;
78
79
79
80
element = $ ( "<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>" ) . dialog ( ) ;
80
- equal ( element . dialog ( "widget" ) . attr ( "aria-describedby" ) , null , "no aria-describedby added, as already present in markup" ) ;
81
+ assert . equal ( element . dialog ( "widget" ) . attr ( "aria-describedby" ) , null , "no aria-describedby added, as already present in markup" ) ;
81
82
element . remove ( ) ;
82
83
} ) ;
83
84
84
- test ( "widget method" , function ( ) {
85
- expect ( 1 ) ;
85
+ QUnit . test ( "widget method" , function ( assert ) {
86
+ assert . expect ( 1 ) ;
86
87
var dialog = $ ( "<div>" ) . appendTo ( "#qunit-fixture" ) . dialog ( ) ;
87
- deepEqual ( dialog . parent ( ) [ 0 ] , dialog . dialog ( "widget" ) [ 0 ] ) ;
88
+ assert . deepEqual ( dialog . parent ( ) [ 0 ] , dialog . dialog ( "widget" ) [ 0 ] ) ;
88
89
dialog . remove ( ) ;
89
90
} ) ;
90
91
91
- asyncTest ( "focus tabbable" , function ( ) {
92
- expect ( 8 ) ;
92
+ QUnit . test ( "focus tabbable" , function ( assert ) {
93
+ var ready = assert . async ( ) ;
94
+ assert . expect ( 8 ) ;
93
95
var element ,
94
96
options = {
95
97
buttons : [ {
@@ -119,7 +121,7 @@ asyncTest( "focus tabbable", function() {
119
121
var input = element . find ( "input:last" ) . trigger ( "focus" ) . trigger ( "blur" ) ;
120
122
element . dialog ( "instance" ) . _focusTabbable ( ) ;
121
123
setTimeout ( function ( ) {
122
- equal ( document . activeElement , input [ 0 ] ,
124
+ assert . equal ( document . activeElement , input [ 0 ] ,
123
125
"1. an element that was focused previously." ) ;
124
126
done ( ) ;
125
127
} ) ;
@@ -128,23 +130,23 @@ asyncTest( "focus tabbable", function() {
128
130
129
131
function step2 ( ) {
130
132
checkFocus ( "<div><input><input autofocus></div>" , options , function ( done ) {
131
- equal ( document . activeElement , element . find ( "input" ) [ 1 ] ,
133
+ assert . equal ( document . activeElement , element . find ( "input" ) [ 1 ] ,
132
134
"2. first element inside the dialog matching [autofocus]" ) ;
133
135
done ( ) ;
134
136
} , step3 ) ;
135
137
}
136
138
137
139
function step3 ( ) {
138
140
checkFocus ( "<div><input><input></div>" , options , function ( done ) {
139
- equal ( document . activeElement , element . find ( "input" ) [ 0 ] ,
141
+ assert . equal ( document . activeElement , element . find ( "input" ) [ 0 ] ,
140
142
"3. tabbable element inside the content element" ) ;
141
143
done ( ) ;
142
144
} , step4 ) ;
143
145
}
144
146
145
147
function step4 ( ) {
146
148
checkFocus ( "<div>text</div>" , options , function ( done ) {
147
- equal ( document . activeElement ,
149
+ assert . equal ( document . activeElement ,
148
150
element . dialog ( "widget" ) . find ( ".ui-dialog-buttonpane button" ) [ 0 ] ,
149
151
"4. tabbable element inside the buttonpane" ) ;
150
152
done ( ) ;
@@ -153,7 +155,7 @@ asyncTest( "focus tabbable", function() {
153
155
154
156
function step5 ( ) {
155
157
checkFocus ( "<div>text</div>" , { } , function ( done ) {
156
- equal ( document . activeElement ,
158
+ assert . equal ( document . activeElement ,
157
159
element . dialog ( "widget" ) . find ( ".ui-dialog-titlebar .ui-dialog-titlebar-close" ) [ 0 ] ,
158
160
"5. the close button" ) ;
159
161
done ( ) ;
@@ -165,7 +167,7 @@ asyncTest( "focus tabbable", function() {
165
167
element . dialog ( "widget" ) . find ( ".ui-dialog-titlebar-close" ) . hide ( ) ;
166
168
element . dialog ( "open" ) ;
167
169
setTimeout ( function ( ) {
168
- equal ( document . activeElement , element . parent ( ) [ 0 ] , "6. the dialog itself" ) ;
170
+ assert . equal ( document . activeElement , element . parent ( ) [ 0 ] , "6. the dialog itself" ) ;
169
171
done ( ) ;
170
172
} ) ;
171
173
} , step7 ) ;
@@ -184,36 +186,39 @@ asyncTest( "focus tabbable", function() {
184
186
}
185
187
} ,
186
188
function ( done ) {
187
- var inputs = element . find ( "input" ) ;
188
- equal ( document . activeElement , inputs [ 1 ] , "Focus starts on second input" ) ;
189
+ var inputs = element . find ( "input"
190
+ ) ;
191
+ assert . equal
192
+ ( document . activeElement , inputs [ 1 ] , "Focus starts on second input" ) ;
189
193
inputs . last ( ) . simulate ( "keydown" , { keyCode : $ . ui . keyCode . TAB } ) ;
190
194
setTimeout ( function ( ) {
191
- equal ( document . activeElement , inputs [ 0 ] ,
195
+ assert . equal ( document . activeElement , inputs [ 0 ] ,
192
196
"Honor preventDefault, allowing custom focus management" ) ;
193
197
done ( ) ;
194
198
} , 50 ) ;
195
199
} ,
196
- start
200
+ ready
197
201
) ;
198
202
}
199
203
200
204
step1 ( ) ;
201
205
} ) ;
202
206
203
- test ( "#7960: resizable handles below modal overlays" , function ( ) {
204
- expect ( 1 ) ;
207
+ QUnit . test ( "#7960: resizable handles below modal overlays" , function ( assert ) {
208
+ assert . expect ( 1 ) ;
205
209
206
210
var resizable = $ ( "<div>" ) . resizable ( ) ,
207
211
dialog = $ ( "<div>" ) . dialog ( { modal : true } ) ,
208
212
resizableZindex = parseInt ( resizable . find ( ".ui-resizable-handle" ) . css ( "zIndex" ) , 10 ) ,
209
213
overlayZindex = parseInt ( $ ( ".ui-widget-overlay" ) . css ( "zIndex" ) , 10 ) ;
210
214
211
- ok ( resizableZindex < overlayZindex , "Resizable handles have lower z-index than modal overlay" ) ;
215
+ assert . ok ( resizableZindex < overlayZindex , "Resizable handles have lower z-index than modal overlay" ) ;
212
216
dialog . dialog ( "destroy" ) ;
213
217
} ) ;
214
218
215
- asyncTest ( "Prevent tabbing out of dialogs" , function ( ) {
216
- expect ( 3 ) ;
219
+ QUnit . test ( "Prevent tabbing out of dialogs" , function ( assert ) {
220
+ var ready = assert . async ( ) ;
221
+ assert . expect ( 3 ) ;
217
222
218
223
var element = $ ( "<div><input name='0'><input name='1'></div>" ) . dialog ( ) ,
219
224
inputs = element . find ( "input" ) ;
@@ -222,51 +227,54 @@ asyncTest( "Prevent tabbing out of dialogs", function() {
222
227
element . dialog ( "widget" ) . find ( ".ui-button" ) . remove ( ) ;
223
228
224
229
function checkTab ( ) {
225
- equal ( document . activeElement , inputs [ 0 ] , "Tab key event moved focus within the modal" ) ;
230
+ assert . equal ( document . activeElement , inputs [ 0 ] , "Tab key event move d focus within the modal" ) ;
226
231
227
232
// Check shift tab
228
233
$ ( document . activeElement ) . simulate ( "keydown" , { keyCode : $ . ui . keyCode . TAB , shiftKey : true } ) ;
229
234
setTimeout ( checkShiftTab ) ;
230
235
}
231
236
232
237
function checkShiftTab ( ) {
233
- equal ( document . activeElement , inputs [ 1 ] , "Shift-Tab key event moved focus back to second input" ) ;
238
+ assert . equal ( document . activeElement , inputs [ 1 ] , "Shift-Tab key event moved focus back to second input" ) ;
234
239
235
240
element . remove ( ) ;
236
- setTimeout ( start ) ;
241
+ setTimeout ( ready ) ;
237
242
}
238
243
239
244
inputs [ 1 ] . focus ( ) ;
240
245
setTimeout ( function ( ) {
241
- equal ( document . activeElement , inputs [ 1 ] , "Focus set on second input" ) ;
246
+ assert . equal ( document . activeElement , inputs [ 1 ] , "Focus set on second input" ) ;
242
247
inputs . eq ( 1 ) . simulate ( "keydown" , { keyCode : $ . ui . keyCode . TAB } ) ;
243
248
244
249
setTimeout ( checkTab ) ;
245
250
} ) ;
246
251
} ) ;
247
252
248
- asyncTest ( "#9048: multiple modal dialogs opened and closed in different order" , function ( ) {
249
- expect ( 1 ) ;
253
+ QUnit . test ( "#9048: multiple modal dialogs opened and closed in different order" ,
254
+ function ( assert ) {
255
+ var ready = assert . async ( ) ;
256
+ assert . expect ( 1 ) ;
250
257
$ ( "#dialog1, #dialog2" ) . dialog ( { autoOpen : false , modal :true } ) ;
251
258
$ ( "#dialog1" ) . dialog ( "open" ) ;
252
259
$ ( "#dialog2" ) . dialog ( "open" ) ;
253
260
$ ( "#dialog1" ) . dialog ( "close" ) ;
254
261
setTimeout ( function ( ) {
255
262
$ ( "#dialog2" ) . dialog ( "close" ) ;
256
263
$ ( "#favorite-animal" ) . trigger ( "focus" ) ;
257
- ok ( true , "event handlers cleaned up (no errors thrown)" ) ;
258
- start ( ) ;
264
+ assert . ok ( true , "event handlers cleaned up (no errors thrown)" ) ;
265
+ ready ( ) ;
259
266
} ) ;
260
267
} ) ;
261
268
262
- asyncTest ( "interaction between overlay and other dialogs" , function ( ) {
269
+ QUnit . test ( "interaction between overlay and other dialogs" , function ( assert ) {
270
+ var ready = assert . async ( ) ;
263
271
$ . widget ( "ui.testWidget" , $ . ui . dialog , {
264
272
options : {
265
273
modal : true ,
266
274
autoOpen : false
267
275
}
268
276
} ) ;
269
- expect ( 2 ) ;
277
+ assert . expect ( 2 ) ;
270
278
var first = $ ( "<div><input id='input-1'></div>" ) . dialog ( {
271
279
modal : true
272
280
} ) ,
@@ -281,25 +289,28 @@ asyncTest( "interaction between overlay and other dialogs", function() {
281
289
282
290
// Wait for the modal to init
283
291
setTimeout ( function ( ) {
284
- second . testWidget ( "open" ) ;
285
292
286
- // Simulate user tabbing from address bar to an element outside the dialog
293
+ second .
294
+ testWidget
295
+ ( "open" ) ;
296
+
297
+ // Simulate user tabbing from address bar to an element outside the dialog
287
298
$ ( "#favorite-animal" ) . trigger ( "focus" ) ;
288
299
setTimeout ( function ( ) {
289
- equal ( document . activeElement , secondInput [ 0 ] ) ;
300
+ assert . equal ( document . activeElement , secondInput [ 0 ] ) ;
290
301
291
302
// Last active dialog must receive focus
292
303
firstInput . trigger ( "focus" ) ;
293
304
$ ( "#favorite-animal" ) . trigger ( "focus" ) ;
294
305
setTimeout ( function ( ) {
295
- equal ( document . activeElement , firstInput [ 0 ] ) ;
306
+ assert . equal ( document . activeElement , firstInput [ 0 ] ) ;
296
307
297
308
// Cleanup
298
309
first . remove ( ) ;
299
310
second . remove ( ) ;
300
311
delete $ . ui . testWidget ;
301
312
delete $ . fn . testWidget ;
302
- start ( ) ;
313
+ ready ( ) ;
303
314
} ) ;
304
315
} ) ;
305
316
} ) ;
0 commit comments