Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added tests for custom icon options for collapsibles and collapsible …

…sets
  • Loading branch information...
commit a3b4a924c020d8df1042af8c55d3d869e0c5893e 1 parent 800514f
@jakeboone02 authored
View
42 tests/unit/collapsible/collapsible_core.js
@@ -1,5 +1,5 @@
/*
- * mobile listview unit tests
+ * mobile collapsible unit tests
*/
// TODO split out into seperate test files
@@ -140,9 +140,9 @@
]);
});
- asyncTest( "Collapsible Set with static and dynamic content", function(){
- $.testHelper.pageSequence([
- function(){
+ asyncTest( "Collapsible Set with static and dynamic content", function(){
+ $.testHelper.pageSequence([
+ function(){
$.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
},
@@ -164,6 +164,40 @@
]);
});
+ module( "Icons", {});
+
+ asyncTest( "Collapsible with custom icons", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-with-custom-icons" );
+ },
+
+ 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");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Collapsible sets with custom icons", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-custom-icons" );
+ },
+
+ 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");
+ start();
+ }
+ ]);
+ });
+
module( "Theming", {});
asyncTest( "Collapsible", 6, function(){
View
56 tests/unit/collapsible/index.html
@@ -112,6 +112,62 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
+<div data-nstest-role="page" id='collapsible-with-custom-icons'>
+ <div data-nstest-role="header">
+ <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">
+ <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-icon="arrow-r" data-nstest-expanded-icon="arrow-d" data-nstest-collapsed="false">
+ <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>
+</div>
+
+<div data-nstest-role="page" id='collapsible-set-with-custom-icons'>
+ <div data-nstest-role="header">
+ <h1>Custom icons for collapsible sets</h1>
+ </div>
+ <div data-nstest-role="content">
+ <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>
+
+ <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-l" data-nstest-expanded-icon="arrow-u">
+ <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-l" data-nstest-expanded-icon="arrow-u" data-nstest-collapsed="false">
+ <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>
+
<div data-nstest-role="page" id='collapsible-with-theming'>
<div data-nstest-role="header">
<h1>Themed collapsibles</h1>
Please sign in to comment.
Something went wrong with that request. Please try again.