Skip to content

Commit

Permalink
Merge branch 'master' into dkamburov/fix-6973
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChronosSF
ChronosSF authored Apr 14, 2020
2 parents 015509c + 008bdd1 commit e9fcc1f
Show file tree
Hide file tree
Showing 5 changed files with 239 additions and 68 deletions.
13 changes: 13 additions & 0 deletions projects/igniteui-angular/src/lib/tabbar/bottom-nav-routing-test-guard.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class BottomNavRoutingTestGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (state.url === '/view5') {
return false;
} else {
return true;
}
}
}
18 changes: 16 additions & 2 deletions projects/igniteui-angular/src/lib/tabbar/routing-view-components.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,26 @@ export class BottomNavRoutingView2Component {
export class BottomNavRoutingView3Component {
}

@Component({
template: `This is a content from view component # 4`
})
export class BottomNavRoutingView4Component {
}

@Component({
template: `This is a content from view component # 5`
})
export class BottomNavRoutingView5Component {
}

/**
* @hidden
*/
@NgModule({
declarations: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
exports: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
declarations: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component,
BottomNavRoutingView4Component, BottomNavRoutingView5Component],
exports: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component,
BottomNavRoutingView4Component, BottomNavRoutingView5Component]
})
export class BottomNavRoutingViewComponentsModule {
}
10 changes: 7 additions & 3 deletions projects/igniteui-angular/src/lib/tabbar/tab-bar-content.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@
<ng-content></ng-content>
</div>
<div #tablist class="{{itemStyle}}__menu {{itemStyle}}__menu--bottom" role="tablist" aria-orientation="horizontal">
<ng-container *ngIf="!hasContentTabs">
<igx-tab *ngFor="let panel of panels" [relatedPanel]="panel">
<ng-container *ngIf="!hasContentTabs">
<igx-tab *ngFor="let panel of panels; let i = index"
[relatedPanel]="panel"
[autoGenerated]="true"
[id]="getTabId(i)"
[attr.aria-controls]="getTabPanelId(i)">>
</igx-tab>
</ng-container>
<ng-content select="igx-tab"></ng-content>
</div>
</div>
177 changes: 138 additions & 39 deletions projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@ import { configureTestSuite } from '../test-utils/configure-suite';
import { BottomNavRoutingViewComponentsModule,
BottomNavRoutingView1Component,
BottomNavRoutingView2Component,
BottomNavRoutingView3Component } from './routing-view-components.spec';
BottomNavRoutingView3Component,
BottomNavRoutingView4Component,
BottomNavRoutingView5Component} from './routing-view-components.spec';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { UIInteractions } from '../test-utils/ui-interactions.spec';
import { BottomNavRoutingTestGuard } from './bottom-nav-routing-test-guard.spec';

