Tabs: Better tests for tab state.

Author: scottgonzalez

tests/unit/tabs/tabs.html

@@ -30,7 +30,19 @@
 	function tabs_state( tabs ) {
 		var expected = $.makeArray( arguments ).slice( 1 );
 		var actual = tabs.find( ".ui-tabs-nav li" ).map(function() {
-			return $( this ).hasClass( "ui-state-active" ) ? 1 : 0;
+			var tab = $( this ),
+				panel = $( $.ui.tabs.prototype._sanitizeSelector(
+					"#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
+				tabIsActive = tab.hasClass( "ui-state-active" ),
+				panelIsActive = panel.is( ":visible" );
+
+			if ( tabIsActive && panelIsActive ) {
+				return 1;
+			}
+			if ( !tabIsActive && !panelIsActive ) {
+				return 0;
+			}
+			return -1; // mixed state - invalid
 		}).get();
 		same( actual, expected );
 	}

tests/unit/tabs/tabs_deprecated.html

@@ -29,7 +29,19 @@
 	function tabs_state( tabs ) {
 		var expected = $.makeArray( arguments ).slice( 1 );
 		var actual = tabs.find( ".ui-tabs-nav li" ).map(function() {
-			return $( this ).hasClass( "ui-state-active" ) ? 1 : 0;
+			var tab = $( this ),
+				panel = $( $.ui.tabs.prototype._sanitizeSelector(
+					"#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
+				tabIsActive = tab.hasClass( "ui-state-active" ),
+				panelIsActive = panel.is( ":visible" );
+
+			if ( tabIsActive && panelIsActive ) {
+				return 1;
+			}
+			if ( !tabIsActive && !panelIsActive ) {
+				return 0;
+			}
+			return -1; // mixed state - invalid
 		}).get();
 		same( actual, expected );
 	}

tests/unit/tabs/tabs_methods.js

@@ -1,61 +1,6 @@
-/*
- * tabs_methods.js
- */
-(function($) {
+(function( $ ) {
 
-module("tabs: methods");
-
-test('init', function() {
-	expect(9);
-
-	el = $('#tabs1').tabs();
-
-	ok(true, '.tabs() called on element');
-	ok( el.is('.ui-tabs.ui-widget.ui-widget-content.ui-corner-all'), 'attach classes to container');
-	ok( $('ul', el).is('.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all'), 'attach classes to list' );
-	ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' );
-	ok( $('li:eq(0)', el).is('.ui-tabs-active.ui-state-active.ui-corner-top'), 'attach classes to active li');
-	ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li');
-	equals( el.tabs('option', 'active'), 0, 'active option set' );
-	equals( $('li', el).index( $('li.ui-tabs-active', el) ), 0, 'second tab active');
-	equals( $('div', el).index( $('div:hidden', '#tabs1') ), 1, 'second panel should be hidden' );
-});
-
-test('init with hash', function() {
-	expect(5);
-	
-	//set a hash in the url
-	location.hash = '#fragment-2';
-	
-	//selection of tab with divs ordered differently than list
-	el = $('#tabs1').tabs();
-	
-	equals(el.tabs('option', 'active'), 1, 'second tab should be active');
-	
-	ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-active.ui-state-active'), 'first tab should not be selected nor active');
-	ok($('#tabs1 div:eq(0)').is(':hidden'), 'first div for first tab should be hidden');
-	
-	ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-active.ui-state-active'), 'second tab should be selected and active');
-	ok(!$('#tabs1 div:eq(1)').is(':hidden'), 'second div for second tab should not be hidden');
-});
-
-test('init mismatched order with hash', function() {
-	expect(5);
-	
-	//set a hash in the url
-	location.hash = '#tabs7-2';
-	
-	//selection of tab with divs ordered differently than list
-	el = $('#tabs7').tabs();
-	
-	equals(el.tabs('option', 'active'), 1, 'second tab should be active');
-	
-	ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-active.ui-state-active'), 'first tab should not be selected nor active');
-	ok($('#tabs7 div:eq(1)').is(':hidden'), 'second div for first tab should be hidden');
-	
-	ok($('#tabs7-list li:eq(1)').is('.ui-tabs-active.ui-state-active'), 'second tab should be selected and active');
-	ok(!$('#tabs7 div:eq(0)').is(':hidden'), 'first div for second tab should not be hidden');
-});
+module( "tabs: methods" );
 
 test('destroy', function() {
 	expect(6);
@@ -162,4 +107,4 @@ test('load', function() {
 	ok(false, "missing test - untested code is broken code.");
 });
 
-})(jQuery);
+}( jQuery ) );

tests/unit/tabs/tabs_options.js

@@ -10,10 +10,11 @@ test( "{ active: default }", function() {
 	tabs_state( element, 1, 0, 0 );
 	element.tabs( "destroy" );
 
-	window.location.hash = "#fragment-3";
+	location.hash = "#fragment-3";
 	element = $( "#tabs1" ).tabs();
 	equals( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
 	tabs_state( element, 0, 0, 1 );
+	element.tabs( "destroy" );
 });
 
 test( "{ active: false }", function() {
@@ -83,6 +84,17 @@ if ( $.uiBackCompat === false ) {
 	});
 }
 
+test( "active - mismatched tab/panel order", function() {
+	expect( 3 );
+
+	location.hash = "#tabs7-2";
+	var element = $( "#tabs7" ).tabs();
+	equals( element.tabs( "option", "active" ), 1, "should be 1 based on URL" );
+	tabs_state( element, 0, 1 );
+	element.tabs( "option", "active", 0 );
+	tabs_state( element, 1, 0 );	
+});
+
 test( "{ collapsible: false }", function() {
 	expect( 4 );