From c8743dacc6e3a6168f438e85c5f6a2d30654c84e Mon Sep 17 00:00:00 2001 From: madhukar23 <30654750+madhukar23@users.noreply.github.com> Date: Thu, 21 Sep 2017 13:53:47 +0530 Subject: [PATCH] [ADF-1574] Info Drawer - Add a mechanism to know the current active tab (#2352) * [ADF-1574] Info Drawer - Add a mechanism to know the current active tab * Added a output event in adf-info-drawer component to get the currently active tab * [ADF-1574] Info Drawer - Add a mechanism to know the current active tab * Added a output event in adf-info-drawer component to get the currently active tab * Added unit test file * Updated info-drawer.md --- .../info-drawer/info-drawer.component.html | 2 +- .../info-drawer/info-drawer.component.spec.ts | 72 +++++++++++++++++++ .../info-drawer/info-drawer.component.ts | 10 ++- .../src/components/info-drawer/info-drawer.md | 6 +- 4 files changed, 85 insertions(+), 5 deletions(-) create mode 100644 ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.spec.ts diff --git a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html index 46edfcafce..5a2a5c0926 100644 --- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html +++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html @@ -7,7 +7,7 @@ - + diff --git a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.spec.ts new file mode 100644 index 0000000000..8c836605d9 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.spec.ts @@ -0,0 +1,72 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { DebugElement } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { MaterialModule } from '../../material.module'; +import { InfoDrawerLayoutComponent } from './info-drawer-layout.component'; +import { InfoDrawerComponent } from './info-drawer.component'; + +declare let jasmine: any; + +describe('InfoDrawerComponent', () => { + let componentHandler: any; + let debugElement: DebugElement; + let element: HTMLElement; + let component: InfoDrawerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + InfoDrawerComponent, + InfoDrawerLayoutComponent + ], + imports: [ + MaterialModule + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InfoDrawerComponent); + component = fixture.componentInstance; + element = fixture.nativeElement; + debugElement = fixture.debugElement; + componentHandler = jasmine.createSpyObj('componentHandler', [ + 'upgradeAllRegistered', + 'upgradeElement' + ]); + window['componentHandler'] = componentHandler; + }); + + it('should create instance of InfoDrawerComponent', () => { + expect(fixture.componentInstance instanceof InfoDrawerComponent).toBe(true, 'should create InfoDrawerComponent'); + }); + + it('should define InfoDrawerTabLayout', () => { + let infoDrawerTabLayout = element.querySelector('adf-info-drawer-layout'); + expect(infoDrawerTabLayout).toBeDefined(); + }); + + it('should emit when tab is changed', () => { + let tabEmitSpy = spyOn(component.currentTab, 'emit'); + let event = {index: 1, tab: {textLabel: 'DETAILS'}}; + component.onTabChange(event); + expect(tabEmitSpy).toHaveBeenCalled(); + expect(tabEmitSpy).toHaveBeenCalledWith('DETAILS'); + }); +}); diff --git a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts index 3df1090a8f..458ae32584 100644 --- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts +++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, ContentChildren, Input, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'adf-info-drawer-tab', template: '' @@ -36,10 +36,18 @@ export class InfoDrawerComponent { @Input() title: string|null = null; + @Output() + currentTab: EventEmitter = new EventEmitter(); + @ContentChildren(InfoDrawerTabComponent) contentBlocks: QueryList; showTabLayout(): boolean { return this.contentBlocks.length > 0; } + + onTabChange(event: any) { + const tab = event.tab; + this.currentTab.emit(tab.textLabel); + } } diff --git a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md index 97d5366ad2..bda4ec70de 100644 --- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md +++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md @@ -53,19 +53,19 @@ The InfoDrawerLayoutComponent (as the name says) is basically just a layout with ## InfoDrawerComponent -The InfoDrawerComponent is on top of the InfoDrawerLayoutComponent. This version of the info drawer is supposed to be used if you need tabbing behaviour. Additionally you can set a title (if it only contains a string) with the **title** input property. -This component has the same 3 regions as described above, but if you want to leverage the tabbing functionality, you have to use the **adf-info-drawer-tab** component to organize your content. The only input paramter of the adf-info-drawer-tab component is the **"label"**, with you can specify the tab label with. +The InfoDrawerComponent is on top of the InfoDrawerLayoutComponent. This version of the info drawer is supposed to be used if you need tabbing behaviour. You can set a title (if it only contains a string) with the **title** input property. Additionally, It also provides a **currentTab** output property. This component has the same 3 regions as described above, but if you want to leverage the tabbing functionality, you have to use the **adf-info-drawer-tab** component to organize your content. The only input paramter of the adf-info-drawer-tab component is the **"label"**, with you can specify the tab label with. ### Properties | Name | Type | Default | Description | | --- | --- | --- | --- | | title | string | null | The title of the info drawer component| +| currentTab | any | null | The current active tab | ### Example ```html - +
clear