Added test for mixed static and dynamic collapsibles in collapsible set

Author: gseguin

tests/unit/collapsible/collapsible_core.js

@@ -128,7 +128,7 @@
 					$( '<div data-'+ $.mobile.ns +'role="collapsible"><h3>Collapsible Item ' + i + '</h3></div>' ).appendTo( set );
 				}
 				set.collapsibleset( "refresh" );
-				equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsible should be enhanced" );
+				equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
 				ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
 				ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
 				ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
@@ -140,6 +140,30 @@
 		]);
 	});
 
+  asyncTest( "Collapsible Set with static and dynamic content", function(){
+  		$.testHelper.pageSequence([
+  			function(){
+  				$.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
+  			},
+
+  			function() {
+  				var set = $( ".ui-page-active" ).find( ".ui-collapsible-set" );
+  				for ( var i = 0; i < 2; i++ ) {
+  					$( '<div data-'+ $.mobile.ns +'role="collapsible"><h3>Collapsible Item ' + i + '</h3></div>' ).appendTo( set );
+  				}
+  				set.collapsibleset( "refresh" );
+  				equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
+  				ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
+  				ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
+  				ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
+  				ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 2nd collapsible should NOT have bottom corners" );
+  				ok( set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 3rd collapsible should have bottom corners" );
+  				ok( !set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-top" ), "The 3rd collapsible should NOT have top corners" );
+  				start();
+  			}
+  		]);
+  	});
+
 	module( "Theming", {});
 
 	asyncTest( "Collapsible", 6, function(){

tests/unit/collapsible/index.html

@@ -183,5 +183,21 @@ <h1>Collapsible Set with dynamic content</h1>
 	</div>
 </div>
 
+<div data-nstest-role="page" id='collapsible-set-with-static-and-dynamic-content'>
+	<div data-nstest-role="header">
+		<h1>Collapsible Set with dynamic content</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>
+	</div>
+</div>
+
 </body>
 </html>