Skip to content
Permalink
Browse files

Tabs: Use new has/lacksClasses assertions for all class checks

  • Loading branch information
arschmitz committed Jan 30, 2015
1 parent f764578 commit b88a8210707a0c88db381927d0da8cdde4402ef7
Showing with 44 additions and 44 deletions.
  1. +29 −30 tests/unit/tabs/tabs_core.js
  2. +15 −14 tests/unit/tabs/tabs_options.js
@@ -38,12 +38,11 @@ $.each({
"multiple lists, ol first": "#tabs5",
"empty list": "#tabs6"
}, function( type, selector ) {
test( "markup structure: " + type, function() {
test( "markup structure: " + type, function( assert ) {
expect( 2 );
var element = $( selector ).tabs();
ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" );
ok( $( selector + "-list" ).hasClass( "ui-tabs-nav" ),
"list item is .ui-tabs-nav" );
assert.hasClasses( element, "ui-tabs" );
assert.hasClasses( $( selector + "-list" ), "ui-tabs-nav" );
});
});

@@ -168,7 +167,7 @@ asyncTest( "accessibility - ajax", function( assert ) {
});
});

asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function() {
asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function( assert ) {
expect( 92 );
var element = $( "#tabs1" ).tabs({
collapsible: true
@@ -184,13 +183,13 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",

// down, right, down (wrap), up (wrap)
function step1() {
ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab has focus" );
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "first tab has focus" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );

tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next tab" );
ok( !tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab is no longer focused" );
assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "DOWN moves focus to next tab" );
assert.lacksClasses( tabs.eq( 0 ), "ui-state-focus", "first tab is no longer focused" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
@@ -201,7 +200,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );

tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "RIGHT moves focus to next tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
@@ -212,15 +211,15 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );

tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first tab" );
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "DOWN wraps focus to first tab" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" );
equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );

tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "UP wraps focus to last tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
@@ -245,7 +244,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );

tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous tab" );
assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "LEFT moves focus to previous tab" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
@@ -256,7 +255,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );

tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first tab" );
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "HOME moves focus to first tab" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
ok( panels.eq( 0 ).is( ":hidden" ), "first panel is still hidden" );
@@ -283,7 +282,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );

tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "END moves focus to last tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
@@ -326,7 +325,7 @@ $.each({
ctrl: "CTRL",
meta: "COMMAND"
}, function( modifier, label ) {
asyncTest( "keyboard support - " + label + " navigation", function() {
asyncTest( "keyboard support - " + label + " navigation", function( assert ) {
expect( 115 );
var element = $( "#tabs1" ).tabs(),
tabs = element.find( ".ui-tabs-nav li" ),
@@ -343,13 +342,13 @@ $.each({
var eventProperties = { keyCode: keyCode.DOWN };
eventProperties[ modifier + "Key" ] = true;

ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab has focus" );
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "first tab has focus" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );

tabs.eq( 0 ).simulate( "keydown", eventProperties );
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next tab" );
ok( !tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab is no longer focused" );
assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "DOWN moves focus to next tab" );
assert.lacksClasses( tabs.eq( 0 ), ".ui-state-focus", "first tab is no longer focused" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
@@ -376,7 +375,7 @@ $.each({
equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );

tabs.eq( 1 ).simulate( "keydown", eventProperties );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "RIGHT moves focus to next tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
@@ -403,7 +402,7 @@ $.each({
equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );

tabs.eq( 2 ).simulate( "keydown", eventProperties );
ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first tab" );
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "DOWN wraps focus to first tab" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" );
@@ -423,7 +422,7 @@ $.each({
equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );

tabs.eq( 0 ).simulate( "keydown", eventProperties );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "UP wraps focus to last tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
@@ -450,7 +449,7 @@ $.each({
equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );

tabs.eq( 2 ).simulate( "keydown", eventProperties );
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous tab" );
assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "LEFT moves focus to previous tab" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
@@ -477,7 +476,7 @@ $.each({
equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );

tabs.eq( 1 ).simulate( "keydown", eventProperties );
ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first tab" );
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "HOME moves focus to first tab" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
@@ -501,7 +500,7 @@ $.each({
equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );

tabs.eq( 0 ).simulate( "keydown", eventProperties );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "END moves focus to last tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
@@ -541,7 +540,7 @@ $.each({
});
});

asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() {
asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function( assert ) {
expect( 50 );
var element = $( "#tabs1" ).tabs(),
tabs = element.find( ".ui-tabs-nav li" ),
@@ -557,7 +556,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function()

panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" );
assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "ALT+PAGE_DOWN moves focus to next tab" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" );
equal( tabs.eq( 1 ).attr( "aria-expanded" ), "true", "second tab has aria-expanded=true" );
@@ -568,7 +567,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function()

tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "ALT+PAGE_DOWN moves focus to next tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
equal( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab has aria-expanded=true" );
@@ -579,7 +578,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function()

tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
strictEqual( document.activeElement, tabs[ 0 ], "first tab is activeElement" );
ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN wraps focus to first tab" );
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "ALT+PAGE_DOWN wraps focus to first tab" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" );
@@ -597,7 +596,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function()

panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } );
strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" );
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_UP wraps focus to last tab" );
assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "ALT+PAGE_UP wraps focus to last tab" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
equal( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab has aria-expanded=true" );
@@ -608,7 +607,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function()

tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } );
strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_UP moves focus to previous tab" );
assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "ALT+PAGE_UP moves focus to previous tab" );
equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" );
equal( tabs.eq( 1 ).attr( "aria-expanded" ), "true", "second tab has aria-expanded=true" );
@@ -107,15 +107,14 @@ test( "active - mismatched tab/panel order", function() {
location.hash = "#";
});

test( "collapsible", function() {
test( "collapsible", function( assert ) {
expect( 13 );

var element = $( "#tabs1" ).tabs({
active: 1,
collapsible: true
});
ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );

assert.hasClasses( element, "ui-tabs-collapsible" );
element.tabs( "option", "active", false );
equal( element.tabs( "option", "active" ), false );
state( element, 0, 0, 0 );
@@ -129,10 +128,11 @@ test( "collapsible", function() {
state( element, 0, 0, 0 );

element.tabs( "option", "collapsible", false );
ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" );
assert.lacksClasses( element, "ui-tabs-collapsible" );

element.tabs( "option", "collapsible", true );
ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );

assert.hasClasses( element, "ui-tabs-collapsible" );

element.tabs({
active: 1,
@@ -145,42 +145,43 @@ test( "collapsible", function() {
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() {
test( "disabled", function( assert ) {
expect( 23 );

// fully enabled by default
var event,
element = $( "#tabs1" ).tabs();
disabled( element, false );

ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );

// disable single tab
element.tabs( "option", "disabled", [ 1 ] );
disabled( element, [ 1 ] );

ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );

// disabled active tab
element.tabs( "option", "disabled", [ 0, 1 ] );
disabled( element, [ 0, 1 ] );

ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );

// disable all tabs
element.tabs( "option", "disabled", [ 0, 1, 2 ] );
disabled( element, true );

ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );

event = $.Event( "click" );

0 comments on commit b88a821

Please sign in to comment.
You can’t perform that action at this time.