redoc/lib/shared/components/Tabs/tabs.spec.js

158 lines
4.3 KiB
JavaScript
Raw Normal View History

2015-12-19 16:31:34 +03:00
'use strict';
2016-02-03 17:47:20 +03:00
import { getChildDebugElement, getChildDebugElementAll } from 'tests/helpers';
2016-05-05 11:05:02 +03:00
import {Component} from '@angular/core';
2015-12-19 16:31:34 +03:00
import {
inject,
beforeEach,
it
2016-05-09 22:55:16 +03:00
} from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';
2015-12-19 16:31:34 +03:00
2016-05-06 00:48:41 +03:00
import {Tabs, Tab} from 'lib/shared/components/index';
2015-12-19 16:31:34 +03:00
2015-12-19 20:36:28 +03:00
describe('Common components', () => {
describe('Tabs Component', () => {
let builder;
let component;
let childDebugEls;
2016-02-03 17:47:20 +03:00
let debugEl;
2015-12-19 20:36:28 +03:00
let fixture;
2016-02-03 17:47:20 +03:00
let hostComponent;
2015-12-19 16:31:34 +03:00
2015-12-19 20:36:28 +03:00
beforeEach(inject([TestComponentBuilder], (tcb) => {
builder = tcb;
}));
beforeEach((done) => {
builder.createAsync(TestApp).then(_fixture => {
fixture = _fixture;
2016-02-03 17:47:20 +03:00
hostComponent = fixture.debugElement.componentInstance;
debugEl = getChildDebugElement(fixture.debugElement, 'tabs');
2015-12-19 20:36:28 +03:00
childDebugEls = getChildDebugElementAll(debugEl, 'tab');
component = debugEl.componentInstance;
done();
}, err => done.fail(err));
});
2015-12-19 16:31:34 +03:00
2015-12-19 20:36:28 +03:00
it('should init component', () => {
expect(component).not.toBeNull();
});
2015-12-19 16:31:34 +03:00
2015-12-19 20:36:28 +03:00
it('should handle inner tabs', () => {
component.tabs.should.have.lengthOf(2);
childDebugEls.should.have.lengthOf(2);
});
2015-12-19 16:31:34 +03:00
2015-12-19 20:36:28 +03:00
it('should activate first tab by default', () => {
let tabs = childDebugEls.map(debugEl => debugEl.componentInstance);
let [tab1, tab2] = tabs;
2015-12-19 16:31:34 +03:00
tab1.active.should.be.true();
tab2.active.should.be.false();
2015-12-19 20:36:28 +03:00
});
2015-12-19 16:31:34 +03:00
2015-12-19 20:36:28 +03:00
it('should change active tab on click', () => {
fixture.detectChanges();
2016-02-03 17:47:20 +03:00
//let headerEls = nativeElement.querySelectorAll('li');
2015-12-19 20:36:28 +03:00
let tabs = childDebugEls.map(debugEl => debugEl.componentInstance);
let [tab1, tab2] = tabs;
2015-12-19 16:31:34 +03:00
2016-02-03 17:47:20 +03:00
let tabsInst = debugEl.componentInstance;
tabsInst.selectTab(tab2);
tab1.active.should.be.false();
tab2.active.should.be.true();
});
it('should change tab by title and not emit Event', (done) => {
fixture.detectChanges();
let tabs = childDebugEls.map(debugEl => debugEl.componentInstance);
let [tab1, tab2] = tabs;
let tab2Title = 'Tab2';
let tabsInst = debugEl.componentInstance;
tabsInst.selectyByTitle(tab2Title);
tab1.active.should.be.false();
tab2.active.should.be.true();
setTimeout(() => {
hostComponent.eventLog.should.be.deepEqual([]);
done();
});
});
it('should emit event on tab Change', (done) => {
fixture.detectChanges();
let tabs = childDebugEls.map(debugEl => debugEl.componentInstance);
let tab2 = tabs[1];
let tabsInst = debugEl.componentInstance;
tabsInst.selectTab(tab2, true);
setTimeout(() => {
hostComponent.eventLog.should.be.deepEqual(['Tab2']);
done();
});
});
it('should emit event on tab change by Title with notify true', (done) => {
fixture.detectChanges();
let tab2Title = 'Tab2';
let tabsInst = debugEl.componentInstance;
tabsInst.selectyByTitle(tab2Title, true);
setTimeout(() => {
hostComponent.eventLog.should.be.deepEqual(['Tab2']);
done();
});
});
it('should not emit event on tab change with notify false', (done) => {
fixture.detectChanges();
let tabs = childDebugEls.map(debugEl => debugEl.componentInstance);
let tab2 = tabs[1];
let tabsInst = debugEl.componentInstance;
tabsInst.selectTab(tab2, false);
setTimeout(() => {
hostComponent.eventLog.should.be.deepEqual([]);
done();
});
});
it('should leave current tab active if selectyByTitle non existing title', () => {
fixture.detectChanges();
let tabs = childDebugEls.map(debugEl => debugEl.componentInstance);
let [tab1, tab2] = tabs;
let tabsInst = debugEl.componentInstance;
tabsInst.selectyByTitle('badTitle');
tab1.active.should.be.true();
tab2.active.should.be.false();
2015-12-19 20:36:28 +03:00
});
2015-12-19 16:31:34 +03:00
});
});
/** Test component that contains an ApiInfo. */
@Component({
selector: 'test-app',
2015-12-19 16:31:34 +03:00
directives: [Tabs, Tab],
template:
2016-02-03 17:47:20 +03:00
`<tabs (change)="onEvent($event)">
2015-12-19 16:31:34 +03:00
<tab tabTitle="Tab1" tabStatus="test">Test</tab>
<tab tabTitle="Tab2" tabStatus="test">Test</tab>
</tabs>`
})
class TestApp {
2016-02-03 17:47:20 +03:00
constructor() {
this.eventLog = [];
}
onEvent(event) {
this.eventLog.push(event);
}
2015-12-19 16:31:34 +03:00
}