feat(tabs): adding routing feature and test for tabs control #4297

Author: rmkrmk

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

@@ -169,11 +169,21 @@ export class IgxTabsGroupComponent implements IgxTabsGroupBase, AfterContentInit
      *```
      * @param focusDelay A number representing the expected delay.
      */
-    public select(focusDelay = 200, navigateToRoute = true): void {
+    public select(focusDelay = 200): void {
         if (this.disabled || this.isSelected) {
             return;
         }
+        if (this.routerLinkDirective) {
+            this.routerLinkDirective.onClick();
+        } else {
+            this._selectAndEmitEvent(focusDelay);
+        }
+    }
 
+    /**
+     * @hidden
+     */
+    public _selectAndEmitEvent(focusDelay = 200) {
         this.isSelected = true;
         this.relatedTab.tabindex = 0;
 
@@ -183,15 +193,9 @@ export class IgxTabsGroupComponent implements IgxTabsGroupBase, AfterContentInit
             }, focusDelay);
         }
         this.handleSelection();
-        if (navigateToRoute && this.routerLinkDirective) {
-            this.routerLinkDirective.onClick();
-        }
         this._tabs.onTabItemSelected.emit({ tab: this._tabs.tabs.toArray()[this.index], group: this });
     }
 
-    public _selectAndEmitEvent() {
-    }
-
     private handleSelection(): void {
         const tabElement = this.relatedTab.nativeTabItem.nativeElement;
 

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

@@ -413,71 +413,67 @@ describe('IgxTabs', () => {
         expect(indicator.nativeElement.style.width).toBe('90px');
     }));
 
-    fit('should navigate to the correct URL when clicking on tab buttons', fakeAsync(() => {
-
+    it('should navigate to the correct URL when clicking on tab buttons', fakeAsync(() => {
         const router = TestBed.get(Router);
         const location = TestBed.get(Location);
         const fixture = TestBed.createComponent(TabsRoutingTestComponent);
         const tabsComp = fixture.componentInstance.tabsComp;
         fixture.detectChanges();
 
         fixture.ngZone.run(() => { router.initialNavigation(); });
-
-        tick();
+        tick(200);
         expect(location.path()).toBe('/view1');
 
         fixture.ngZone.run(() => { tabsComp.tabs.toArray()[2].select(); });
-        tick();
+        tick(200);
         expect(location.path()).toBe('/view3');
 
         fixture.ngZone.run(() => { tabsComp.tabs.toArray()[1].select(); });
-        tick();
+        tick(200);
         expect(location.path()).toBe('/view2');
 
         fixture.ngZone.run(() => { tabsComp.tabs.toArray()[0].select(); });
-        tick();
+        tick(200);
         expect(location.path()).toBe('/view1');
     }));
 
-    fit('should select the correct tab button/panel when navigating an URL', fakeAsync(() => {
-
+    it('should select the correct tab button/panel when navigating an URL', fakeAsync(() => {
         const router = TestBed.get(Router);
         const location = TestBed.get(Location);
         const fixture = TestBed.createComponent(TabsRoutingTestComponent);
         const tabsComp = fixture.componentInstance.tabsComp;
         fixture.detectChanges();
 
         fixture.ngZone.run(() => { router.initialNavigation(); });
-        tick();
+        tick(300);
         expect(location.path()).toBe('/view1');
         expect(tabsComp.selectedIndex).toBe(0);
         expect(tabsComp.groups.toArray()[0].isSelected).toBe(true);
         expect(tabsComp.tabs.toArray()[0].isSelected).toBe(true);
 
         fixture.ngZone.run(() => { router.navigate(['/view3']); });
-        tick();
+        tick(300);
         expect(location.path()).toBe('/view3');
         fixture.detectChanges();
         expect(tabsComp.selectedIndex).toBe(2);
         expect(tabsComp.groups.toArray()[2].isSelected).toBe(true);
         expect(tabsComp.tabs.toArray()[2].isSelected).toBe(true);
 
         fixture.ngZone.run(() => { router.navigate(['/view2']); });
-        tick();
+        tick(300);
         expect(location.path()).toBe('/view2');
         fixture.detectChanges();
         expect(tabsComp.selectedIndex).toBe(1);
         expect(tabsComp.groups.toArray()[1].isSelected).toBe(true);
         expect(tabsComp.tabs.toArray()[1].isSelected).toBe(true);
 
         fixture.ngZone.run(() => { router.navigate(['/view1']); });
-        tick();
+        tick(300);
         expect(location.path()).toBe('/view1');
         fixture.detectChanges();
         expect(tabsComp.selectedIndex).toBe(0);
         expect(tabsComp.groups.toArray()[0].isSelected).toBe(true);
         expect(tabsComp.tabs.toArray()[0].isSelected).toBe(true);
-
     }));
 });
 

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

@@ -280,7 +280,8 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
      */
     public ngAfterViewInit() {
         // initially do not navigate to the route set on the tabs-groups to keep the url set by the user
-        this.setSelectedGroup(false);
+        this.navigationEndHandler(this);
+        this.setSelectedGroup();
         this._groupChanges$ = this.groups.changes.subscribe(() => {
             this.resetSelectionOnCollectionChanged();
         });
@@ -312,27 +313,18 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         if (this._groupChanges$) {
             this._groupChanges$.unsubscribe();
         }
+        if (this._navigationEndSubscription) {
+            this._navigationEndSubscription.unsubscribe();
+        }
     }
 
-    private setSelectedGroup(navigateToRoute = true): void {
+    private setSelectedGroup(): void {
         requestAnimationFrame(() => {
-            if (!navigateToRoute) {
-                navigateToRoute = true;
-                const groupsArray = this.groups.toArray();
-                for (let i = 0; i < groupsArray.length; i++) {
-                    if (groupsArray[i].routerLinkDirective &&
-                        this.router.url.startsWith(groupsArray[i].routerLinkDirective.urlTree.toString())) {
-                        this._selectedIndex = i;
-                        navigateToRoute = false;
-                        break;
-                    }
-                }
-            }
             if (this.selectedIndex <= 0 || this.selectedIndex >= this.groups.length) {
                 // if nothing is selected - select the first tabs group
-                this.selectGroupByIndex(0, navigateToRoute);
+                this.selectGroupByIndex(0);
             } else {
-                this.selectGroupByIndex(this.selectedIndex, navigateToRoute);
+                this.selectGroupByIndex(this.selectedIndex);
             }
         });
     }
@@ -356,7 +348,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         const group = selectableGroups[selectedIndex];
 
         if (group) {
-            group.select(0, navigateToRoute);
+            group.select(0);
         }
     }
 

src/app/tabs-routing/tabs-routing.sample.html

@@ -23,6 +23,10 @@
             <div>
                 <router-outlet></router-outlet>
             </div>
+            Programmatically change URL:<br>
+            <button (click)="navigateUrl1()">/tabs-routing/view1</button><br>
+            <button (click)="navigateUrl2()">/tabs-routing/view2</button><br>
+            <button (click)="navigateUrl3()">/tabs-routing/view3</button>
         </div>
     </div>
 </div>

src/app/tabs-routing/tabs-routing.sample.ts

@@ -1,9 +1,25 @@
 import { Component } from '@angular/core';
-
+import { Router } from '@angular/router';
 @Component({
     selector: 'app-tabs-routing-sample',
     styleUrls: ['tabs-routing.sample.css'],
     templateUrl: 'tabs-routing.sample.html'
 })
 export class TabsRoutingSampleComponent {
+
+    constructor(private router: Router) {
+    }
+
+    public navigateUrl1() {
+        this.router.navigateByUrl('/tabs-routing/view1');
+    }
+
+    public navigateUrl2() {
+        this.router.navigateByUrl('/tabs-routing/view2');
+    }
+
+    public navigateUrl3() {
+        this.router.navigateByUrl('/tabs-routing/view3');
+    }
+
 }