describe('IgxBottomNav', () => {
configureTestSuite();
Expand All @@ -22,19 +25,61 @@ describe('IgxBottomNav', () => {

beforeAll(async(() => {
const testRoutes = [
{ path: 'view1', component: BottomNavRoutingView1Component },
{ path: 'view2', component: BottomNavRoutingView2Component },
{ path: 'view3', component: BottomNavRoutingView3Component }
{ path: 'view1', component: BottomNavRoutingView1Component, canActivate: [BottomNavRoutingTestGuard] },
{ path: 'view2', component: BottomNavRoutingView2Component, canActivate: [BottomNavRoutingTestGuard] },
{ path: 'view3', component: BottomNavRoutingView3Component, canActivate: [BottomNavRoutingTestGuard] },
{ path: 'view4', component: BottomNavRoutingView4Component, canActivate: [BottomNavRoutingTestGuard] },
{ path: 'view5', component: BottomNavRoutingView5Component, canActivate: [BottomNavRoutingTestGuard] },
];

TestBed.configureTestingModule({
declarations: [TabBarTestComponent, BottomTabBarTestComponent, TemplatedTabBarTestComponent, TabBarRoutingTestComponent,
TabBarTabsOnlyModeTestComponent],
imports: [IgxBottomNavModule, BottomNavRoutingViewComponentsModule, RouterTestingModule.withRoutes(testRoutes)]
TabBarTabsOnlyModeTestComponent, BottomNavRoutingGuardTestComponent, BottomNavTestHtmlAttributesComponent],
imports: [IgxBottomNavModule, BottomNavRoutingViewComponentsModule, RouterTestingModule.withRoutes(testRoutes)],
providers: [BottomNavRoutingTestGuard]
}).compileComponents();
}));

describe('IgxBottomNav Component with Panels Definitions', () => {
describe('Html Attributes', () => {
let fixture;
let tabbar;

beforeEach(async(() => {
fixture = TestBed.createComponent(BottomNavTestHtmlAttributesComponent);
tabbar = fixture.componentInstance.tabbar;
}));

it('should set the correct attributes on the html elements', () => {
fixture.detectChanges();

const igxBottomNavs = document.querySelectorAll('igx-bottom-nav');
expect(igxBottomNavs.length).toBe(2);

const startIndex = parseInt(igxBottomNavs[0].id.replace('igx-bottom-nav-', ''), 10);
for (let tabIndex = startIndex; tabIndex < startIndex + 2; tabIndex++) {
const tab = igxBottomNavs[tabIndex - startIndex];
expect(tab.id).toEqual(`igx-bottom-nav-${tabIndex}`);

const headers = tab.querySelectorAll('igx-tab');
const contents = tab.querySelectorAll('igx-tab-panel');
expect(headers.length).toBe(3);
expect(contents.length).toBe(3);

for (let itemIndex = 0; itemIndex < 3; itemIndex++) {
const headerId = `igx-tab-${tabIndex}-${itemIndex}`;
const contentId = `igx-tab-panel-${tabIndex}-${itemIndex}`;

expect(headers[itemIndex].id).toEqual(headerId);
expect(headers[itemIndex].getAttribute('aria-controls')).toEqual(contentId);

expect(contents[itemIndex].id).toEqual(contentId);
expect(contents[itemIndex].getAttribute('aria-labelledby')).toEqual(headerId);
}
}
});
});

describe('Component with Panels Definitions', () => {
let fixture;
let tabbar;

Expand Down Expand Up @@ -187,7 +232,7 @@ describe('IgxBottomNav', () => {

});

describe('BottomNav Component with Custom Template', () => {
describe('Component with Custom Template', () => {
let fixture;
let tabbar;

Expand Down Expand Up @@ -271,6 +316,33 @@ describe('IgxBottomNav', () => {
expect(theTabs[2].isSelected).toBe(false);
}));

it('should not navigate to an URL blocked by activate guard', fakeAsync(() => {
fixture = TestBed.createComponent(BottomNavRoutingGuardTestComponent);
bottomNav = fixture.componentInstance.bottomNavComp;
fixture.detectChanges();
theTabs = bottomNav.contentTabs.toArray();

fixture.ngZone.run(() => { router.initialNavigation(); });
tick();
expect(location.path()).toBe('/');

fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[0].elementRef()); });
tick();
expect(location.path()).toBe('/view1');
fixture.detectChanges();
expect(bottomNav.selectedIndex).toBe(0);
expect(theTabs[0].isSelected).toBe(true);
expect(theTabs[1].isSelected).toBe(false);

fixture.ngZone.run(() => { UIInteractions.clickElement(theTabs[1].elementRef()); });
tick();
expect(location.path()).toBe('/view1');
fixture.detectChanges();
expect(bottomNav.selectedIndex).toBe(0);
expect(theTabs[0].isSelected).toBe(true);
expect(theTabs[1].isSelected).toBe(false);
}));

});

describe('Tabs-only Mode Tests', () => {
Expand All @@ -295,38 +367,7 @@ describe('IgxBottomNav', () => {
expect(theTabs[2].isSelected).toBe(false);
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
});

it('should have the correct selection set even when no active link is present on the tabs', () => {
expect(theTabs[0].isSelected).toBe(false);
expect(theTabs[0].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
expect(theTabs[1].isSelected).toBe(true);
expect(theTabs[1].elementRef().nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
expect(theTabs[2].isSelected).toBe(false);
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);

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

expect(theTabs[0].isSelected).toBe(true);
expect(theTabs[0].elementRef().nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
expect(theTabs[1].isSelected).toBe(false);
expect(theTabs[1].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
expect(theTabs[2].isSelected).toBe(false);
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);

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

expect(theTabs[0].isSelected).toBe(false);
expect(theTabs[0].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
expect(theTabs[1].isSelected).toBe(false);
expect(theTabs[1].elementRef().nativeElement.classList.contains(tabItemNormalCssClass)).toBe(true);
expect(theTabs[2].isSelected).toBe(true);
expect(theTabs[2].elementRef().nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
});

});

});

@Component({
Expand Down Expand Up @@ -478,3 +519,61 @@ class TabBarTabsOnlyModeTestComponent {
@ViewChild(IgxBottomNavComponent, { static: true })
public bottomNavComp: IgxBottomNavComponent;
}

@Component({
template: `
<div #wrapperDiv>
<div>
<router-outlet></router-outlet>
</div>
<igx-bottom-nav>
<igx-tab label="Tab 1" icon="library_music"
routerLink="/view1" routerLinkActive #rla1="routerLinkActive" [isSelected]="rla1.isActive">
</igx-tab>
<igx-tab label="Tab 5" icon="library_books"
routerLink="/view5" routerLinkActive #rlaX="routerLinkActive" [isSelected]="rlaX.isActive">
</igx-tab>
</igx-bottom-nav>
</div>
`
})
class BottomNavRoutingGuardTestComponent {
@ViewChild(IgxBottomNavComponent, { static: true })
public bottomNavComp: IgxBottomNavComponent;
}

@Component({
template: `
<div>
<div>
<igx-bottom-nav>
<igx-tab-panel label="Tab 1">
<div>Content 1</div>
</igx-tab-panel>
<igx-tab-panel label="Tab 2">
<div>Content 2</div>
</igx-tab-panel>
<igx-tab-panel label="Tab 3">
<div>Content 3</div>
</igx-tab-panel>
</igx-bottom-nav>
</div>
<div>
<igx-bottom-nav>
<igx-tab-panel label="Tab 4">
<div>Content 4</div>
</igx-tab-panel>
<igx-tab-panel label="Tab 5">
<div>Content 5</div>
</igx-tab-panel>
<igx-tab-panel label="Tab 6">
<div>Content 6</div>
</igx-tab-panel>
</igx-bottom-nav>
</div>
</div>
`
})
class BottomNavTestHtmlAttributesComponent {
@ViewChild(IgxBottomNavComponent, { static: true }) public tabbar: IgxBottomNavComponent;
}
Loading

0 comments on commit e9fcc1f

Please sign in to comment.