[ADF-2103] Info Drawer - Provide a way to select a different tab (#2788)

* Provide a way to select a different tab

* Fix the default value

* Override the value through the html

docs/info-drawer.component.md

@@ -29,6 +29,7 @@ Displays a sidebar-style information panel with tabs.
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | title | string | null | The title of the info drawer |
+| selectedIndex | number | 0 | The selected index tab |
 | currentTab | any | null | The currently active tab |
 
 ## Details

lib/core/info-drawer/info-drawer.component.html

@@ -7,7 +7,7 @@
     <ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
 
     <ng-template #tabLayout>
-        <mat-tab-group class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
+        <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
             <ng-container *ngFor="let contentBlock of contentBlocks">
                 <mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
                     <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
@@ -19,4 +19,4 @@
     <ng-template #singleLayout>
         <ng-content select="[info-drawer-content]"></ng-content>
     </ng-template>
-</adf-info-drawer-layout>
+</adf-info-drawer-layout>

lib/core/info-drawer/info-drawer.component.spec.ts

@@ -22,6 +22,7 @@ import { By } from '@angular/platform-browser';
 import { MaterialModule } from '../material.module';
 import { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
 import { InfoDrawerComponent } from './info-drawer.component';
+import { InfoDrawerTabComponent } from './info-drawer.component';
 
 describe('InfoDrawerComponent', () => {
     let element: HTMLElement;
@@ -73,21 +74,28 @@ describe('InfoDrawerComponent', () => {
 
 @Component({
     template: `
-    <adf-info-drawer>
+    <adf-info-drawer [selectedIndex]="tabIndex">
         <div info-drawer-title>Fake Title Custom</div>
+        <adf-info-drawer-tab label="Tab1">
+        </adf-info-drawer-tab>
+        <adf-info-drawer-tab label="Tab2">
+        </adf-info-drawer-tab>
     </adf-info-drawer>
        `
 })
-class CustomInfoDrawerComponent {
+class CustomInfoDrawerComponent extends InfoDrawerComponent {
+    tabIndex: number;
 }
 
 describe('Custom InfoDrawer', () => {
     let fixture: ComponentFixture<CustomInfoDrawerComponent>;
+    let component: CustomInfoDrawerComponent;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
                 InfoDrawerComponent,
+                InfoDrawerTabComponent,
                 InfoDrawerLayoutComponent,
                 CustomInfoDrawerComponent
             ],
@@ -100,6 +108,7 @@ describe('Custom InfoDrawer', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(CustomInfoDrawerComponent);
         fixture.detectChanges();
+        component = fixture.componentInstance;
     });
 
     it('should render the title', () => {
@@ -108,4 +117,19 @@ describe('Custom InfoDrawer', () => {
         expect(title.length).toBe(1);
         expect(title[0].nativeElement.innerText).toBe('Fake Title Custom');
     });
+
+    it('should select the tab 1 (index 0) as default', () => {
+        fixture.detectChanges();
+        let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+        expect(tab.length).toBe(1);
+        expect(tab[0].nativeElement.innerText).toBe('Tab1');
+    });
+
+    it('should select the tab 2 (index 1)', () => {
+        component.tabIndex = 1;
+        fixture.detectChanges();
+        let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+        expect(tab.length).toBe(1);
+        expect(tab[0].nativeElement.innerText).toBe('Tab2');
+    });
 });

lib/core/info-drawer/info-drawer.component.ts

@@ -37,6 +37,9 @@ export class InfoDrawerComponent {
     @Input()
     title: string|null = null;
 
+    @Input()
+    selectedIndex: number = 0;
+
     @Output()
     currentTab: EventEmitter<number> = new EventEmitter<number>();