third-party/jquery-ui-1.10.2/tests/unit/dialog/dialog_core.js

   1 /*
   2  * dialog_core.js
   3  */
   4
   5 (function($) {
   6
   7 module("dialog: core");
   8
   9 test("title id", function() {
  10         expect(1);
  11
  12         var titleId,
  13                 element = $("<div></div>").dialog();
  14
  15         titleId = element.dialog("widget").find(".ui-dialog-title").attr("id");
  16         ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id");
  17         element.remove();
  18 });
  19
  20 test( "ARIA", function() {
  21         expect( 4 );
  22
  23         var element = $( "<div></div>" ).dialog(),
  24                 wrapper = element.dialog( "widget" );
  25         equal( wrapper.attr( "role" ), "dialog", "dialog role" );
  26         equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );
  27         equal( wrapper.attr( "aria-describedby" ), element.attr( "id" ), "aria-describedby added" );
  28         element.remove();
  29
  30         element = $("<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>").dialog();
  31         strictEqual( element.dialog( "widget" ).attr( "aria-describedby" ), undefined, "no aria-describedby added, as already present in markup" );
  32         element.remove();
  33 });
  34
  35 test("widget method", function() {
  36         expect( 1 );
  37         var dialog = $("<div>").appendTo("#qunit-fixture").dialog();
  38         deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]);
  39         dialog.remove();
  40 });
  41
  42 asyncTest( "focus tabbable", function() {
  43         expect( 5 );
  44         var element,
  45                 options = {
  46                         buttons: [{
  47                                 text: "Ok",
  48                                 click: $.noop
  49                         }]
  50                 };
  51
  52         function checkFocus( markup, options, testFn, next ) {
  53                 element = $( markup ).dialog( options );
  54                 setTimeout(function() {
  55                         testFn();
  56                         element.remove();
  57                         setTimeout( next );
  58                 });
  59         }
  60
  61         function step1() {
  62                 checkFocus( "<div><input><input autofocus></div>", options, function() {
  63                         equal( document.activeElement, element.find( "input" )[ 1 ],
  64                                 "1. first element inside the dialog matching [autofocus]" );
  65                 }, step2 );
  66         }
  67
  68         function step2() {
  69                 checkFocus( "<div><input><input></div>", options, function() {
  70                         equal( document.activeElement, element.find( "input" )[ 0 ],
  71                                 "2. tabbable element inside the content element" );
  72                 }, step3 );
  73         }
  74
  75         function step3() {
  76                 checkFocus( "<div>text</div>", options, function() {
  77                         equal( document.activeElement,
  78                                 element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ],
  79                                 "3. tabbable element inside the buttonpane" );
  80                 }, step4 );
  81         }
  82
  83         function step4() {
  84                 checkFocus( "<div>text</div>", {}, function() {
  85                         equal( document.activeElement,
  86                                 element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ],
  87                                 "4. the close button" );
  88                 }, step5 );
  89         }
  90
  91         function step5() {
  92                 element = $( "<div>text</div>" ).dialog({
  93                         autoOpen: false
  94                 });
  95                 element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
  96                 element.dialog( "open" );
  97                 setTimeout(function() {
  98                         equal( document.activeElement, element.parent()[ 0 ], "5. the dialog itself" );
  99                         element.remove();
 100                         start();
 101                 });
 102         }
 103
 104         step1();
 105 });
 106
 107 test( "#7960: resizable handles below modal overlays", function() {
 108         expect( 1 );
 109
 110         var resizable = $( "<div>" ).resizable(),
 111                 dialog = $( "<div>" ).dialog({ modal: true }),
 112                 resizableZindex = parseInt( resizable.find( ".ui-resizable-handle" ).css( "zIndex" ), 10 ),
 113                 overlayZindex = parseInt( $( ".ui-widget-overlay" ).css( "zIndex" ), 10 );
 114
 115         ok( resizableZindex < overlayZindex, "Resizable handles have lower z-index than modal overlay" );
 116         dialog.dialog( "destroy" );
 117 });
 118
 119 asyncTest( "Prevent tabbing out of dialogs", function() {
 120         expect( 3 );
 121
 122         var element = $( "<div><input><input></div>" ).dialog(),
 123                 inputs = element.find( "input" ),
 124                 widget = element.dialog( "widget" )[ 0 ];
 125
 126         function checkTab() {
 127                 ok( $.contains( widget, document.activeElement ), "Tab key event moved focus within the modal" );
 128
 129                 // check shift tab
 130                 $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true });
 131                 setTimeout( checkShiftTab );
 132         }
 133
 134         function checkShiftTab() {
 135                 ok( $.contains( widget, document.activeElement ), "Shift-Tab key event moved focus within the modal" );
 136
 137                 element.remove();
 138                 setTimeout( start );
 139         }
 140
 141         inputs[1].focus();
 142         setTimeout(function() {
 143                 equal( document.activeElement, inputs[1], "Focus set on second input" );
 144                 inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
 145
 146                 setTimeout( checkTab );
 147         });
 148 });
 149
 150 asyncTest( "#9048: multiple modal dialogs opened and closed in different order", function() {
 151         expect( 1 );
 152         $( "#dialog1, #dialog2" ).dialog({ autoOpen: false, modal:true });
 153         $( "#dialog1" ).dialog( "open" );
 154         $( "#dialog2" ).dialog( "open" );
 155         $( "#dialog1" ).dialog( "close" );
 156         setTimeout(function() {
 157                 $( "#dialog2" ).dialog( "close" );
 158                 $( "#favorite-animal" ).focus();
 159                 ok( true, "event handlers cleaned up (no errors thrown)" );
 160                 start();
 161         });
 162 });
 163 })(jQuery);