diff --git a/docs/info-drawer.component.md b/docs/info-drawer.component.md index f0082c5e9a..d97c4fd5b3 100644 --- a/docs/info-drawer.component.md +++ b/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 diff --git a/lib/core/info-drawer/info-drawer.component.html b/lib/core/info-drawer/info-drawer.component.html index 8006c2fdd4..45b406728b 100644 --- a/lib/core/info-drawer/info-drawer.component.html +++ b/lib/core/info-drawer/info-drawer.component.html @@ -7,7 +7,7 @@ - + @@ -19,4 +19,4 @@ - \ No newline at end of file + diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts index 8c3c594b93..4cd21fcd6d 100644 --- a/lib/core/info-drawer/info-drawer.component.spec.ts +++ b/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: ` - +
Fake Title Custom
+ + + +
` }) -class CustomInfoDrawerComponent { +class CustomInfoDrawerComponent extends InfoDrawerComponent { + tabIndex: number; } describe('Custom InfoDrawer', () => { let fixture: ComponentFixture; + 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'); + }); }); diff --git a/lib/core/info-drawer/info-drawer.component.ts b/lib/core/info-drawer/info-drawer.component.ts index 4af5a8ab79..fa44ff6026 100644 --- a/lib/core/info-drawer/info-drawer.component.ts +++ b/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 = new EventEmitter();