Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 553de2d

Browse files
gseguingseguin
committed
Unit tests for collapsible and collapsible-set following commit bdaa477 
1 parent bdaa477 commit 553de2d

File tree

2 files changed

+114
-0
lines changed

2 files changed

+114
-0
lines changed

‎tests/unit/collapsible/collapsible_core.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,5 +116,50 @@
116116
]);
117117
});
118118

119+
module( "Theming", {});
120+
121+
asyncTest( "Collapsible", 6, function(){
122+
$.testHelper.pageSequence([
123+
function(){
124+
$.testHelper.openPage( "#collapsible-with-theming" );
125+
},
126+
127+
function() {
128+
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
129+
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
130+
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
131+
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
132+
ok( !collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should NOT have class ui-btn-up-b");
133+
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c");
134+
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c");
135+
start();
136+
}
137+
]);
138+
});
139+
140+
141+
asyncTest( "Collapsible Set", function(){
142+
$.testHelper.pageSequence([
143+
function(){
144+
$.testHelper.openPage( "#collapsible-set-with-theming" );
145+
},
146+
147+
function() {
148+
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
149+
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
150+
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
151+
ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
152+
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
153+
ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
154+
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
155+
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of third collapsible should have class ui-btn-up-d");
156+
ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
157+
ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
158+
ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
159+
start();
160+
}
161+
]);
162+
});
163+
119164

120165
})( jQuery );

‎tests/unit/collapsible/index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,75 @@ <h3>Section D</h3>
8989
have the "collapsed" state; you need to expand the header to see me.</p>
9090
</div>
9191
</div>
92+
93+
<div data-nstest-role="collapsible" >
94+
<h3>Section E</h3>
95+
96+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
97+
have the "collapsed" state; you need to expand the header to see me.</p>
98+
</div>
99+
</div>
100+
</div>
101+
102+
<div data-nstest-role="page" id='collapsible-with-theming'>
103+
<div data-nstest-role="header">
104+
<h1>Themed collapsibles</h1>
105+
</div>
106+
<div data-nstest-role="content">
107+
<div data-nstest-role="collapsible" data-nstest-theme="a">
108+
<h3>Section A</h3>
109+
110+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
111+
have the "collapsed" state; you need to expand the header to see me.</p>
112+
</div>
113+
<div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
114+
<h3>Section B</h3>
115+
116+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
117+
have the "collapsed" state; you need to expand the header to see me.</p>
118+
</div>
119+
<div data-nstest-role="collapsible" data-nstest-theme="c" data-nstest-content-theme="c" data-nstest-collapsed="false">
120+
<h3>Section B</h3>
121+
122+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
123+
have the "collapsed" state; you need to expand the header to see me.</p>
124+
</div>
125+
126+
</div>
127+
</div>
128+
129+
<div data-nstest-role="page" id='collapsible-set-with-theming'>
130+
<div data-nstest-role="header">
131+
<h1>Themed collapsibles</h1>
132+
</div>
133+
<div data-nstest-role="content">
134+
<div data-nstest-role="collapsible-set" data-nstest-theme="d" data-nstest-content-theme="d">
135+
<div data-nstest-role="collapsible" data-nstest-theme="a">
136+
<h3>Section A</h3>
137+
138+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
139+
have the "collapsed" state; you need to expand the header to see me.</p>
140+
</div>
141+
<div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
142+
<h3>Section B</h3>
143+
144+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
145+
have the "collapsed" state; you need to expand the header to see me.</p>
146+
</div>
147+
<div data-nstest-role="collapsible" data-nstest-collapsed="false">
148+
<h3>Section C</h3>
149+
150+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
151+
have the "collapsed" state; you need to expand the header to see me.</p>
152+
</div>
153+
<div data-nstest-role="collapsible">
154+
<h3>Section D</h3>
155+
156+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
157+
have the "collapsed" state; you need to expand the header to see me.</p>
158+
</div>
159+
</div>
160+
92161
</div>
93162
</div>
94163

0 commit comments

Comments
 (0)