fix(tabset): prevent select call if no active tab found (#1444)

Author: yggg

src/framework/theme/components/tabset/tabset.component.spec.ts

@@ -0,0 +1,108 @@
+import { CommonModule } from '@angular/common';
+import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NbTabComponent, NbTabsetComponent, NbTabsetModule } from '@nebular/theme';
+import { BehaviorSubject } from 'rxjs';
+import createSpy = jasmine.createSpy;
+
+@Component({
+  template: `
+    <nb-tabset routeParam="tab">
+      <nb-tab *ngIf="showTabs" tabTitle="1" route="1">1</nb-tab>
+      <nb-tab *ngIf="showTabs" tabTitle="2" route="2">2</nb-tab>
+      <nb-tab *ngIf="showTabs" tabTitle="3" route="3" disabled>3</nb-tab>
+    </nb-tabset>
+  `,
+})
+export class TabsetTestComponent {
+  showTabs = true;
+
+  @ViewChild(NbTabsetComponent) tabsetComponent: NbTabsetComponent;
+  @ViewChildren(NbTabComponent) tabComponents: QueryList<NbTabComponent>;
+
+  getDisabledTab(): NbTabComponent {
+    return this.tabComponents.toArray()[2];
+  }
+}
+
+export class ActivatedRouteStub {
+  private subject = new BehaviorSubject<Params>(null);
+  readonly params = this.subject.asObservable();
+
+  constructor(params: Params = {}) {
+    this.subject.next(params);
+  }
+
+  setParams(params?: Params) {
+    this.subject.next(params);
+  };
+}
+
+describe('NbTabsetComponent', () => {
+  let fixture: ComponentFixture<TabsetTestComponent>;
+  let testComponent: TabsetTestComponent;
+  let tabsetComponent: NbTabsetComponent;
+  let activatedRouteStub: ActivatedRouteStub;
+
+  beforeEach(fakeAsync(() => {
+    activatedRouteStub = new ActivatedRouteStub();
+
+    TestBed.configureTestingModule({
+      declarations: [ TabsetTestComponent ],
+      imports: [
+        CommonModule,
+        RouterTestingModule.withRoutes([]),
+        NbTabsetModule,
+      ],
+      providers: [{ provide: ActivatedRoute, useValue: activatedRouteStub }],
+    });
+
+    fixture = TestBed.createComponent(TabsetTestComponent);
+    testComponent = fixture.componentInstance;
+
+    fixture.detectChanges();
+    tick();
+
+    tabsetComponent = testComponent.tabsetComponent;
+  }));
+
+  it('should mark tab as active if selected in route param', fakeAsync(() => {
+    const selectTabSpy = spyOn(tabsetComponent, 'selectTab');
+    const tabToSelect: NbTabComponent = testComponent.tabComponents.first;
+
+    activatedRouteStub.setParams({ tab: tabToSelect.route });
+    fixture.detectChanges();
+    tick();
+
+    expect(selectTabSpy).toHaveBeenCalledTimes(1);
+    expect(selectTabSpy).toHaveBeenCalledWith(tabToSelect);
+    expect(tabToSelect.active).toEqual(true);
+  }));
+
+  it('should not mark disabled tab as active if selected in route param', fakeAsync(() => {
+    const changeTabSpy = createSpy('changeTabSpy');
+    const disabledTab: NbTabComponent = testComponent.getDisabledTab();
+
+    activatedRouteStub.setParams({ tab: disabledTab.route });
+    fixture.detectChanges();
+    tick();
+
+    expect(changeTabSpy).not.toHaveBeenCalled();
+    expect(disabledTab.active).toEqual(false);
+  }));
+
+  it(`should not call 'selectTab' if no tabs found`, fakeAsync(() => {
+    const selectTabSpy = spyOn(tabsetComponent, 'selectTab');
+
+    testComponent.showTabs = false;
+    fixture.detectChanges();
+
+    activatedRouteStub.setParams({ tab: 1 });
+    fixture.detectChanges();
+    tick();
+
+    expect(selectTabSpy).not.toHaveBeenCalled();
+  }));
+});

src/framework/theme/components/tabset/tabset.component.ts

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { map, delay } from 'rxjs/operators';
+import { map, delay, filter } from 'rxjs/operators';
 import {
   Component,
   Input,
@@ -301,11 +301,13 @@ export class NbTabsetComponent implements AfterContentInit {
             this.tabs.find((tab) => this.routeParam ? tab.route === params[this.routeParam] : tab.active),
         ),
         delay(0),
+        map((tab: NbTabComponent) => tab || this.tabs.first),
+        filter((tab: NbTabComponent) => !!tab),
       )
-      .subscribe((activeTab) => {
-        this.selectTab(activeTab || this.tabs.first);
+      .subscribe((tabToSelect: NbTabComponent) => {
+        this.selectTab(tabToSelect);
         this.changeDetectorRef.markForCheck();
-    });
+      });
   }
 
   // TODO: navigate to routeParam