Skip to content

Commit 117dddc

Browse files
rmkrmkrmkrmk
committed
test(tabs/bottomNav): optimizing tests #4297 
1 parent 1f64645 commit 117dddc

File tree

3 files changed

+36
-28
lines changed

3 files changed

+36
-28
lines changed

‎projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts

+26-20
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,15 @@ import { BottomNavRoutingViewComponentsModule,
1212
BottomNavRoutingView3Component } from './routing-view-components.spec';
1313
import { Router } from '@angular/router';
1414
import { Location } from '@angular/common';
15+
import { UIInteractions } from '../test-utils/ui-interactions.spec';
1516

1617
describe('TabBar', () => {
1718
configureTestSuite();
18-
beforeEach(async(() => {
1919

20+
const tabItemNormalCssClass = 'igx-bottom-nav__menu-item';
21+
const tabItemSelectedCssClass = 'igx-bottom-nav__menu-item--selected';
22+
23+
beforeEach(async(() => {
2024
const testRoutes = [
2125
{ path: 'view1', component: BottomNavRoutingView1Component },
2226
{ path: 'view2', component: BottomNavRoutingView2Component },
@@ -162,8 +166,6 @@ describe('TabBar', () => {
162166
});
163167

164168
describe('Routing Navigation Tests', () => {
165-
configureTestSuite();
166-
167169
let router;
168170
let location;
169171
let fixture;
@@ -184,15 +186,15 @@ describe('TabBar', () => {
184186
tick();
185187
expect(location.path()).toBe('/');
186188

187-
fixture.ngZone.run(() => { theTabs[2].elementRef().nativeElement.dispatchEvent(new Event('click')); });
189+
fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[2].elementRef()); });
188190
tick();
189191
expect(location.path()).toBe('/view3');
190192

191-
fixture.ngZone.run(() => { theTabs[1].elementRef().nativeElement.dispatchEvent(new Event('click')); });
193+
fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[1].elementRef()); });
192194
tick();
193195
expect(location.path()).toBe('/view2');
194196

195-
fixture.ngZone.run(() => { theTabs[0].elementRef().nativeElement.dispatchEvent(new Event('click')); });
197+
fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[0].elementRef()); });
196198
tick();
197199
expect(location.path()).toBe('/view1');
198200
}));
@@ -208,27 +210,31 @@ describe('TabBar', () => {
208210
fixture.detectChanges();
209211
expect(bottomNav.selectedIndex).toBe(2);
210212
expect(theTabs[2].isSelected).toBe(true);
213+
expect(theTabs[0].isSelected).toBe(false);
214+
expect(theTabs[1].isSelected).toBe(false);
211215

212216
fixture.ngZone.run(() => { router.navigate(['/view2']); });
213217
tick();
214218
expect(location.path()).toBe('/view2');
215219
fixture.detectChanges();
216220
expect(bottomNav.selectedIndex).toBe(1);
217221
expect(theTabs[1].isSelected).toBe(true);
222+
expect(theTabs[0].isSelected).toBe(false);
223+
expect(theTabs[2].isSelected).toBe(false);
218224

219225
fixture.ngZone.run(() => { router.navigate(['/view1']); });
220226
tick();
221227
expect(location.path()).toBe('/view1');
222228
fixture.detectChanges();
223229
expect(bottomNav.selectedIndex).toBe(0);
224230
expect(theTabs[0].isSelected).toBe(true);
231+
expect(theTabs[1].isSelected).toBe(false);
232+
expect(theTabs[2].isSelected).toBe(false);
225233
}));
226234

227235
});
228236

