libs/js/jquery-mobile-1.0.1pre/tests/unit/dialog/dialog_events.js

   1 /*
   2  * mobile dialog unit tests
   3  */
   4 (function($) {
   5         module( "jquery.mobile.dialog.js", {
   6                 setup: function() {
   7                         $.mobile.page.prototype.options.contentTheme = "d";
   8                 }
   9         });
  10
  11         asyncTest( "dialog hash is added when the dialog is opened and removed when closed", function() {
  12                 expect( 2 );
  13
  14                 $.testHelper.pageSequence([
  15                         function() {
  16                                 $.mobile.changePage( $( "#mypage" ) );
  17                         },
  18
  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( "dialog element with no theming", function() {
  42                 expect(4);
  43
  44                 $.testHelper.pageSequence([
  45                         function() {
  46                                 $.mobile.changePage( $( "#mypage" ) );
  47                         },
  48
  49                         function() {
  50                                 //bring up the dialog
  51                                 $( "#link-a" ).click();
  52                         },
  53
  54                         function() {
  55                                 var dialog = $( "#dialog-a" );
  56
  57                                 // Assert dialog theme inheritance (issue 1375):
  58                                 ok( dialog.hasClass( "ui-body-c" ), "Expected explicit theme ui-body-c" );
  59                                 ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
  60                                 ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
  61                                 ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
  62
  63                                 start();
  64                         }
  65                 ]);
  66         });
  67
  68         asyncTest( "dialog element with data-theme", function() {
  69                 // Reset fallback theme for content
  70                 $.mobile.page.prototype.options.contentTheme = null;
  71
  72                 expect(5);
  73
  74                 $.testHelper.pageSequence([
  75                         function() {
  76                                 $.mobile.changePage( $( "#mypage" ) );
  77                         },
  78
  79                         function() {
  80                                 //bring up the dialog
  81                                 $( "#link-b" ).click();
  82                         },
  83
  84                         function() {
  85                                 var dialog = $( "#dialog-b" );
  86
  87                                 // Assert dialog theme inheritance (issue 1375):
  88                                 ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
  89                                 ok( !dialog.hasClass( "ui-overlay-b" ), "Expected no theme ui-overlay-b" );
  90                                 ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
  91                                 ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" );
  92                                 ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
  93
  94                                 start();
  95                         }
  96                 ]);
  97         });
  98
  99         asyncTest( "dialog element with data-theme & data-overlay-theme", function() {
 100                 expect(5);
 101
 102                 $.testHelper.pageSequence([
 103                         function() {
 104                                 $.mobile.changePage( $( "#mypage" ) );
 105                         },
 106
 107                         function() {
 108                                 //bring up the dialog
 109                                 $( "#link-c" ).click();
 110                         },
 111
 112                         function() {
 113                                 var dialog = $( "#dialog-c" );
 114
 115                                 // Assert dialog theme inheritance (issue 1375):
 116                                 ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
 117                                 ok( dialog.hasClass( "ui-overlay-b" ), "Expected explicit theme ui-overlay-b" );
 118                                 ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
 119                                 ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
 120                                 ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
 121
 122                                 start();
 123                         }
 124                 ]);
 125         });
 126 })( jQuery );