Menu: Add classes option

Ref #7053
Ref gh-1411

2 files changed, 31 insertions, 8 deletions

diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html
index 56115c334..114382587 100644
--- a/tests/unit/menu/menu.html
+++ b/tests/unit/menu/menu.html
@@ -9,6 +9,7 @@
 	<script src="../../../external/qunit/qunit.js"></script>
 	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
 	<script src="../testsuite.js"></script>
+	<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
 	<script>
 	TestHelpers.loadResources({
 		css: [ "core", "menu" ],
@@ -52,7 +53,7 @@
 <div id="qunit-fixture">
 
 <ul class="foo" id="menu1">
-	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo"><div>Aberdeen</div>
 	<li class="foo"><div>Ada</div></li>
 	<li class="foo"><div>Adamsville</div></li>
 	<li class="foo"><div id="testID1">Addyston</div></li>
@@ -332,6 +333,18 @@
 	<li class="foo"><div>-Saarland</div></li>
 </ul>
 
+<ul class="foo" id="menu9">
+	<li class="foo">
+		<div>Aberdeen</div>
+		<ul>
+			<li class="foo"><div>Ada</div></li>
+		</ul>
+	</li>
+	<li class="foo"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div>Addyston</div></li>
+	<li class="foo"><div>Adelphi</div></li>
+</ul>
 </div>
 </body>
 </html>
diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js
index 5be717a66..955424477 100644
--- a/tests/unit/menu/menu_core.js
+++ b/tests/unit/menu/menu_core.js
@@ -2,13 +2,23 @@
 
 module( "menu: core" );
 
-test( "markup structure", function() {
-	expect( 6 );
-	var element = $( "#menu1" ).menu();
-	ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" );
-	element.children().each(function( index ) {
-		ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" );
-	});
+test( "markup structure", function( assert ) {
+	expect( 11 );
+	var element = $( "#menu9" ).menu(),
+		items = element.children(),
+		firstItemChildren = items.eq( 0 ).children();
+
+	assert.hasClasses( element, "ui-menu ui-widget ui-widget-content" );
+	assert.hasClasses( items[ 0 ], "ui-menu-item" );
+	equal( items.eq( 0 ).children().length, 2, "Item has exactly 2 children when it has a sub menu" );
+	assert.hasClasses( firstItemChildren[ 0 ], "ui-menu-item-wrapper" );
+	assert.hasClasses( firstItemChildren[ 1 ], "ui-menu ui-widget ui-widget-content" );
+	assert.hasClasses( firstItemChildren.eq( 1 ).children()[ 0 ], "ui-menu-item" );
+	assert.hasClasses( firstItemChildren.eq( 1 ).children().eq( 0 ).children(), "ui-menu-item-wrapper" );
+	assert.hasClasses( items[ 1 ], "ui-menu-item" );
+	equal( items.eq( 1 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" );
+	assert.hasClasses( items[ 2 ], "ui-menu-item" );
+	equal( items.eq( 2 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" );
 });
 
 test( "accessibility", function () {