Skip to content

Commit 09faa7c

Browse files
scottgonzalezscottgonzalez
committed
Tabs: Added more tests for refresh method and changed the implementation a bit.
1 parent 5d23e8e commit 09faa7c

File tree

2 files changed

+81
-71
lines changed

2 files changed

+81
-71
lines changed

‎tests/unit/tabs/tabs_methods.js

Lines changed: 67 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -85,55 +85,73 @@ test( "disable( index )", function() {
8585
tabs_disabled( element, true );
8686
});
8787

88-
test('refresh', function() {
89-
expect( 13 );
90-
91-
var el = $('<div id="tabs"><ul></ul></div>').tabs(),
92-
ul = el.find('ul');
93-
94-
equals(el.tabs('option', 'active'), false, 'Initially empty, no active tab');
95-
96-
ul.append('<li><a href="data/test.html">Test 1</a></li>');
97-
el.tabs('refresh');
98-
equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');
99-
ok( $( "li:eq(0)", el).is('.ui-tabs-active'), 'First tab should be auto active');
100-
equals( el.find('.ui-tabs-panel').length, 1, 'Panel created after refresh');
101-
102-
ul.find('li').remove();
103-
el.tabs('refresh');
104-
equals( el.find('.ui-tabs-panel').length, 0, 'Panel removed after refresh');
105-
equals( el.tabs('option', 'active'), false, 'No tabs are active');
106-
107-
// Hide second tab
108-
$('<li><a href="#test1">Test 1</a></li><li><a href="#test2">Test 2</a></li><li><a href="#test3">Test 3</a></li>')
109-
.appendTo( ul );
110-
$('<div id="test1">Test Panel 1</div><div id="test2">Test Panel 2</div><div id="test3">Test Panel 3</div>')
111-
.insertAfter( ul );
112-
el.tabs('refresh');
113-
equals( el.tabs('option', 'active'), 0, 'Second tab added should not be auto active');
114-
equals( $( "#test2", el ).css("display"), "none", 'Second panel is hidden');
115-
116-
// Make second tab active and then remove the first one
117-
el.tabs('option', 'active', 1);
118-
el.find('a[href="#test1"]').parent().remove();
119-
el.tabs('refresh');
120-
equals( el.tabs('option', 'active'), 0, 'Active index correctly updated');
121-
ok( el.find('a[href="#test2"]').parent().is('.ui-tabs-active'), 'Tab is still active');
122-
123-
// Refresh with disabled tabs
124-
el.tabs('disable', 1);
125-
same( el.tabs('option', 'disabled'), [ 1 ], 'Second tab disabled');
126-
127-
el.find('a[href="#test3"]').remove();
128-
ul.append('<li><a href="#test4">Test 4</a></li>');
129-
$('<div id="test4">Test Panel 4</div>').insertAfter( ul );
130-
el.tabs('refresh');
131-
equals( el.tabs('option', 'disabled'), false, 'Not disabled');
132-
133-
ul.append('<li class="ui-state-disabled"><a href="#test3">Test 3</a></li>');
134-
$('<div id="test3">Test Panel 3</div>').insertAfter( ul );
135-
el.tabs('refresh');
136-
same( el.tabs('option', 'disabled'), [ 2 ], 'Second tab disabled');
88+
test( "refersh", function() {
89+
expect( 27 );
90+
91+
var element = $( "#tabs1" ).tabs();
92+
tabs_state( element, 1, 0, 0 );
93+
tabs_disabled( element, false );
94+
95+
// disable tab via markup
96+
element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" );
97+
element.tabs( "refresh" );
98+
tabs_state( element, 1, 0, 0 );
99+
tabs_disabled( element, [ 1 ] );
100+
101+
// add remote tab
102+
element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" );
103+
element.tabs( "refresh" );
104+
tabs_state( element, 1, 0, 0, 0 );
105+
tabs_disabled( element, [ 1 ] );
106+
equals( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1,
107+
"panel added for remote tab" );
108+
109+
// remove all tabs
110+
element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove();
111+
element.tabs( "refresh" );
112+
tabs_state( element );
113+
equals( element.tabs( "option", "active" ), false, "no active tab" );
114+
115+
// add tabs
116+
element.find( ".ui-tabs-nav" )
117+
.append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" )
118+
.append( "<li><a href='#newTab3'>new 3</a></li>" )
119+
.append( "<li><a href='#newTab4'>new 4</a></li>" )
120+
.append( "<li><a href='#newTab5'>new 5</a></li>" );
121+
element
122+
.append( "<div id='newTab2'>new 2</div>" )
123+
.append( "<div id='newTab3'>new 3</div>" )
124+
.append( "<div id='newTab4'>new 4</div>" )
125+
.append( "<div id='newTab5'>new 5</div>" );
126+
element.tabs( "refresh" );
127+
tabs_state( element, 0, 0, 0, 0 );
128+
tabs_disabled( element, [ 0 ] );
129+
130+
// activate third tab
131+
element.tabs( "option", "active", 2 );
132+
tabs_state( element, 0, 0, 1, 0 );
133+
tabs_disabled( element, [ 0 ] );
134+
135+
// remove fourth tab, third tab should stay active
136+
element.find( ".ui-tabs-nav li" ).eq( 3 ).remove();
137+
element.find( ".ui-tabs-panel" ).eq( 3 ).remove();
138+
element.tabs( "refresh" );
139+
tabs_state( element, 0, 0, 1 );
140+
tabs_disabled( element, [ 0 ] );
141+
142+
// remove third (active) tab, second tab should become active
143+
element.find( ".ui-tabs-nav li" ).eq( 2 ).remove();
144+
element.find( ".ui-tabs-panel" ).eq( 2 ).remove();
145+
element.tabs( "refresh" );
146+
tabs_state( element, 0, 1 );
147+
tabs_disabled( element, [ 0 ] );
148+
149+
// remove first tab, previously active tab (now first) should stay active
150+
element.find( ".ui-tabs-nav li" ).eq( 0 ).remove();
151+
element.find( ".ui-tabs-panel" ).eq( 0 ).remove();
152+
element.tabs( "refresh" );
153+
tabs_state( element, 1 );
154+
tabs_disabled( element, false );
137155
});
138156

139157
test('load', function() {

‎ui/jquery.ui.tabs.js

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -172,51 +172,43 @@ $.widget( "ui.tabs", {
172172
refresh: function() {
173173
var self = this,
174174
options = this.options,
175-
lis = $( " > li:has(a[href])", this.list );
175+
lis = this.list.children( ":has(a[href])" );
176176

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

182183
this._processTabs();
183-
184184
this._refresh();
185-
186-
// Remove panels that we created that are missing their tab
187-
this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) {
188-
var anchor = self.anchors.filter( "[aria-controls='" + panel.id + "']");
189-
if ( !anchor.length ) {
190-
$( panel ).remove();
191-
}
192-
});
193-
194185
this.panels.not( this._getPanelForTab( this.active ) ).hide();
195186

196-
if ( !this.anchors.length ) {
187+
// was collapsed or no tabs
188+
if ( options.active === false || !this.anchors.length ) {
197189
options.active = false;
198190
this.active = $();
199-
} else if ( !this.active || ( this.active && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) ) {
200-
// Activate previous tab
191+
// was active, but active tab is gone
192+
} else if ( this.active.length && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) {
193+
// activate previous tab
201194
var next = options.active - 1;
202195
this._activate( next >= 0 ? next : 0 );
196+
// was active, active tab still exists
203197
} else {
204-
// Make sure active index is correct
198+
// make sure active index is correct
205199
options.active = this.anchors.index( this.active );
206200
}
207201
},
208202

209203
_refresh: function() {
210-
var that = this,
211-
options = that.options;
204+
var options = this.options;
212205

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

218211
this._setupDisabled( options.disabled );
219-
220212
this._setupEvents( options.event );
221213

222214
// remove all handlers, may run on existing tabs

0 commit comments

Comments
 (0)