libs/js/jquery-mobile-1.2.0/tests/unit/dialog/dialog_events.js

   1 /*
   2  * mobile dialog unit tests
   3  */
   4 (function($) {
   5         var home = $.mobile.path.parseUrl(location.pathname).directory,
   6                 homeWithSearch = home + location.search;
   7
   8         module( "jquery.mobile.dialog.js", {
   9                 setup: function() {
  10                         $.mobile.page.prototype.options.contentTheme = "d";
  11                         $.testHelper.navReset( homeWithSearch );
  12                 }
  13         });
  14
  15         asyncTest( "dialog hash is added when the dialog is opened and removed when closed", function() {
  16                 expect( 2 );
  17
  18                 $.testHelper.pageSequence([
  19                         function() {
  20                                 //bring up the dialog
  21                                 $( "#foo-dialog-link" ).click();
  22                         },
  23
  24                         function() {
  25                                 var fooDialog = $( "#foo-dialog" );
  26
  27                                 // make sure the dialog came up
  28                                 ok( /&ui-state=dialog/.test(location.hash), "ui-state=dialog =~ location.hash", "dialog open" );
  29
  30                                 // close the dialog
  31                                 $( ".ui-dialog" ).dialog( "close" );
  32                         },
  33
  34                         function() {
  35                                 ok( !(/&ui-state=dialog/.test(location.hash)), "ui-state=dialog !~ location.hash" );
  36                                 start();
  37                         }
  38                 ]);
  39         });
  40
  41         asyncTest( "clicking dialog 'Close' button twice in quick succession does not cause the browser history to retreat by two", function() {
  42                 var correctLocation;
  43
  44                 expect(3);
  45
  46                 $.testHelper.pageSequence([
  47                         function() {
  48                                 $.mobile.changePage( $( "#mypage" ) );
  49                         },
  50
  51                         function() {
  52                                 $.mobile.changePage( $( "#doubleCloseTestPage" ) );
  53                         },
  54
  55                         function() {
  56                                 correctLocation = location.href;
  57                                 $( "#doubleCloseTestPage a" ).click();
  58                         },
  59
  60                         function() {
  61                                 $( "#foo-dialog a" ).click();
  62                                 setTimeout( function() { $( "#foo-dialog a" ).click(); }, 0 );
  63                         },
  64
  65                         function( timedOut ) {
  66                                 ok( !timedOut, "Clicking dialog 'Close' has resulted in a pagechange event" );
  67                         },
  68
  69                         function( timedOut ) {
  70                                 ok( timedOut, "Clicking dialog 'Close' has not resulted in two pagechange events" );
  71                                 ok( location.href === correctLocation, "Location is correct afterwards" );
  72                                 start();
  73                         }
  74                 ]);
  75         });
  76
  77         asyncTest( "dialog element with no theming", function() {
  78                 expect(4);
  79
  80                 $.testHelper.pageSequence([
  81                         function() {
  82                                 $.mobile.changePage( $( "#mypage" ) );
  83                         },
  84
  85                         function() {
  86                                 //bring up the dialog
  87                                 $( "#link-a" ).click();
  88                         },
  89
  90                         function() {
  91                                 var dialog = $( "#dialog-a" );
  92
  93                                 // Assert dialog theme inheritance (issue 1375):
  94                                 ok( dialog.hasClass( "ui-body-c" ), "Expected explicit theme ui-body-c" );
  95                                 ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
  96                                 ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
  97                                 ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
  98
  99                                 start();
 100                         }
 101                 ]);
 102         });
 103
 104         asyncTest( "dialog element with data-theme", function() {
 105                 // Reset fallback theme for content
 106                 $.mobile.page.prototype.options.contentTheme = null;
 107
 108                 expect(5);
 109
 110                 $.testHelper.pageSequence([
 111                         function() {
 112                                 $.mobile.changePage( $( "#mypage" ) );
 113                         },
 114
 115                         function() {
 116                                 //bring up the dialog
 117                                 $( "#link-b" ).click();
 118                         },
 119
 120                         function() {
 121                                 var dialog = $( "#dialog-b" );
 122
 123                                 // Assert dialog theme inheritance (issue 1375):
 124                                 ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
 125                                 ok( !dialog.hasClass( "ui-overlay-b" ), "Expected no theme ui-overlay-b" );
 126                                 ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
 127                                 ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" );
 128                                 ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
 129
 130                                 start();
 131                         }
 132                 ]);
 133         });
 134
 135         asyncTest( "dialog element with data-theme & data-overlay-theme", function() {
 136                 expect(5);
 137
 138                 $.testHelper.pageSequence([
 139                         function() {
 140                                 $.mobile.changePage( $( "#mypage" ) );
 141                         },
 142
 143                         function() {
 144                                 //bring up the dialog
 145                                 $( "#link-c" ).click();
 146                         },
 147
 148                         function() {
 149                                 var dialog = $( "#dialog-c" );
 150
 151                                 // Assert dialog theme inheritance (issue 1375):
 152                                 ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
 153                                 ok( dialog.hasClass( "ui-overlay-b" ), "Expected explicit theme ui-overlay-b" );
 154                                 ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
 155                                 ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
 156                                 ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
 157
 158                                 start();
 159                         }
 160                 ]);
 161         });
 162
 163
 164         asyncTest( "page container is updated to dialog overlayTheme at pagebeforeshow", function(){
 165                 var pageTheme;
 166
 167                 expect( 1 );
 168
 169                 $.testHelper.pageSequence([
 170                         function() {
 171                                 $.mobile.changePage( "#mypage" );
 172                         },
 173
 174                         function() {
 175                                 //bring up the dialog
 176                                 $( "#foo-dialog-link" ).click();
 177                         },
 178
 179                         function() {
 180                                 pageTheme = "ui-overlay-" + $.mobile.activePage.dialog( "option", "overlayTheme" );
 181
 182                                 $.mobile.pageContainer.removeClass( pageTheme );
 183
 184                                 $.mobile.activePage
 185                                         .bind( "pagebeforeshow", function(){
 186                                                 ok( $.mobile.pageContainer.hasClass( pageTheme ), "Page container has the same theme as the dialog overlayTheme on pagebeforeshow" );
 187                                                 start();
 188                                         }).trigger( "pagebeforeshow" );
 189                         }
 190                 ]);
 191         });
 192 })( jQuery );