229237
describe('Tabs-only Mode Tests', () => {
230-
configureTestSuite();
231-
232238
let fixture;
233239
let bottomNav;
234240
let theTabs;
@@ -242,42 +248,42 @@ describe('TabBar', () => {
242248

243249
it('should retain the correct initial selection status', () => {
244250
expect(theTabs[0].isSelected).toBe(false);
245-
expect(theTabs[0].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
251+
expect(theTabs[0].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
246252

247253
expect(theTabs[1].isSelected).toBe(true);
248-
expect(theTabs[1].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item--selected')).toBe(true);
254+
expect(theTabs[1].elementRef().nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
249255

250256
expect(theTabs[2].isSelected).toBe(false);
251-
expect(theTabs[2].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
257+
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
252258
});
253259

254260
it('should have the correct selection set even when no active link is present on the tabs', () => {
255261
expect(theTabs[0].isSelected).toBe(false);
256-
expect(theTabs[0].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
262+
expect(theTabs[0].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
257263
expect(theTabs[1].isSelected).toBe(true);
258-
expect(theTabs[1].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item--selected')).toBe(true);
264+
expect(theTabs[1].elementRef().nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
259265
expect(theTabs[2].isSelected).toBe(false);
260-
expect(theTabs[2].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
266+
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
261267

262268
theTabs[0].elementRef().nativeElement.dispatchEvent(new Event('click'));
263269
fixture.detectChanges();
264270

265271
expect(theTabs[0].isSelected).toBe(true);
266-
expect(theTabs[0].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item--selected')).toBe(true);
272+
expect(theTabs[0].elementRef().nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
267273
expect(theTabs[1].isSelected).toBe(false);
268-
expect(theTabs[1].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
274+
expect(theTabs[1].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
269275
expect(theTabs[2].isSelected).toBe(false);
270-
expect(theTabs[2].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
276+
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
271277

272278
theTabs[2].elementRef().nativeElement.dispatchEvent(new Event('click'));
273279
fixture.detectChanges();
274280

275281
expect(theTabs[0].isSelected).toBe(false);
276-
expect(theTabs[0].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
282+
expect(theTabs[0].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
277283
expect(theTabs[1].isSelected).toBe(false);
278-
expect(theTabs[1].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
284+
expect(theTabs[1].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
279285
expect(theTabs[2].isSelected).toBe(true);
280-
expect(theTabs[2].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item--selected')).toBe(true);
286+
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
281287
});
282288

283289
});

‎projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -415,8 +415,6 @@ describe('IgxTabs', () => {
415415
}));
416416

417417
describe('Routing Navigation Tests', () => {
418-
configureTestSuite();
419-
420418
let router;
421419
let location;
422420
let fixture;
@@ -437,15 +435,15 @@ describe('IgxTabs', () => {
437435
tick();
438436
expect(location.path()).toBe('/');
439437

440-
fixture.ngZone.run(() => { theTabs[2].nativeTabItem.nativeElement.dispatchEvent(new Event('click')); });
438+
fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[2].nativeTabItem); });
441439
tick();
442440
expect(location.path()).toBe('/view3');
443441

444-
fixture.ngZone.run(() => { theTabs[1].nativeTabItem.nativeElement.dispatchEvent(new Event('click')); });
442+
fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[1].nativeTabItem); });
445443
tick();
446444
expect(location.path()).toBe('/view2');
447445

448-
fixture.ngZone.run(() => { theTabs[0].nativeTabItem.nativeElement.dispatchEvent(new Event('click')); });
446+
fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[0].nativeTabItem); });
449447
tick();
450448
expect(location.path()).toBe('/view1');
451449
}));
@@ -461,27 +459,31 @@ describe('IgxTabs', () => {
461459
fixture.detectChanges();
462460
expect(tabsComp.selectedIndex).toBe(2);
463461
expect(theTabs[2].isSelected).toBe(true);
462+
expect(theTabs[0].isSelected).toBe(false);
463+
expect(theTabs[1].isSelected).toBe(false);
464464

465465
fixture.ngZone.run(() => { router.navigate(['/view2']); });
466466
tick();
467467
expect(location.path()).toBe('/view2');
468468
fixture.detectChanges();
469469
expect(tabsComp.selectedIndex).toBe(1);
470470
expect(theTabs[1].isSelected).toBe(true);
471+
expect(theTabs[0].isSelected).toBe(false);
472+
expect(theTabs[2].isSelected).toBe(false);
471473

472474
fixture.ngZone.run(() => { router.navigate(['/view1']); });
473475
tick();
474476
expect(location.path()).toBe('/view1');
475477
fixture.detectChanges();
476478
expect(tabsComp.selectedIndex).toBe(0);
477479
expect(theTabs[0].isSelected).toBe(true);
480+
expect(theTabs[1].isSelected).toBe(false);
481+
expect(theTabs[2].isSelected).toBe(false);
478482
}));
479483

480484
});
481485

482486
describe('Tabs-only Mode Tests', () => {
483-
configureTestSuite();
484-
485487
let fixture;
486488
let tabsComp;
487489
let theTabs;

‎projects/igniteui-angular/src/lib/tabs/tabs.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
316316
*/
317317
public ngAfterViewInit() {
318318
if (this.hasContentTabs) {
319-
// in content tabs mode there there is not first tab selected by default
319+
// in content tabs mode no tab is selected by default
320320
this._selectedIndex = -1;
321321
}
322322

0 commit comments

Comments
 (0)