1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import { GlTab } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
describe('navigation tabs component', () => {
let wrapper;
const data = [
{
name: 'All',
scope: 'all',
count: 1,
isActive: true,
},
{
name: 'Pending',
scope: 'pending',
count: 0,
isActive: false,
},
{
name: 'Running',
scope: 'running',
isActive: false,
},
];
const createComponent = () => {
wrapper = mount(NavigationTabs, {
propsData: {
tabs: data,
scope: 'pipelines',
},
});
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('should render tabs', () => {
expect(wrapper.findAll(GlTab)).toHaveLength(data.length);
});
it('should render active tab', () => {
expect(wrapper.find('.js-pipelines-tab-all').classes('active')).toBe(true);
});
it('should render badge', () => {
expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('1');
expect(wrapper.find('.js-pipelines-tab-pending').text()).toContain('0');
});
it('should not render badge', () => {
expect(wrapper.find('.js-pipelines-tab-running .badge').exists()).toBe(false);
});
it('should trigger onTabClick', async () => {
await wrapper.find('.js-pipelines-tab-pending').trigger('click');
expect(wrapper.emitted('onChangeTab')).toEqual([['pending']]);
});
});
|
