test(tabs/bottomNav): adding test for checking initial selection #4297

Author: rmkrmk

Diff for: projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts

@@ -15,7 +15,7 @@ import { BottomNavRoutingViewComponentsModule,
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
 
-describe('TabBar', () => {
+fdescribe('TabBar', () => {
     configureTestSuite();
     beforeEach(async(() => {
 
@@ -26,7 +26,8 @@ describe('TabBar', () => {
         ];
 
         TestBed.configureTestingModule({
-            declarations: [TabBarTestComponent, BottomTabBarTestComponent, TemplatedTabBarTestComponent, TabBarRoutingTestComponent],
+            declarations: [TabBarTestComponent, BottomTabBarTestComponent, TemplatedTabBarTestComponent, TabBarRoutingTestComponent,
+                TabBarTabsOnlyModeTestComponent],
             imports: [IgxBottomNavModule, BottomNavRoutingViewComponentsModule, RouterTestingModule.withRoutes(testRoutes)]
         })
             .compileComponents();
@@ -227,6 +228,33 @@ describe('TabBar', () => {
 
     });
 
+    describe('Tabs-only Mode Tests', () => {
+        configureTestSuite();
+
+        let fixture;
+        let bottomNav;
+        let theTabs;
+
+        beforeEach(async(() => {
+            fixture = TestBed.createComponent(TabBarTabsOnlyModeTestComponent);
+            bottomNav = fixture.componentInstance.bottomNavComp;
+            fixture.detectChanges();
+            theTabs = bottomNav.contentTabs.toArray();
+        }));
+
+        it('should retain the correct initial selection status', () => {
+            expect(theTabs[0].isSelected).toBe(false);
+            expect(theTabs[0].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
+
+            expect(theTabs[1].isSelected).toBe(true);
+            expect(theTabs[1].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item--selected')).toBe(true);
+
+            expect(theTabs[2].isSelected).toBe(false);
+            expect(theTabs[2].elementRef().nativeElement.classList.contains('igx-bottom-nav__menu-item')).toBe(true);
+        });
+
+    });
+
 });
 
 @Component({
@@ -356,3 +384,22 @@ class TabBarRoutingTestComponent {
     @ViewChild(IgxBottomNavComponent)
     public bottomNavComp: IgxBottomNavComponent;
 }
+
+@Component({
+    template: `
+        <div #wrapperDiv>
+            <igx-bottom-nav>
+                <igx-tab label="Tab 1">
+                </igx-tab>
+                <igx-tab label="Tab 2" [isSelected]="true">
+                </igx-tab>
+                <igx-tab label="Tab 3">
+                </igx-tab>
+            </igx-bottom-nav>
+        </div>
+    `
+})
+class TabBarTabsOnlyModeTestComponent {
+    @ViewChild(IgxBottomNavComponent)
+    public bottomNavComp: IgxBottomNavComponent;
+}

Diff for: projects/igniteui-angular/src/lib/tabbar/tabbar.component.ts

@@ -218,12 +218,14 @@ export class IgxBottomNavComponent implements AfterViewInit {
                 }
             });
         } else {
-            this.selectedIndex = args.panel.index;
-            this.panels.forEach((p) => {
-                if (p.index !== this.selectedIndex) {
-                    this._deselectPanel(p);
-                }
-            });
+            if (args.panel) {
+                this.selectedIndex = args.panel.index;
+                this.panels.forEach((p) => {
+                    if (p.index !== this.selectedIndex) {
+                        this._deselectPanel(p);
+                    }
+                });
+            }
         }
     }
 

Diff for: projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -293,9 +293,11 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     }
 
     private transformIndicatorAnimation(element: HTMLElement): void {
-        this._tabs.selectedIndicator.nativeElement.style.visibility = `visible`;
-        this._tabs.selectedIndicator.nativeElement.style.width = `${element.offsetWidth}px`;
-        this._tabs.selectedIndicator.nativeElement.style.transform = `translate(${element.offsetLeft}px)`;
+        if (this._tabs && this._tabs.selectedIndicator) {
+            this._tabs.selectedIndicator.nativeElement.style.visibility = `visible`;
+            this._tabs.selectedIndicator.nativeElement.style.width = `${element.offsetWidth}px`;
+            this._tabs.selectedIndicator.nativeElement.style.transform = `translate(${element.offsetLeft}px)`;
+        }
     }
 
     private onKeyDown(isLeftArrow: boolean, index = null): void {

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

@@ -19,7 +19,7 @@ import { TabsRoutingViewComponentsModule,
     TabsRoutingView2Component,
     TabsRoutingView3Component } from './tabs-routing-view-components.spec';
 
-describe('IgxTabs', () => {
+fdescribe('IgxTabs', () => {
     configureTestSuite();
     beforeEach(async(() => {
 
@@ -31,7 +31,8 @@ describe('IgxTabs', () => {
 
         TestBed.configureTestingModule({
             declarations: [TabsTestComponent, TabsTest2Component, TemplatedTabsTestComponent,
-                TabsTestSelectedTabComponent, TabsTestCustomStylesComponent, TabsTestBug4420Component, TabsRoutingTestComponent],
+                TabsTestSelectedTabComponent, TabsTestCustomStylesComponent, TabsTestBug4420Component, TabsRoutingTestComponent,
+                TabsTabsOnlyModeTestComponent],
             imports: [IgxTabsModule, IgxButtonModule, IgxDropDownModule, IgxToggleModule, BrowserAnimationsModule,
                 TabsRoutingViewComponentsModule, RouterTestingModule.withRoutes(testRoutes)]
         })
@@ -478,6 +479,33 @@ describe('IgxTabs', () => {
 
     });
 
+    describe('Tabs-only Mode Tests', () => {
+        configureTestSuite();
+
+        let fixture;
+        let tabsComp;
+        let theTabs;
+
+        beforeEach(async(() => {
+            fixture = TestBed.createComponent(TabsTabsOnlyModeTestComponent);
+            tabsComp = fixture.componentInstance.tabs;
+            fixture.detectChanges();
+            theTabs = tabsComp.tabs.toArray();
+        }));
+
+        it('should retain the correct initial selection status', () => {
+            expect(theTabs[0].isSelected).toBe(false);
+            expect(theTabs[0].nativeTabItem.nativeElement.classList.contains('igx-tabs__header-menu-item')).toBe(true);
+
+            expect(theTabs[1].isSelected).toBe(true);
+            expect(theTabs[1].nativeTabItem.nativeElement.classList.contains('igx-tabs__header-menu-item--selected')).toBe(true);
+
+            expect(theTabs[2].isSelected).toBe(false);
+            expect(theTabs[2].nativeTabItem.nativeElement.classList.contains('igx-tabs__header-menu-item')).toBe(true);
+        });
+
+    });
+
 });
 
 @Component({
@@ -687,3 +715,22 @@ class TabsRoutingTestComponent {
     @ViewChild(IgxTabsComponent)
     public tabs: IgxTabsComponent;
 }
+
+@Component({
+    template: `
+        <div #wrapperDiv>
+            <igx-tabs>
+                <igx-tab-item label="Tab 1">
+                </igx-tab-item>
+                <igx-tab-item label="Tab 2" [isSelected]="true">
+                </igx-tab-item>
+                <igx-tab-item label="Tab 3">
+                </igx-tab-item>
+            </igx-tabs>
+        </div>
+    `
+})
+class TabsTabsOnlyModeTestComponent {
+    @ViewChild(IgxTabsComponent)
+    public tabs: IgxTabsComponent;
+}

Diff for: projects/igniteui-angular/src/lib/tabs/tabs.component.ts

@@ -252,19 +252,23 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
             this.selectedIndex = args.tab.index;
         } else {
             const prevSelectedIndex = this.selectedIndex;
-            if (prevSelectedIndex !== -1 && this.groups.toArray()[prevSelectedIndex] !== undefined) {
+            if (prevSelectedIndex !== -1 && this.groups && this.groups.toArray()[prevSelectedIndex] !== undefined) {
                 this.onTabItemDeselected.emit(
                     {
                         tab: this.groups.toArray()[prevSelectedIndex].relatedTab,
                         group: this.groups.toArray()[prevSelectedIndex]
                     });
             }
-            this.selectedIndex = args.group.index;
-            this.groups.forEach((p) => {
-                if (p.index !== this.selectedIndex) {
-                    this.deselectGroup(p);
-                }
-            });
+            if (args.group) {
+                this.selectedIndex = args.group.index;
+            }
+            if (this.groups) {
+                this.groups.forEach((p) => {
+                    if (p.index !== this.selectedIndex) {
+                        this.deselectGroup(p);
+                    }
+                });
+            }
         }
     }