6
// Dialog Test Helper Functions
31
offsetBefore, offsetAfter,
32
heightBefore, heightAfter,
33
widthBefore, widthAfter,
37
return el.data("dialog").element.parents(".ui-dialog:first");
40
function isOpen(why) {
41
ok(dlg().is(":visible"), why);
44
function isNotOpen(why) {
45
ok(!dlg().is(":visible"), why);
48
function drag(handle, dx, dy) {
50
offsetBefore = d.offset();
51
heightBefore = d.height();
52
widthBefore = d.width();
53
//this mouseover is to work around a limitation in resizable
54
//TODO: fix resizable so handle doesn't require mouseover in order to be used
55
$(handle, d).simulate("mouseover");
56
$(handle, d).simulate("drag", {
60
dragged = { dx: dx, dy: dy };
61
offsetAfter = d.offset();
62
heightAfter = d.height();
63
widthAfter = d.width();
66
function moved(dx, dy, msg) {
67
msg = msg ? msg + "." : "";
68
var actual = { left: offsetAfter.left, top: offsetAfter.top };
69
var expected = { left: offsetBefore.left + dx, top: offsetBefore.top + dy };
70
compare2(actual, expected, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ' + msg);
73
function shouldmove(why) {
74
var handle = $(".ui-dialog-titlebar", dlg());
79
function shouldnotmove(why) {
80
var handle = $(".ui-dialog-titlebar", dlg());
85
function resized(dw, dh, msg) {
86
msg = msg ? msg + "." : "";
87
var actual = { width: widthAfter, height: heightAfter };
88
var expected = { width: widthBefore + dw, height: heightBefore + dh };
89
compare2(actual, expected, 'resized[' + dragged.dx + ', ' + dragged.dy + '] ' + msg);
92
function shouldresize(why) {
93
var handle = $(".ui-resizable-se", dlg());
98
function shouldnotresize(why) {
99
var handle = $(".ui-resizable-se", dlg());
100
drag(handle, 50, 50);
104
function broder(el, side){
105
return parseInt(el.css('border-' + side + '-width'), 10);
108
function margin(el, side) {
109
return parseInt(el.css('margin-' + side), 10);
115
test("init", function() {
118
$("#dialog1").dialog().remove();
119
ok(true, '.dialog() called on element');
121
$([]).dialog().remove();
122
ok(true, '.dialog() called on empty collection');
124
$('<div/>').dialog().remove();
125
ok(true, '.dialog() called on disconnected DOMElement');
127
$('<div/>').dialog().dialog("foo").remove();
128
ok(true, 'arbitrary method called after init');
130
el = $('<div/>').dialog();
131
var foo = el.data("foo.dialog");
133
ok(true, 'arbitrary option getter after init');
135
$('<div/>').dialog().data("foo.dialog", "bar").remove();
136
ok(true, 'arbitrary option setter after init');
139
test("destroy", function() {
142
$("#dialog1").dialog().dialog("destroy").remove();
143
ok(true, '.dialog("destroy") called on element');
145
$([]).dialog().dialog("destroy").remove();
146
ok(true, '.dialog("destroy") called on empty collection');
148
$('<div/>').dialog().dialog("destroy").remove();
149
ok(true, '.dialog("destroy") called on disconnected DOMElement');
151
$('<div/>').dialog().dialog("destroy").dialog("foo").remove();
152
ok(true, 'arbitrary method called after destroy');
154
el = $('<div/>').dialog();
155
var foo = el.dialog("destroy").data("foo.dialog");
157
ok(true, 'arbitrary option getter after destroy');
159
$('<div/>').dialog().dialog("destroy").data("foo.dialog", "bar").remove();
160
ok(true, 'arbitrary option setter after destroy');
164
//This one takes a while to run
166
test("element types", function() {
167
var typeNames = ('p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form'
168
+ ',table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr'
169
+ ',acronym,code,samp,kbd,var,img,object,hr'
170
+ ',input,button,label,select,iframe').split(',');
172
$.each(typeNames, function(i) {
173
var typeName = typeNames[i];
174
el = $(document.createElement(typeName)).appendTo('body');
175
(typeName == 'table' && el.append("<tr><td>content</td></tr>"));
177
ok(true, '$("<' + typeName + '/>").dialog()');
178
el.dialog("destroy");
185
test("defaults", function() {
186
el = $('<div/>').dialog();
187
$.each(defaults, function(key, val) {
188
var actual = el.data(key + ".dialog"), expected = val,
189
method = (expected && expected.constructor == Object) ?
191
method(actual, expected, key);
196
test("title id", function() {
201
// reset the uuid so we know what values to expect
202
$.ui.dialog.uuid = 0;
204
el = $('<div/>').dialog();
205
titleId = dlg().find('.ui-dialog-title').attr('id');
206
equals(titleId, 'ui-dialog-title-1', 'auto-numbered title id');
209
el = $('<div/>').dialog();
210
titleId = dlg().find('.ui-dialog-title').attr('id');
211
equals(titleId, 'ui-dialog-title-2', 'auto-numbered title id');
214
el = $('<div id="foo"/>').dialog();
215
titleId = dlg().find('.ui-dialog-title').attr('id');
216
equals(titleId, 'ui-dialog-title-foo', 'carried over title id');
220
module("dialog: Options");
222
test("autoOpen", function() {
225
el = $('<div/>').dialog({ autoOpen: false });
226
isNotOpen('.dialog({ autoOpen: false })');
229
el = $('<div/>').dialog({ autoOpen: true });
230
isOpen('.dialog({ autoOpen: true })');
234
test("autoResize", function() {
242
el = $('<div>content<br>content<br>content<br>content<br>content</div>').dialog({ autoResize: false });
243
expected = { height: el.height() };
244
handle = $(".ui-resizable-se", dlg());
245
drag(handle, 50, 50);
246
actual = { height: el.height() };
247
compare2(actual, expected, '.dialog({ autoResize: false })');
249
el = $('<div>content<br>content<br>content<br>content<br>content</div>').dialog({ autoResize: true });
250
before = { width: el.width(), height: el.height() };
251
handle = $(".ui-resizable-se", dlg());
252
drag(handle, 50, 50);
253
expected = { width: before.width + 50, height: before.height + 50 };
254
actual = { width: el.width(), height: el.height() };
255
compare2(actual, expected, '.dialog({ autoResize: true })');
259
test("buttons", function() {
263
"Ok": function(ev, ui) {
264
ok(true, "button click fires callback");
265
equals(this, el[0], "context of callback");
266
equals(ev.target, btn[0], "event target");
268
"Cancel": function(ev, ui) {
269
ok(true, "button click fires callback");
270
equals(this, el[0], "context of callback");
271
equals(ev.target, btn[1], "event target");
275
el = $('<div/>').dialog({ buttons: buttons });
276
var btn = $("button", dlg());
277
equals(btn.length, 2, "number of buttons");
280
$.each(buttons, function(key, val) {
281
equals(btn.eq(i).text(), key, "text of button " + (i+1));
285
equals(btn.parent().attr('className'), 'ui-dialog-buttonpane', "buttons in container");
286
btn.trigger("click");
289
"Close": function(ev, ui) {
290
ok(true, "button click fires callback");
291
equals(this, el[0], "context of callback");
292
equals(ev.target, btn[0], "event target");
296
equals(el.data("buttons.dialog"), buttons, '.data("buttons.dialog") getter');
297
el.data("buttons.dialog", newButtons);
298
equals(el.data("buttons.dialog"), newButtons, '.data("buttons.dialog", ...) setter');
300
btn = $("button", dlg());
301
equals(btn.length, 1, "number of buttons after setter");
302
btn.trigger('click');
305
$.each(newButtons, function(key, val) {
306
equals(btn.eq(i).text(), key, "text of button " + (i+1));
313
test("dialogClass", function() {
316
el = $('<div/>').dialog();
317
equals(dlg().is(".foo"), false, 'dialogClass not specified. foo class added');
320
el = $('<div/>').dialog({ dialogClass: "foo" });
321
equals(dlg().is(".foo"), true, 'dialogClass in init. foo class added');
324
el = $('<div/>').dialog({ dialogClass: "foo bar" });
325
equals(dlg().is(".foo"), true, 'dialogClass in init, two classes. foo class added');
326
equals(dlg().is(".bar"), true, 'dialogClass in init, two classes. bar class added');
330
test("draggable", function() {
333
el = $('<div/>').dialog({ draggable: false });
335
el.data('draggable.dialog', true);
339
el = $('<div/>').dialog({ draggable: true });
341
el.data('draggable.dialog', false);
346
test("height", function() {
349
el = $('<div/>').dialog();
350
equals(dlg().height(), defaults.height, "default height");
353
el = $('<div/>').dialog({ height: 437 });
354
equals(dlg().height(), 437, "explicit height");
357
el = $('<div/>').dialog();
358
el.data('height.dialog', 438);
359
equals(dlg().height(), 438, "explicit height set after init");
363
test("maxHeight", function() {
366
el = $('<div/>').dialog({ maxHeight: 400 });
367
drag('.ui-resizable-s', 1000, 1000);
368
equals(heightAfter, 400, "maxHeight");
371
el = $('<div/>').dialog({ maxHeight: 400 });
372
drag('.ui-resizable-n', -1000, -1000);
373
equals(heightAfter, 400, "maxHeight");
376
el = $('<div/>').dialog({ maxHeight: 400 }).data('maxHeight.dialog', 600);
377
drag('.ui-resizable-n', -1000, -1000);
378
equals(heightAfter, 600, "maxHeight");
382
test("maxWidth", function() {
385
el = $('<div/>').dialog({ maxWidth: 400 });
386
drag('.ui-resizable-e', 1000, 1000);
387
equals(widthAfter, 400, "maxWidth");
390
el = $('<div/>').dialog({ maxWidth: 400 });
391
drag('.ui-resizable-w', -1000, -1000);
392
equals(widthAfter, 400, "maxWidth");
395
el = $('<div/>').dialog({ maxWidth: 400 }).data('maxWidth.dialog', 600);
396
drag('.ui-resizable-w', -1000, -1000);
397
equals(widthAfter, 600, "maxWidth");
401
test("minHeight", function() {
404
el = $('<div/>').dialog({ minHeight: 10 });
405
drag('.ui-resizable-s', -1000, -1000);
406
equals(heightAfter, 10, "minHeight");
409
el = $('<div/>').dialog({ minHeight: 10 });
410
drag('.ui-resizable-n', 1000, 1000);
411
equals(heightAfter, 10, "minHeight");
414
el = $('<div/>').dialog({ minHeight: 10 }).data('minHeight.dialog', 30);
415
drag('.ui-resizable-n', 1000, 1000);
416
equals(heightAfter, 30, "minHeight");
420
test("minWidth", function() {
423
el = $('<div/>').dialog({ minWidth: 10 });
424
drag('.ui-resizable-e', -1000, -1000);
425
equals(widthAfter, 10, "minWidth");
428
el = $('<div/>').dialog({ minWidth: 10 });
429
drag('.ui-resizable-w', 1000, 1000);
430
equals(widthAfter, 10, "minWidth");
433
el = $('<div/>').dialog({ minWidth: 30 }).data('minWidth.dialog', 30);
434
drag('.ui-resizable-w', 1000, 1000);
435
equals(widthAfter, 30, "minWidth");
439
test("modal", function() {
440
ok(false, "missing test");
443
test("overlay", function() {
444
ok(false, "missing test");
447
test("position", function() {
448
ok(false, "missing test");
451
test("resizable", function() {
454
el = $('<div/>').dialog();
455
shouldresize("[default]");
456
el.data('resizable.dialog', false);
457
shouldnotresize('disabled after init');
460
el = $('<div/>').dialog({ resizable: false });
461
shouldnotresize("disabled in init options");
462
el.data('resizable.dialog', true);
463
shouldresize('enabled after init');
467
test("stack", function() {
468
ok(false, "missing test");
471
test("title", function() {
474
function titleText() {
475
return dlg().find(".ui-dialog-title").html();
478
el = $('<div/>').dialog();
479
equals(titleText(), " ", "[default]");
482
el = $('<div title="foo"/>').dialog();
483
equals(titleText(), "foo", "title in element attribute");
486
el = $('<div/>').dialog({ title: 'foo' });
487
equals(titleText(), "foo", "title in init options");
490
el = $('<div title="foo"/>').dialog({ title: 'bar' });
491
equals(titleText(), "bar", "title in init options should override title in element attribute");
494
el = $('<div/>').dialog().data('title.dialog', 'foo');
495
equals(titleText(), 'foo', 'title after init');
499
test("width", function() {
502
el = $('<div/>').dialog();
503
equals(dlg().width(), defaults.width, "default width");
506
el = $('<div/>').dialog({width: 437 });
507
equals(dlg().width(), 437, "explicit width");
508
el.data('width.dialog', 438);
509
equals(dlg().width(), 438, 'explicit width after init');
513
module("dialog: Methods");
515
test("isOpen", function() {
518
el = $('<div/>').dialog();
519
equals(el.dialog('isOpen'), true, "dialog is open after init");
521
equals(el.dialog('isOpen'), false, "dialog is closed");
524
el = $('<div/>').dialog({autoOpen: false});
525
equals(el.dialog('isOpen'), false, "dialog is closed after init");
527
equals(el.dialog('isOpen'), true, "dialog is open");
531
module("dialog: Callbacks");
533
test("open", function() {
537
open: function(ev, ui) {
538
ok(true, 'autoOpen: true fires open callback');
539
equals(this, el[0], "context of callback");
546
open: function(ev, ui) {
547
ok(true, '.dialog("open") fires open callback');
548
equals(this, el[0], "context of callback");
555
test("dragStart", function() {
559
dragStart: function(ev, ui) {
560
equals(this, el[0], "context of callback");
563
var handle = $(".ui-dialog-titlebar", dlg());
564
drag(handle, 50, 50);
568
test("drag", function() {
572
drag: function(ev, ui) {
574
equals(this, el[0], "context of callback");
577
var handle = $(".ui-dialog-titlebar", dlg());
578
drag(handle, 50, 50);
579
ok(fired, "resize fired");
583
test("dragStop", function() {
587
dragStop: function(ev, ui) {
588
equals(this, el[0], "context of callback");
591
var handle = $(".ui-dialog-titlebar", dlg());
592
drag(handle, 50, 50);
596
test("resizeStart", function() {
600
resizeStart: function(ev, ui) {
601
equals(this, el[0], "context of callback");
604
var handle = $(".ui-resizable-se", dlg());
605
drag(handle, 50, 50);
609
test("resize", function() {
613
resize: function(ev, ui) {
615
equals(this, el[0], "context of callback");
618
var handle = $(".ui-resizable-se", dlg());
619
drag(handle, 50, 50);
620
ok(fired, "resize fired");
624
test("resizeStop", function() {
628
resizeStop: function(ev, ui) {
629
equals(this, el[0], "context of callback");
632
var handle = $(".ui-resizable-se", dlg());
633
drag(handle, 50, 50);
637
test("close", function() {
639
el = $('<div/>').dialog({
640
close: function(ev, ui) {
641
ok(true, '.dialog("close") fires close callback');
642
equals(this, el[0], "context of callback");
649
test("beforeclose", function() {
652
el = $('<div/>').dialog({
653
beforeclose: function(ev, ui) {
654
ok(true, '.dialog("close") fires beforeclose callback');
655
equals(this, el[0], "context of callback");
660
isOpen('beforeclose callback should prevent dialog from closing');
663
el = $('<div/>').dialog().bind('dialogbeforeclose', function(ev, ui) {
664
ok(true, '.dialog("close") triggers dialogbeforeclose event');
665
equals(this, el[0], "context of event");
669
isOpen('dialogbeforeclose event should prevent dialog from closing');
673
module("dialog: Tickets");