forked from jquery-archive/jquery-mobile
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added some unit tests for Collapsible
- Loading branch information
Showing
2 changed files
with
216 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| /* | ||
| * mobile listview unit tests | ||
| */ | ||
|
|
||
| // TODO split out into seperate test files | ||
| (function( $ ){ | ||
| module( "Collapsible section", {}); | ||
|
|
||
| asyncTest( "The page should enhanced correctly", function(){ | ||
| $.testHelper.pageSequence([ | ||
| function(){ | ||
| $.testHelper.openPage( "#basic-collapsible-test" ); | ||
| }, | ||
|
|
||
| function() { | ||
| var $page = $( "#basic-collapsible-test" ); | ||
| ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" ); | ||
| ok($page.find( ".ui-content >:eq(0) >:header" ).hasClass( "ui-collapsible-heading" ), ".ui-collapsible-heading class added to collapsible heading" ); | ||
| ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible-content" ), ".ui-collapsible-content class added to collapsible content" ); | ||
| ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed added to collapsed elements" ); | ||
| ok(!$page.find( ".ui-content >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed not added to expanded elements" ); | ||
| ok($page.find( ".ui-collapsible.ui-collapsible-collapsed" ).find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-all" ), "Collapsible header button should have class ui-corner-all" ); | ||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "Expand/Collapse", function(){ | ||
| $.testHelper.pageSequence([ | ||
| function(){ | ||
| $.testHelper.openPage( "#basic-collapsible-test" ); | ||
| }, | ||
|
|
||
| function() { | ||
| ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed"); | ||
| $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click(); | ||
| ok(!$( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click"); | ||
| $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click(); | ||
| ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed"); | ||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| module( "Collapsible set", {}); | ||
|
|
||
| asyncTest( "The page should enhanced correctly", function(){ | ||
| $.testHelper.pageSequence([ | ||
| function(){ | ||
| $.testHelper.openPage( "#basic-collapsible-set-test" ); | ||
| }, | ||
|
|
||
| function() { | ||
| var $page = $( "#basic-collapsible-set-test" ); | ||
|
|
||
| ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-set" ), ".ui-collapsible-set class added to collapsible set" ); | ||
| ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" ); | ||
| $page.find( ".ui-collapsible-set" ).each(function() { | ||
| var $this = $( this ); | ||
| ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" ); | ||
| ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" ); | ||
| }); | ||
|
|
||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "Collapsible set with only one collapsible", function() { | ||
| $.testHelper.pageSequence([ | ||
| function(){ | ||
| $.testHelper.openPage( "#collapsible-set-with-lonely-collapsible-test" ); | ||
| }, | ||
|
|
||
| function() { | ||
| var $page = $( "#collapsible-set-with-lonely-collapsible-test" ); | ||
| $page.find( ".ui-collapsible-set" ).each(function() { | ||
| var $this = $( this ); | ||
| ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" ); | ||
| ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" ); | ||
| }); | ||
|
|
||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "Section expanded by default", function(){ | ||
| $.testHelper.pageSequence([ | ||
| function(){ | ||
| $.testHelper.openPage( "#basic-collapsible-set-test" ); | ||
| }, | ||
|
|
||
| function() { | ||
| equals($( "#basic-collapsible-set-test .ui-content >:eq(0) .ui-collapsible-collapsed" ).length, 2, "There should be 2 section collapsed" ); | ||
| ok(!$( "#basic-collapsible-set-test .ui-content >:eq(0) >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), "Section B should be expanded" ); | ||
| start(); | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| asyncTest( "Expand/Collapse", function(){ | ||
| $.testHelper.pageSequence([ | ||
| function(){ | ||
| $.testHelper.openPage( "#basic-collapsible-set-test" ); | ||
| }, | ||
|
|
||
| function() { | ||
| ok($( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed"); | ||
| $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click(); | ||
| ok(!$( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click"); | ||
| $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click(); | ||
| ok($( "#basic-collapsible-set-test .ui-collapsible" ).hasClass( "ui-collapsible-collapsed" ), "All collapsible should be collapsed"); | ||
| 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,96 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>jQuery Mobile Collapsible Integration Test</title> | ||
|
|
||
| <script src="../../../js/jquery.js"></script> | ||
| <script src="../jquery.setNameSpace.js"></script> | ||
| <script src="../../../js/"></script> | ||
| <script src="../../jquery.testHelper.js"></script> | ||
| <link rel="stylesheet" href="../../../themes/default" /> | ||
| <link rel="stylesheet" href="../../../external/qunit.css"/> | ||
| <script src="../../../external/qunit.js"></script> | ||
|
|
||
| <script src="collapsible_core.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1 id="qunit-header">jQuery Mobile Collapsible Integration Test</h1> | ||
| <h2 id="qunit-banner"></h2> | ||
| <h2 id="qunit-userAgent"></h2> | ||
| <ol id="qunit-tests"> | ||
| </ol> | ||
|
|
||
| <div data-nstest-role="page" id='basic-collapsible-test'> | ||
| <div data-nstest-role="header"> | ||
| <h1>Basic collapsible</h1> | ||
| </div> | ||
| <div data-nstest-role="content"> | ||
| <div data-nstest-role="collapsible"> | ||
| <h3>Section A</h3> | ||
|
|
||
| <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I | ||
| have the "collapsed" state; you need to expand the header to see me.</p> | ||
|
|
||
| </div> | ||
| <div data-nstest-role="collapsible" data-nstest-collapsed="false"> | ||
| <h3>Section B</h3> | ||
|
|
||
| <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I | ||
| have the "collapsed" state; you need to expand the header to see me.</p> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div data-nstest-role="page" id='basic-collapsible-set-test'> | ||
| <div data-nstest-role="header"> | ||
| <h1>Basic collapsible</h1> | ||
| </div> | ||
| <div data-nstest-role="content"> | ||
| <div data-nstest-role="collapsible-set"> | ||
| <div data-nstest-role="collapsible"> | ||
| <h3>Section A</h3> | ||
|
|
||
| <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I | ||
| have the "collapsed" state; you need to expand the header to see me.</p> | ||
|
|
||
| </div> | ||
| <div data-nstest-role="collapsible" data-nstest-collapsed="false"> | ||
| <h3>Section B</h3> | ||
|
|
||
| <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I | ||
| have the "collapsed" state; you need to expand the header to see me.</p> | ||
|
|
||
| </div> | ||
| <div data-nstest-role="collapsible"> | ||
| <h3>Section C</h3> | ||
|
|
||
| <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I | ||
| have the "collapsed" state; you need to expand the header to see me.</p> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div data-nstest-role="page" id='collapsible-set-with-lonely-collapsible-test'> | ||
| <div data-nstest-role="header"> | ||
| <h1>Basic collapsible</h1> | ||
| </div> | ||
| <div data-nstest-role="content"> | ||
| <div data-nstest-role="collapsible-set"> | ||
| <div data-nstest-role="collapsible" > | ||
| <h3>Section D</h3> | ||
|
|
||
| <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I | ||
| have the "collapsed" state; you need to expand the header to see me.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |