library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alexander Schmitz 2015-01-30 11:00:44 -05:00
parent f7645783bf
commit b88a821070
2 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
tests/unit/tabs/tabs_core.js
View File

@ -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,7 +211,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( 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" );
@ -220,7 +219,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( 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" );

29
tests/unit/tabs/tabs_options.js
View File

@ -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,9 +145,10 @@ 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
@ -155,32 +156,32 @@ test( "disabled", function() {
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" );