Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-04 20:54:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added tests for dialog theming and overlayTheme

Browse source
This commit is contained in:
Ghislain Seguin 2011-11-04 22:34:34 -07:00
parent 47e0e4bf99
commit 3da8e0d171
2 changed files with 137 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
tests/unit/dialog/dialog_events.js
View file

@ -2,12 +2,20 @@
* mobile dialog unit tests
*/
(function($) {
module( "jquery.mobile.dialog.js" );
module( "jquery.mobile.dialog.js", {
setup: function() {
$.mobile.page.prototype.options.contentTheme = "d";
}
});
asyncTest( "dialog hash is added when the dialog is opened and removed when closed", function() {
expect( 6 );
expect( 2 );
$.testHelper.pageSequence([
function() {
$.mobile.changePage( $( "#mypage" ) );
},
function() {
//bring up the dialog
$( "#foo-dialog-link" ).click();
@ -19,12 +27,6 @@
// make sure the dialog came up
ok( /&ui-state=dialog/.test(location.hash), "ui-state=dialog =~ location.hash", "dialog open" );
// Assert dialog theme inheritance (issue 1375):
ok( fooDialog.hasClass( "ui-body-b" ), "Expected explicit theme ui-body-b" );
ok( fooDialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-a" ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
ok( fooDialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-d" ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
ok( fooDialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-a" ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
// close the dialog
$( ".ui-dialog" ).dialog( "close" );
},
@ -35,4 +37,90 @@
}
]);
});
asyncTest( "dialog element with no theming", function() {
expect(4);
$.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-body-c" ), "Expected explicit theme ui-body-c" );
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
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-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
start();
}
]);
});
asyncTest( "dialog element with data-theme", function() {
// Reset fallback theme for content
$.mobile.page.prototype.options.contentTheme = null;
expect(5);
$.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-body-e" ), "Expected explicit theme ui-body-e" );
ok( !dialog.hasClass( "ui-overlay-b" ), "Expected no theme ui-overlay-b" );
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
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-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
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-body-e" ), "Expected explicit theme ui-body-e" );
ok( dialog.hasClass( "ui-overlay-b" ), "Expected explicit theme ui-overlay-b" );
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
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-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
start();
}
]);
});
})( jQuery );

43
tests/unit/dialog/index.html
View file

@ -33,8 +33,11 @@
<ol id="qunit-tests">
</ol>
<div id="bar" data-nstest-role="page" data-nstest-theme="a">
<a href="#foo-dialog" id="foo-dialog-link" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog"></a>
<div id="mypage" data-nstest-role="page" data-nstest-theme="a">
<a href="#foo-dialog" id="foo-dialog-link" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog"></a>
<a href="#dialog-a" id="link-a" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">no theme set</a>
<a href="#dialog-b" id="link-b" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme set</a>
<a href="#dialog-c" id="link-c" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme & data-nstest-overlay-theme set</a>
</div>
<div id="foo-dialog" data-nstest-role="dialog" data-nstest-theme="b">
@ -49,5 +52,41 @@
</div>
</div>
<div data-nstest-role="page" id="dialog-a">
<div data-nstest-role="header" data-nstest-position="inline">
<h1> No theme set </h1>
</div>
<div data-nstest-role="content">
Some text here....
</div>
<div data-nstest-role="footer">
footer
</div>
</div>
<div data-nstest-role="page" data-nstest-theme="e" id="dialog-b">
<div data-nstest-role="header">
<h1> data-nstest-theme set </h1>
</div>
<div data-nstest-role="content">
Some text here....
</div>
<div data-nstest-role="footer">
footer
</div>
</div>
<div data-nstest-role="page" id="dialog-c" data-nstest-overlay-theme="b" data-nstest-theme="e">
<div data-nstest-role="header">
<h1> data-nstest-theme & data-nstest-overlay-theme set </h1>
</div>
<div data-nstest-role="content">
Some text here....
</div>
<div data-nstest-role="footer">
footer
</div>
</div>
</body>
</html>