Tabs: Add classes option

Ref #7053
Ref gh-1411

5 files changed, 75 insertions, 27 deletions

diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html
index 778639eb3..e2bccec99 100644
--- a/tests/unit/tabs/tabs.html
+++ b/tests/unit/tabs/tabs.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", "tabs" ],
diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js
index 8f6bbc67b..c43d8ff09 100644
--- a/tests/unit/tabs/tabs_common.js
+++ b/tests/unit/tabs/tabs_common.js
@@ -1,7 +1,12 @@
 TestHelpers.commonWidgetTests( "tabs", {
 	defaults: {
 		active: null,
-		classes: {},
+		classes: {
+			"ui-tabs": "ui-corner-all",
+			"ui-tabs-nav": "ui-corner-all",
+			"ui-tab": "ui-corner-top",
+			"ui-tabs-panel": "ui-corner-bottom"
+		},
 		collapsible: false,
 		disabled: false,
 		event: "click",
diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js
index ab3c81175..b003fa61e 100644
--- a/tests/unit/tabs/tabs_core.js
+++ b/tests/unit/tabs/tabs_core.js
@@ -4,13 +4,32 @@ var state = TestHelpers.tabs.state;
 
 module( "tabs: core" );
 
-test( "markup structure", function() {
-	expect( 3 );
-	var element = $( "#tabs1" ).tabs();
-	ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" );
-	ok( element.find( "ul" ).hasClass( "ui-tabs-nav" ), "list item is .ui-tabs-nav" );
-	equal( element.find( ".ui-tabs-panel" ).length, 3,
-		".ui-tabs-panel elements exist, correct number" );
+test( "markup structure", function( assert ) {
+	expect( 17 );
+	var element = $( "#tabs1" ).tabs(),
+		tabList = element.find( "ul, ol" ),
+		tabs = tabList.find( "li" ),
+		active = tabs.eq( 0 ),
+		anchors = tabs.find( "a" ),
+		panels = element.find( ".ui-tabs-panel" );
+
+	assert.hasClasses( element, "ui-tabs ui-widget ui-widget-content" );
+	assert.lacksClasses( element, "ui-tabs-collapsible" );
+	assert.hasClasses( tabList, "ui-tabs-nav ui-widget-header" );
+	equal( tabList.length, 1, "The widget contains exactly one tab list" );
+	assert.hasClasses( tabs[ 0 ], "ui-tab" );
+	assert.hasClasses( tabs[ 1 ], "ui-tab" );
+	assert.hasClasses( tabs[ 2 ], "ui-tab" );
+	equal( tabs.length, 3, "There are exactly three tabs" );
+	assert.hasClasses( anchors[ 0 ], "ui-tabs-anchor" );
+	assert.hasClasses( anchors[ 1 ], "ui-tabs-anchor" );
+	assert.hasClasses( anchors[ 2 ], "ui-tabs-anchor" );
+	equal( anchors.length, 3, "There are exactly 3 anchors" );
+	assert.hasClasses( active, "ui-tabs-active" );
+	assert.hasClasses( panels[ 0 ], "ui-tabs-panel ui-widget-content" );
+	assert.hasClasses( panels[ 1 ], "ui-tabs-panel ui-widget-content" );
+	assert.hasClasses( panels[ 2 ], "ui-tabs-panel ui-widget-content" );
+	equal( panels.length, 3, "There are exactly 3 tab panels" );
 });
 
 $.each({
@@ -129,18 +148,21 @@ test( "accessibility", function() {
 	equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" );
 });
 
-asyncTest( "accessibility - ajax", function() {
-	expect( 4 );
+asyncTest( "accessibility - ajax", function( assert ) {
+	expect( 6 );
 	var element = $( "#tabs2" ).tabs(),
+		tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 		panel = $( "#custom-id" );
 
 	equal( panel.attr( "aria-live" ), "polite", "remote panel has aria-live" );
 	equal( panel.attr( "aria-busy" ), null, "does not have aria-busy on init" );
 	element.tabs( "option", "active", 3 );
+	assert.hasClasses( tab, "ui-tabs-loading" );
 	equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" );
 	element.one( "tabsload", function() {
 		setTimeout(function() {
 			equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" );
+			assert.lacksClasses( tab, "ui-tabs-loading" );
 			start();
 		}, 1 );
 	});
diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js
index 073430b77..b9b5bee9f 100644
--- a/tests/unit/tabs/tabs_methods.js
+++ b/tests/unit/tabs/tabs_methods.js
@@ -15,6 +15,22 @@ test( "destroy", function() {
 	});
 });
 
+asyncTest( "destroy - ajax", function() {
+	expect( 1 );
+	domEqual( "#tabs2", function( done ) {
+		var element = $( "#tabs2" ).tabs({
+			load: function() {
+				setTimeout(function() {
+					element.tabs( "destroy" );
+					done();
+					start();
+				});
+			}
+		});
+		element.tabs( "option", "active", 2 );
+	});
+});
+
 test( "enable", function() {
 	expect( 8 );
 
diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js
index 56e32b7da..3983721d5 100644
--- a/tests/unit/tabs/tabs_options.js
+++ b/tests/unit/tabs/tabs_options.js
@@ -107,28 +107,14 @@ test( "active - mismatched tab/panel order", function() {
 	location.hash = "#";
 });
 
-test( "{ collapsible: false }", function() {
-	expect( 4 );
-
-	var element = $( "#tabs1" ).tabs({
-		active: 1
-	});
-	element.tabs( "option", "active", false );
-	equal( element.tabs( "option", "active" ), 1 );
-	state( element, 0, 1, 0 );
-
-	element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click();
-	equal( element.tabs( "option", "active" ), 1 );
-	state( element, 0, 1, 0 );
-});
-
-test( "{ collapsible: true }", function() {
-	expect( 6 );
+test( "collapsible", function() {
+	expect( 13 );
 
 	var element = $( "#tabs1" ).tabs({
 		active: 1,
 		collapsible: true
 	});
+	ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );
 
 	element.tabs( "option", "active", false );
 	equal( element.tabs( "option", "active" ), false );
@@ -141,6 +127,24 @@ test( "{ collapsible: true }", function() {
 	element.find( ".ui-state-active .ui-tabs-anchor" ).click();
 	equal( element.tabs( "option", "active" ), false );
 	state( element, 0, 0, 0 );
+
+	element.tabs( "option", "collapsible", false );
+	ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" );
+
+	element.tabs( "option", "collapsible", true );
+	ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );
+
+	element.tabs({
+		active: 1,
+		collapsible: false
+	});
+	element.tabs( "option", "active", false );
+	equal( element.tabs( "option", "active" ), 1 );
+	state( element, 0, 1, 0 );
+
+	element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click();
+	equal( element.tabs( "option", "active" ), 1 );
+	state( element, 0, 1, 0 );
 });
 
 test( "disabled", function() {