This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Page: add enhanced option for page and tests for dialog extension
- Loading branch information
Showing
8 changed files
with
485 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| </head> | ||
| <body> | ||
| <div data-nstest-role="dialog" id="dialog-no-hash"> | ||
| <div data-nstest-role="header"> | ||
| <h1>No-hash dialog test</h1> | ||
| </div> | ||
| <div data-nstest-role="content"> | ||
| <p>Content</p> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| (function($) { | ||
|
|
||
| asyncTest( "Returning from a dialog results in the page from which it opened", function() { | ||
| expect( 2 ); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| $( "#openBasicDialog" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| ok( $.mobile.activePage.attr( "id" ) === "basicDialog", "Basic dialog has opened" ); | ||
| $( "a", $.mobile.activePage[ 0 ] ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| ok( $.mobile.activePage.attr( "id" ) === "basicTestPage", "Active page is original page" ); | ||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| })( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| /* | ||
| * mobile dialog unit tests | ||
| */ | ||
| (function($) { | ||
| var home = $.mobile.path.parseUrl(location.pathname).directory, | ||
| homeWithSearch = home + location.search; | ||
|
|
||
| module( "jquery.mobile.dialog.js", { | ||
| setup: function() { | ||
| $.mobile.page.prototype.options.contentTheme = "d"; | ||
| $.testHelper.navReset( homeWithSearch ); | ||
| } | ||
| }); | ||
|
|
||
| asyncTest( "Test option data-close-btn", function() { | ||
| expect( 7 ); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| // bring up the dialog | ||
| $( "#close-btn-test-link" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| var a = $( "#close-btn-test .ui-header a" ); | ||
| deepEqual( a.length, 0, "Initially, the dialog header has no anchor elements (option value 'none')" ); | ||
|
|
||
| $( "#close-btn-test" ).page( "option", "closeBtn", "left" ); | ||
| a = $( "#close-btn-test .ui-header a" ); | ||
| deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'left'" ); | ||
| ok( a.hasClass( "ui-btn-left" ), "The close button has class ui-btn-left when the closeBtn option is set to 'left'" ); | ||
| deepEqual( a.attr( "role" ), "button", "The close button has the attribute " + '"' + "role='button'" + '"' + "set" ); | ||
|
|
||
| $( "#close-btn-test" ).page( "option", "closeBtn", "right" ); | ||
| a = $( "#close-btn-test .ui-header a" ); | ||
| deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'right'" ); | ||
| ok( a.hasClass( "ui-btn-right" ), "The close button has class ui-btn-right when the closeBtn option is set to 'right'" ); | ||
| deepEqual( a.attr( "role" ), "button", "The close button has the attribute " + '"' + "role='button'" + '"' + "set" ); | ||
|
|
||
|
|
||
| }, | ||
|
|
||
| function() { | ||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "clicking dialog 'Close' button twice in quick succession does not cause the browser history to retreat by two", function() { | ||
| var correctLocation; | ||
|
|
||
| expect(1); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| $.mobile.changePage( $( "#mypage" ) ); | ||
| }, | ||
|
|
||
| function() { | ||
|
|
||
| $.mobile.changePage( $( "#doubleCloseTestPage" ) ); | ||
| }, | ||
|
|
||
| function() { | ||
|
|
||
| $( "#doubleCloseTestPage a" ).click(); | ||
| }, | ||
|
|
||
| function( timedOut ) { | ||
| ok( !timedOut, "Clicking dialog 'Close' has resulted in a pagechange event" ); | ||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "dialog element with no theming", function() { | ||
| expect(5); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| $.mobile.changePage( $( "#mypage" ) ); | ||
| }, | ||
|
|
||
| function() { | ||
| //bring up the dialog | ||
| $( "#link-a" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| var dialog = $( "#dialog-a" ); | ||
|
|
||
| // Assert dialog theme inheritance (issue 1375): | ||
| ok( dialog.hasClass( "ui-page-theme-a" ), "Expected explicit theme ui-page-theme-a" ); | ||
| ok( $.mobile.pageContainer.hasClass( "ui-overlay-a" ), "Expected default overlay theme ui-overlay-a" ); | ||
| ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" ); | ||
| ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" ); | ||
| ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" ); | ||
|
|
||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "dialog element with data-theme", function() { | ||
| // Reset fallback theme for content | ||
| $.mobile.page.prototype.options.contentTheme = null; | ||
|
|
||
| expect(6); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| $.mobile.changePage( $( "#mypage" ) ); | ||
| }, | ||
|
|
||
| function() { | ||
| //bring up the dialog | ||
| $( "#link-b" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| var dialog = $( "#dialog-b" ); | ||
|
|
||
| // Assert dialog theme inheritance (issue 1375): | ||
| ok( dialog.hasClass( "ui-page-theme-e" ), "Expected explicit theme ui-page-theme-e" ); | ||
| ok( !$.mobile.pageContainer.hasClass( "ui-overlay-b" ), "Expected no overlay theme ui-overlay-b" ); | ||
| ok( $.mobile.pageContainer.hasClass( "ui-overlay-a" ), "Expected default overlay theme ui-overlay-a" ); | ||
| ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" ); | ||
| ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" ); | ||
| ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" ); | ||
|
|
||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "dialog element with data-theme & data-overlay-theme", function() { | ||
| expect(5); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| $.mobile.changePage( $( "#mypage" ) ); | ||
| }, | ||
|
|
||
| function() { | ||
| //bring up the dialog | ||
| $( "#link-c" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| var dialog = $( "#dialog-c" ); | ||
| // Assert dialog theme inheritance (issue 1375): | ||
| ok( dialog.hasClass( "ui-page-theme-e" ), "Expected explicit theme ui-page-theme-e" ); | ||
| ok( $.mobile.pageContainer.hasClass( "ui-overlay-b" ), "Expected explicit overlay theme ui-overlay-b" ); | ||
| ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" ); | ||
| ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" ); | ||
| ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" ); | ||
|
|
||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "page container is updated to dialog overlayTheme at pagebeforeshow", function(){ | ||
| var pageTheme; | ||
|
|
||
| expect( 1 ); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| $.mobile.changePage( "#mypage" ); | ||
| }, | ||
|
|
||
| function() { | ||
| //bring up the dialog | ||
| $( "#foo-dialog-link" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| pageTheme = "ui-overlay-" + $.mobile.activePage.page( "option", "overlayTheme" ); | ||
|
|
||
| $.mobile.pageContainer.removeClass( pageTheme ); | ||
|
|
||
| $.mobile.activePage | ||
| .bind( "pagebeforeshow", function(){ | ||
| ok( $.mobile.pageContainer.hasClass( pageTheme ), "Page container has the same theme as the dialog overlayTheme on pagebeforeshow" ); | ||
| start(); | ||
| }).trigger( "pagebeforeshow" ); | ||
| } | ||
| ]); | ||
| }); | ||
| })( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* | ||
| * mobile dialog unit tests | ||
| */ | ||
| (function($) { | ||
| module( "jquery.mobile.dialog.js", { | ||
| setup: function() { | ||
| $.mobile.page.prototype.options.contentTheme = "d"; | ||
| } | ||
| }); | ||
|
|
||
| asyncTest( "dialog opens and closes correctly when hash handling is off", function() { | ||
| var activePage; | ||
|
|
||
| expect( 3 ); | ||
|
|
||
| $.testHelper.pageSequence([ | ||
| function() { | ||
| $.mobile.changePage( $( "#mypage" ) ); | ||
| }, | ||
|
|
||
| function() { | ||
| activePage = $.mobile.activePage; | ||
| //bring up the dialog | ||
| $( "#dialog-no-hash-link" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| // make sure the dialog came up | ||
| ok( $( "#dialog-no-hash" ).is( ":visible" ), "dialog showed up" ); | ||
|
|
||
| // close the dialog | ||
| $( "#dialog-no-hash a" ).click(); | ||
| }, | ||
|
|
||
| function() { | ||
| ok( !$( "#dialog-no-hash" ).is( ":visible" ), "dialog disappeared" ); | ||
| ok( $.mobile.activePage[0] === activePage[0], "active page has been restored" ); | ||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| })( jQuery ); |
Oops, something went wrong.