Permalink
Browse files

Added tests for default collapsible icons

  • Loading branch information...
1 parent a3b4a92 commit aa682d2715ad9323f76fed077ea3c388259f20e4 @jakeboone02 jakeboone02 committed Mar 15, 2012
Showing with 38 additions and 8 deletions.
  1. +10 −6 tests/unit/collapsible/collapsible_core.js
  2. +28 −2 tests/unit/collapsible/index.html
@@ -174,8 +174,10 @@
function() {
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
- ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of collapsed collapsible should have class ui-icon-arrow-r");
- ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of expanded collapsible should have class ui-icon-arrow-d");
+ ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
+ ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
+ ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
+ ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
start();
}
]);
@@ -189,10 +191,12 @@
function() {
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
- ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of first collapsed collapsible should have class ui-icon-arrow-r");
- ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of first expanded collapsible should have class ui-icon-arrow-d");
- ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-l" ), "Heading of second collapsed collapsible should have class ui-icon-arrow-l");
- ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-u" ), "Heading of second expanded collapsible should have class ui-icon-arrow-u");
+ ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
+ ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
+ ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
+ ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
+ ok( collapsibles.eq(4).find( ".ui-icon" ).hasClass( "ui-icon-arrow-l" ), "Heading of fifth collapsible should have class ui-icon-arrow-l");
+ ok( collapsibles.eq(5).find( ".ui-icon" ).hasClass( "ui-icon-arrow-u" ), "Heading of sixth collapsible should have class ui-icon-arrow-u");
start();
}
]);
@@ -117,15 +117,27 @@ <h2 id="qunit-userAgent"></h2>
<h1>Custom icons for collapsibles</h1>
</div>
<div data-nstest-role="content">
- <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
+ <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" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
+ <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 data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d" data-nstest-collapsed="false">
- <h3>Section A</h3>
+ <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>
@@ -139,6 +151,20 @@ <h2 id="qunit-userAgent"></h2>
<h1>Custom icons for collapsible sets</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>
<div data-nstest-role="collapsible-set" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
<div data-nstest-role="collapsible">
<h3>Section A</h3>

0 comments on commit aa682d2

Please sign in to comment.