98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
describe('TabBar', function() {
|
|
it('initially renders but hides the tabs', function() {
|
|
const subject = new privateUnderTest.TabBar([
|
|
{ id: 'tab1', label: 'tab 1' }
|
|
]);
|
|
const tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
|
|
expect(tabs.length).toEqual(1);
|
|
expect(tabs[0].id).toEqual('tab1');
|
|
expect(tabs[0]).toHaveClass('jasmine-hidden');
|
|
const link = tabs[0].querySelector('a');
|
|
expect(link).toBeTruthy();
|
|
expect(link.textContent).toEqual('tab 1');
|
|
});
|
|
|
|
it('does not initially call the onSelect callback', function() {
|
|
const onSelect = jasmine.createSpy('onSelect');
|
|
new privateUnderTest.TabBar([{ id: 'tab1', label: '' }], onSelect);
|
|
expect(onSelect).not.toHaveBeenCalled();
|
|
});
|
|
|
|
describe('#showTab', function() {
|
|
it('shows the specified tab', function() {
|
|
const subject = new privateUnderTest.TabBar([
|
|
{ id: 'tab1' },
|
|
{ id: 'tab2' }
|
|
]);
|
|
|
|
subject.showTab('tab2');
|
|
|
|
const tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
|
|
expect(tabs[0]).toHaveClass('jasmine-hidden');
|
|
expect(tabs[1]).not.toHaveClass('jasmine-hidden');
|
|
});
|
|
|
|
it('does not hide previously shown tabs', function() {
|
|
const subject = new privateUnderTest.TabBar([
|
|
{ id: 'tab1' },
|
|
{ id: 'tab2' }
|
|
]);
|
|
|
|
subject.showTab('tab1');
|
|
subject.showTab('tab2');
|
|
|
|
const tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
|
|
expect(tabs[0]).not.toHaveClass('jasmine-hidden');
|
|
});
|
|
});
|
|
|
|
describe("When a tab's link is clicked", function() {
|
|
it("calls the onSelect callback with the tab's id", function() {
|
|
const onSelect = jasmine.createSpy('onSelect');
|
|
const subject = new privateUnderTest.TabBar(
|
|
[{ id: 'tab1', label: '' }],
|
|
onSelect
|
|
);
|
|
|
|
subject.rootEl.querySelector('.jasmine-tab a').click();
|
|
|
|
expect(onSelect).toHaveBeenCalledWith('tab1');
|
|
});
|
|
|
|
it('shows links on all non-selected tabs only', function() {
|
|
const subject = new privateUnderTest.TabBar(
|
|
[
|
|
{ id: 'tab1', label: 'tab 1' },
|
|
{ id: 'tab2', label: 'tab 2' },
|
|
{ id: 'tab3', label: 'tab 3' }
|
|
],
|
|
() => {}
|
|
);
|
|
|
|
subject.rootEl.querySelectorAll('.jasmine-tab a')[1].click();
|
|
let tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
|
|
expect(tabs[0].querySelector('a'))
|
|
.withContext('tab 1')
|
|
.toBeTruthy();
|
|
expect(tabs[1].querySelector('a'))
|
|
.withContext('tab 1')
|
|
.toBeFalsy();
|
|
expect(tabs[2].querySelector('a'))
|
|
.withContext('tab 1')
|
|
.toBeTruthy();
|
|
|
|
subject.rootEl.querySelectorAll('.jasmine-tab a')[0].click();
|
|
tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
|
|
expect(tabs[0].querySelector('a'))
|
|
.withContext('tab 1')
|
|
.toBeFalsy();
|
|
expect(tabs[1].querySelector('a'))
|
|
.withContext('tab 1')
|
|
.toBeTruthy();
|
|
expect(tabs[2].querySelector('a'))
|
|
.withContext('tab 1')
|
|
.toBeTruthy();
|
|
});
|
|
});
|
|
});
|