69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
|
import Vue from 'vue';
|
||
|
|
import Tabs from '~/vue_shared/components/tabs/tabs';
|
||
|
|
import Tab from '~/vue_shared/components/tabs/tab.vue';
|
||
|
|
|
||
|
|
describe('Tabs component', () => {
|
||
|
|
let vm;
|
||
|
|
|
||
|
|
beforeEach(done => {
|
||
|
|
vm = new Vue({
|
||
|
|
components: {
|
||
|
|
Tabs,
|
||
|
|
Tab,
|
||
|
|
},
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<tabs>
|
||
|
|
<tab title="Testing" active>
|
||
|
|
First tab
|
||
|
|
</tab>
|
||
|
|
<tab>
|
||
|
|
<template slot="title">Test slot</template>
|
||
|
|
Second tab
|
||
|
|
</tab>
|
||
|
|
</tabs>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
}).$mount();
|
||
|
|
|
||
|
|
setTimeout(done);
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('tab links', () => {
|
||
|
|
it('renders links for tabs', () => {
|
||
|
|
expect(vm.$el.querySelectorAll('a').length).toBe(2);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders link titles from props', () => {
|
||
|
|
expect(vm.$el.querySelector('a').textContent).toContain('Testing');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders link titles from slot', () => {
|
||
|
|
expect(vm.$el.querySelectorAll('a')[1].textContent).toContain('Test slot');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders active class', () => {
|
||
|
|
expect(vm.$el.querySelector('a').classList).toContain('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('updates active class on click', done => {
|
||
|
|
vm.$el.querySelectorAll('a')[1].click();
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.$el.querySelector('a').classList).not.toContain('active');
|
||
|
|
expect(vm.$el.querySelectorAll('a')[1].classList).toContain('active');
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('content', () => {
|
||
|
|
it('renders content panes', () => {
|
||
|
|
expect(vm.$el.querySelectorAll('.tab-pane').length).toBe(2);
|
||
|
|
expect(vm.$el.querySelectorAll('.tab-pane')[0].textContent).toContain('First tab');
|
||
|
|
expect(vm.$el.querySelectorAll('.tab-pane')[1].textContent).toContain('Second tab');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|