Skip to content

Commit

Permalink
Tabs: Added more tests for refresh method and changed the implementat…
Browse files Browse the repository at this point in the history 
…ion a bit.
  • Loading branch information
@scottgonzalez
scottgonzalez committed Apr 28, 2011
1 parent 5d23e8e commit 09faa7c
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 71 deletions.
116 changes: 67 additions & 49 deletions tests/unit/tabs/tabs_methods.js
View file
Expand Up @@ -85,55 +85,73 @@ test( "disable( index )", function() {
tabs_disabled( element, true );
});

test('refresh', function() {
expect( 13 );

var el = $('<div id="tabs"><ul></ul></div>').tabs(),
ul = el.find('ul');

equals(el.tabs('option', 'active'), false, 'Initially empty, no active tab');

ul.append('<li><a href="data/test.html">Test 1</a></li>');
el.tabs('refresh');
equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');
ok( $( "li:eq(0)", el).is('.ui-tabs-active'), 'First tab should be auto active');
equals( el.find('.ui-tabs-panel').length, 1, 'Panel created after refresh');

ul.find('li').remove();
el.tabs('refresh');
equals( el.find('.ui-tabs-panel').length, 0, 'Panel removed after refresh');
equals( el.tabs('option', 'active'), false, 'No tabs are active');

// Hide second tab
$('<li><a href="#test1">Test 1</a></li><li><a href="#test2">Test 2</a></li><li><a href="#test3">Test 3</a></li>')
.appendTo( ul );
$('<div id="test1">Test Panel 1</div><div id="test2">Test Panel 2</div><div id="test3">Test Panel 3</div>')
.insertAfter( ul );
el.tabs('refresh');
equals( el.tabs('option', 'active'), 0, 'Second tab added should not be auto active');
equals( $( "#test2", el ).css("display"), "none", 'Second panel is hidden');

// Make second tab active and then remove the first one
el.tabs('option', 'active', 1);
el.find('a[href="#test1"]').parent().remove();
el.tabs('refresh');
equals( el.tabs('option', 'active'), 0, 'Active index correctly updated');
ok( el.find('a[href="#test2"]').parent().is('.ui-tabs-active'), 'Tab is still active');

// Refresh with disabled tabs
el.tabs('disable', 1);
same( el.tabs('option', 'disabled'), [ 1 ], 'Second tab disabled');

el.find('a[href="#test3"]').remove();
ul.append('<li><a href="#test4">Test 4</a></li>');
$('<div id="test4">Test Panel 4</div>').insertAfter( ul );
el.tabs('refresh');
equals( el.tabs('option', 'disabled'), false, 'Not disabled');

ul.append('<li class="ui-state-disabled"><a href="#test3">Test 3</a></li>');
$('<div id="test3">Test Panel 3</div>').insertAfter( ul );
el.tabs('refresh');
same( el.tabs('option', 'disabled'), [ 2 ], 'Second tab disabled');
test( "refersh", function() {
expect( 27 );

var element = $( "#tabs1" ).tabs();
tabs_state( element, 1, 0, 0 );
tabs_disabled( element, false );

// disable tab via markup
element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" );
element.tabs( "refresh" );
tabs_state( element, 1, 0, 0 );
tabs_disabled( element, [ 1 ] );

// add remote tab
element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" );
element.tabs( "refresh" );
tabs_state( element, 1, 0, 0, 0 );
tabs_disabled( element, [ 1 ] );
equals( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1,
"panel added for remote tab" );

// remove all tabs
element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove();
element.tabs( "refresh" );
tabs_state( element );
equals( element.tabs( "option", "active" ), false, "no active tab" );

// add tabs
element.find( ".ui-tabs-nav" )
.append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" )
.append( "<li><a href='#newTab3'>new 3</a></li>" )
.append( "<li><a href='#newTab4'>new 4</a></li>" )
.append( "<li><a href='#newTab5'>new 5</a></li>" );
element
.append( "<div id='newTab2'>new 2</div>" )
.append( "<div id='newTab3'>new 3</div>" )
.append( "<div id='newTab4'>new 4</div>" )
.append( "<div id='newTab5'>new 5</div>" );
element.tabs( "refresh" );
tabs_state( element, 0, 0, 0, 0 );
tabs_disabled( element, [ 0 ] );

// activate third tab
element.tabs( "option", "active", 2 );
tabs_state( element, 0, 0, 1, 0 );
tabs_disabled( element, [ 0 ] );

// remove fourth tab, third tab should stay active
element.find( ".ui-tabs-nav li" ).eq( 3 ).remove();
element.find( ".ui-tabs-panel" ).eq( 3 ).remove();
element.tabs( "refresh" );
tabs_state( element, 0, 0, 1 );
tabs_disabled( element, [ 0 ] );

// remove third (active) tab, second tab should become active
element.find( ".ui-tabs-nav li" ).eq( 2 ).remove();
element.find( ".ui-tabs-panel" ).eq( 2 ).remove();
element.tabs( "refresh" );
tabs_state( element, 0, 1 );
tabs_disabled( element, [ 0 ] );

// remove first tab, previously active tab (now first) should stay active
element.find( ".ui-tabs-nav li" ).eq( 0 ).remove();
element.find( ".ui-tabs-panel" ).eq( 0 ).remove();
element.tabs( "refresh" );
tabs_state( element, 1 );
tabs_disabled( element, false );
});

test('load', function() {
Expand Down
36 changes: 14 additions & 22 deletions ui/jquery.ui.tabs.js
View file
Expand Up @@ -172,51 +172,43 @@ $.widget( "ui.tabs", {
refresh: function() {
var self = this,
options = this.options,
lis = $( " > li:has(a[href])", this.list );
lis = this.list.children( ":has(a[href])" );

// Get disabled tabs from class attribute from HTML
options.disabled = $.map( lis.filter( ".ui-state-disabled" ), function( n ) {
return lis.index( n );
// get disabled tabs from class attribute from HTML
// this will get converted to a boolean if needed in _refresh()
options.disabled = $.map( lis.filter( ".ui-state-disabled" ), function( tab ) {
return lis.index( tab );
});

this._processTabs();

this._refresh();

// Remove panels that we created that are missing their tab
this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) {
var anchor = self.anchors.filter( "[aria-controls='" + panel.id + "']");
if ( !anchor.length ) {
$( panel ).remove();
}
});

this.panels.not( this._getPanelForTab( this.active ) ).hide();

if ( !this.anchors.length ) {
// was collapsed or no tabs
if ( options.active === false || !this.anchors.length ) {
options.active = false;
this.active = $();
} else if ( !this.active || ( this.active && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) ) {
// Activate previous tab
// was active, but active tab is gone
} else if ( this.active.length && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) {
// activate previous tab
var next = options.active - 1;
this._activate( next >= 0 ? next : 0 );
// was active, active tab still exists
} else {
// Make sure active index is correct
// make sure active index is correct
options.active = this.anchors.index( this.active );
}
},

_refresh: function() {
var that = this,
options = that.options;
var options = this.options;

this.element.toggleClass( "ui-tabs-collapsible", options.collapsible );
this.list.addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );
this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );
this.lis.addClass( "ui-state-default ui-corner-top" );
this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );

this._setupDisabled( options.disabled );

this._setupEvents( options.event );

// remove all handlers, may run on existing tabs
Expand Down

0 comments on commit 09faa7c

Please sign in to comment.