[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
This commit is contained in:
Maurizio Vitale
2017-12-18 12:11:23 +00:00
committed by Eugenio Romano
parent 7653e5784d
commit 14c81ca978
4 changed files with 32 additions and 4 deletions

View File

@@ -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');
});
});