[ADF-2007] Info Drawer - currentTab event should return a key not the label (#2715)

* [ADF-2007] bug fix

Info drawer will emit the current active tab instead of the tab label
Also updated the test spec

* Emit tab index on clicking
This commit is contained in:
mihai sirghe 2017-11-25 01:55:03 +02:00 committed by Eugenio Romano
parent eba4399d6c
commit eba46e4e44
3 changed files with 8 additions and 8 deletions

View File

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

View File

@ -17,6 +17,7 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatTabChangeEvent } from '@angular/material';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { MaterialModule } from '../material.module'; import { MaterialModule } from '../material.module';
import { InfoDrawerLayoutComponent } from './info-drawer-layout.component'; import { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
@ -57,9 +58,8 @@ describe('InfoDrawerComponent', () => {
it('should emit when tab is changed', () => { it('should emit when tab is changed', () => {
let tabEmitSpy = spyOn(component.currentTab, 'emit'); let tabEmitSpy = spyOn(component.currentTab, 'emit');
let event = {index: 1, tab: {textLabel: 'DETAILS'}}; let event = {index: 1, tab: {textLabel: 'DETAILS'}};
component.onTabChange(event); component.onTabChange(<MatTabChangeEvent> event);
expect(tabEmitSpy).toHaveBeenCalled(); expect(tabEmitSpy).toHaveBeenCalledWith(1);
expect(tabEmitSpy).toHaveBeenCalledWith('DETAILS');
}); });
it('should render the title', () => { it('should render the title', () => {

View File

@ -16,6 +16,7 @@
*/ */
import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material';
@Component({ @Component({
selector: 'adf-info-drawer-tab', selector: 'adf-info-drawer-tab',
template: '<ng-template><ng-content></ng-content></ng-template>' template: '<ng-template><ng-content></ng-content></ng-template>'
@ -37,7 +38,7 @@ export class InfoDrawerComponent {
title: string|null = null; title: string|null = null;
@Output() @Output()
currentTab: EventEmitter<any> = new EventEmitter<any>(); currentTab: EventEmitter<number> = new EventEmitter<number>();
@ContentChildren(InfoDrawerTabComponent) @ContentChildren(InfoDrawerTabComponent)
contentBlocks: QueryList<InfoDrawerTabComponent>; contentBlocks: QueryList<InfoDrawerTabComponent>;
@ -46,8 +47,7 @@ export class InfoDrawerComponent {
return this.contentBlocks.length > 0; return this.contentBlocks.length > 0;
} }
onTabChange(event: any) { onTabChange(event: MatTabChangeEvent) {
const tab = event.tab; this.currentTab.emit(event.index);
this.currentTab.emit(tab.textLabel);
} }
} }