jquery-ui/tests/unit/tabs/tabs_deprecated.js

409 lines
12 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

(function( $ ) {
module("tabs (deprecated): core");
test( "panel ids", function() {
expect( 2 );
var element = $( "#tabs2" ).tabs();
element.one( "tabsbeforeload", function( event, ui ) {
equal( ui.panel.attr( "id" ), "∫ßáö_Սե", "from title attribute" );
event.preventDefault();
});
element.tabs( "option", "active", 4 );
element.one( "tabsbeforeload", function( event, ui ) {
ok( /^ui-tabs-\d+$/.test( ui.panel.attr( "id" ) ), "generated id" );
event.preventDefault();
});
element.tabs( "option", "active", 2 );
});
module("tabs (deprecated): options");
test('ajaxOptions', function() {
ok(false, "missing test - untested code is broken code.");
});
test('cache', function() {
ok(false, "missing test - untested code is broken code.");
});
test('idPrefix', function() {
ok(false, "missing test - untested code is broken code.");
});
test('tabTemplate', function() {
ok(false, "missing test - untested code is broken code.");
});
test('panelTemplate', function() {
ok(false, "missing test - untested code is broken code.");
});
test('cookie', function() {
expect(6);
el = $('#tabs1');
var cookieName = 'tabs_test', cookieObj = { name: cookieName };
$.cookie(cookieName, null); // blank state
var cookie = function() {
return parseInt($.cookie(cookieName), 10);
};
el.tabs({ cookie: cookieObj });
equals(cookie(), 0, 'initial cookie value');
el.tabs('destroy');
el.tabs({ active: 1, cookie: cookieObj });
equals(cookie(), 1, 'initial cookie value, from active property');
el.tabs('option', 'active', 2);
equals(cookie(), 2, 'cookie value updated after activating');
el.tabs('destroy');
$.cookie(cookieName, 1);
el.tabs({ cookie: cookieObj });
equals(cookie(), 1, 'initial cookie value, from existing cookie');
el.tabs('destroy');
el.tabs({ cookie: cookieObj, collapsible: true });
el.tabs('option', 'active', false);
equals(cookie(), -1, 'cookie value for all tabs unselected');
el.tabs('destroy');
ok($.cookie(cookieName) === null, 'erase cookie after destroy');
});
test('spinner', function() {
expect(4);
stop();
el = $('#tabs2');
el.tabs({
selected: 2,
load: function() {
// spinner: default spinner
setTimeout(function() {
equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
el.tabs('destroy');
el.tabs({
selected: 2,
spinner: '<img src="spinner.gif" alt="">',
load: function() {
// spinner: image
equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
start();
}
});
}, 1);
}
});
});
test( "selected", function() {
expect( 19 );
var element = $( "#tabs1" ).tabs();
equals( element.tabs( "option", "selected" ), 0, "should be 0 by default" );
tabs_state( element, 1, 0, 0 );
element.tabs( "destroy" );
location.hash = "#fragment-3";
element = $( "#tabs1" ).tabs();
equals( element.tabs( "option", "selected" ), 2, "should be 2 based on URL" );
tabs_state( element, 0, 0, 1 );
element.tabs( "destroy" );
el = $('#tabs1').tabs({
selected: -1,
collapsible: true
});
tabs_state( element, 0, 0, 0 );
equal( element.find( ".ui-tabs-nav .ui-state-active" ).size(), 0, "no tabs selected" );
strictEqual( element.tabs( "option", "selected" ), -1 );
element.tabs( "option", "collapsible", false );
tabs_state( element, 1, 0, 0 );
equal( element.tabs( "option", "selected" ), 0 );
element.tabs( "destroy" );
element.tabs({
selected: -1
});
tabs_state( element, 1, 0, 0 );
strictEqual( element.tabs( "option", "selected" ), 0 );
element.tabs( "destroy" );
element.tabs({ selected: 2 });
equals( element.tabs( "option", "selected" ), 2 );
tabs_state( element, 0, 0, 1 );
element.tabs( "option", "selected", 0 );
equals( element.tabs( "option", "selected" ), 0 );
tabs_state( element, 1, 0, 0 );
element.find( ".ui-tabs-nav a" ).eq( 1 ).click();
equals( element.tabs( "option", "selected" ), 1 );
tabs_state( element, 0, 1, 0 );
element.tabs( "option", "selected", 10 );
equals( element.tabs( "option", "selected" ), 1 );
tabs_state( element, 0, 1, 0 );
location.hash = "#";
});
module( "tabs (deprecated): events" );
test( "enable", function() {
expect( 3 );
var element = $( "#tabs1" ).tabs({
disabled: [ 0, 1 ],
enable: function ( event, ui ) {
equals( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" );
equals( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" );
equals( ui.index, 1, "ui.index" );
}
});
element.tabs( "enable", 1 );
// shouldn't trigger event
element.tabs( "enable", 2 );
});
test( "disable", function() {
expect( 3 );
var element = $( "#tabs1" ).tabs({
disable: function ( event, ui ) {
equals( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" );
equals( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" );
equals( ui.index, 1, "ui.index" );
}
});
element.tabs( "disable", 1 );
// shouldn't trigger event
element.tabs( "disable", 1 );
});
test('show', function() {
expect(5);
var uiObj, eventObj;
el = $('#tabs1').tabs({
show: function(event, ui) {
uiObj = ui;
eventObj = event;
}
});
ok(uiObj !== undefined, 'trigger callback after initialization');
equals(uiObj.tab, $('a', el)[0], 'contain tab as DOM anchor element');
equals(uiObj.panel, $('div', el)[0], 'contain panel as DOM div element');
equals(uiObj.index, 0, 'contain index');
el.find( "li:eq(1) a" ).simulate( "click" );
equals( eventObj.originalEvent.type, "click", "show triggered by click" );
});
test('select', function() {
expect(7);
var eventObj;
el = $('#tabs1').tabs({
select: function(event, ui) {
ok(true, 'select triggered after initialization');
equals(this, el[0], "context of callback");
equals(event.type, 'tabsselect', 'event type in callback');
equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element');
equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element');
equals(ui.index, 1, 'contain index');
evenObj = event;
}
});
el.tabs('select', 1);
el.find( "li:eq(1) a" ).simulate( "click" );
equals( evenObj.originalEvent.type, "click", "select triggered by click" );
});
module( "tabs (deprecated): methods" );
test( "add", function() {
expect( 27 );
var element = $( "#tabs1" ).tabs();
tabs_state( element, 1, 0, 0 );
// add without index
element.one( "tabsadd", function( event, ui ) {
equal( ui.index, 3, "ui.index" );
equal( $( ui.tab ).text(), "New", "ui.tab" );
equal( ui.panel.id, "new", "ui.panel" );
});
element.tabs( "add", "#new", "New" );
tabs_state( element, 1, 0, 0, 0 );
var tab = element.find( ".ui-tabs-nav li" ).last(),
anchor = tab.find( "a" );
equals( tab.text(), "New", "label" );
equals( anchor.attr( "href" ), "#new", "href" );
equals( anchor.attr( "aria-controls" ), "new", "aria-controls" );
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
anchor.simulate( "mouseover" );
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
anchor.simulate( "click" );
tabs_state( element, 0, 0, 0, 1 );
// add remote tab with index
element.one( "tabsadd", function( event, ui ) {
equal( ui.index, 1, "ui.index" );
equal( $( ui.tab ).text(), "New Remote", "ui.tab" );
equal( ui.panel.id, $( ui.tab ).attr( "aria-controls" ), "ui.panel" );
});
element.tabs( "add", "data/test.html", "New Remote", 1 );
tabs_state( element, 0, 0, 0, 0, 1 );
tab = element.find( ".ui-tabs-nav li" ).eq( 1 );
anchor = tab.find( "a" );
equals( tab.text(), "New Remote", "label" );
equals( anchor.attr( "href" ), "data/test.html", "href" );
ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" );
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
anchor.simulate( "mouseover" );
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
anchor.simulate( "click" );
tabs_state( element, 0, 1, 0, 0, 0 );
// add to empty tab set
element = $( "<div><ul></ul></div>" ).tabs();
equals( element.tabs( "option", "active" ), false, "active: false on init" );
element.one( "tabsadd", function( event, ui ) {
equal( ui.index, 0, "ui.index" );
equal( $( ui.tab ).text(), "First", "ui.tab" );
equal( ui.panel.id, "first", "ui.panel" );
});
element.tabs( "add", "#first", "First" );
tabs_state( element, 1 );
equals( element.tabs( "option", "active" ), 0, "active: 0 after add" );
});
test( "#5069 - ui.tabs.add creates two tab panels when using a full URL", function() {
expect( 2 );
var element = $( "#tabs2" ).tabs();
equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
element.tabs( "add", "/new", "New" );
equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
});
test( "remove", function() {
expect( 17 );
var element = $( "#tabs1" ).tabs({ active: 1 });
tabs_state( element, 0, 1, 0 );
element.one( "tabsremove", function( event, ui ) {
equal( ui.index, -1, "ui.index" );
equal( $( ui.tab ).text(), "2", "ui.tab" );
equal( ui.panel.id, "fragment-2", "ui.panel" );
});
element.tabs( "remove", 1 );
tabs_state( element, 0, 1 );
equals( element.tabs( "option", "active" ), 1 );
equals( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0,
"remove correct list item" );
equals( element.find( "#fragment-2" ).length, 0, "remove correct panel" );
element.one( "tabsremove", function( event, ui ) {
equal( ui.index, -1, "ui.index" );
equal( $( ui.tab ).text(), "3", "ui.tab" );
equal( ui.panel.id, "fragment-3", "ui.panel" );
});
element.tabs( "remove", 1 );
tabs_state( element, 1 );
equals( element.tabs( "option", "active"), 0 );
element.one( "tabsremove", function( event, ui ) {
equal( ui.index, -1, "ui.index" );
equal( $( ui.tab ).text(), "1", "ui.tab" );
equal( ui.panel.id, "fragment-1", "ui.panel" );
});
element.tabs( "remove", 0 );
equals( element.tabs( "option", "active" ), false );
});
test( "select", function() {
expect( 23 );
var element = $( "#tabs1" ).tabs();
tabs_state( element, 1, 0, 0 );
element.tabs( "select", 1 );
tabs_state( element, 0, 1, 0 );
equals( element.tabs( "option", "active" ), 1, "active" );
equals( element.tabs( "option", "selected" ), 1, "selected" );
element.tabs( "destroy" );
element.tabs({ collapsible: true });
tabs_state( element, 1, 0, 0 );
element.tabs( "select", 0 );
tabs_state( element, 0, 0, 0 );
equals( element.tabs( "option", "active" ), false, "active" );
equals( element.tabs( "option", "selected" ), -1, "selected" );
element.tabs( "destroy" );
element.tabs({ collapsible: true });
element.tabs( "select", -1 );
tabs_state( element, 0, 0, 0 );
equals( element.tabs( "option", "active" ), false, "active" );
equals( element.tabs( "option", "selected" ), -1, "selected" );
element.tabs( "destroy" );
element.tabs();
tabs_state( element, 1, 0, 0 );
equals( element.tabs( "option", "active" ), 0, "active" );
equals( element.tabs( "option", "selected" ), 0, "selected" );
element.tabs( "select", 0 );
tabs_state( element, 1, 0, 0 );
equals( element.tabs( "option", "active" ), 0, "active" );
equals( element.tabs( "option", "selected" ), 0, "selected" );
element.tabs( "select", -1 );
tabs_state( element, 1, 0, 0 );
equals( element.tabs( "option", "active" ), 0, "active" );
equals( element.tabs( "option", "selected" ), 0, "selected" );
element.tabs( "select", "#fragment-2" );
tabs_state( element, 0, 1, 0 );
equals( element.tabs( "option", "active" ), 1, "active" );
equals( element.tabs( "option", "selected" ), 1, "selected" );
});
test( "length", function() {
expect( 2 );
equals( $( "#tabs1" ).tabs().tabs( "length" ), 3, "basic tabs" );
equals( $( "#tabs2" ).tabs().tabs( "length" ), 5, "ajax tabs with missing panels" );
});
test( "url", function() {
expect( 2 );
var element = $( "#tabs2" ).tabs(),
tab = element.find( "a" ).eq( 3 );
element.tabs( "url", 3, "data/test2.html" );
equals( tab.attr( "href" ), "data/test2.html", "href was updated" );
element.one( "tabsbeforeload", function( event, ui ) {
equals( ui.ajaxSettings.url, "data/test2.html", "ajaxSettings.url" );
event.preventDefault();
});
element.tabs( "option", "active", 3 );
});
}( jQuery ) );