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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
import { shallowMount } from '@vue/test-utils';
import IssuableBulkEditSidebar from '~/issuable_list/components/issuable_bulk_edit_sidebar.vue';
const createComponent = ({ expanded = true } = {}) =>
shallowMount(IssuableBulkEditSidebar, {
propsData: {
expanded,
},
slots: {
'bulk-edit-actions': `
<button class="js-edit-issuables">Edit issuables</button>
`,
'sidebar-items': `
<button class="js-sidebar-dropdown">Labels</button>
`,
},
});
describe('IssuableBulkEditSidebar', () => {
let wrapper;
beforeEach(() => {
setFixtures('<div class="layout-page right-sidebar-collapsed"></div>');
wrapper = createComponent();
});
afterEach(() => {
wrapper.destroy();
});
describe('watch', () => {
describe('expanded', () => {
it.each`
expanded | layoutPageClass
${true} | ${'right-sidebar-expanded'}
${false} | ${'right-sidebar-collapsed'}
`(
'sets class "$layoutPageClass" on element `.layout-page` when expanded prop is $expanded',
async ({ expanded, layoutPageClass }) => {
const wrappeCustom = createComponent({
expanded: !expanded,
});
// We need to manually flip the value of `expanded` for
// watcher to trigger.
wrappeCustom.setProps({
expanded,
});
await wrappeCustom.vm.$nextTick();
expect(document.querySelector('.layout-page').classList.contains(layoutPageClass)).toBe(
true,
);
wrappeCustom.destroy();
},
);
});
});
describe('template', () => {
it.each`
expanded | layoutPageClass
${true} | ${'right-sidebar-expanded'}
${false} | ${'right-sidebar-collapsed'}
`(
'renders component container with class "$layoutPageClass" when expanded prop is $expanded',
async ({ expanded, layoutPageClass }) => {
const wrappeCustom = createComponent({
expanded: !expanded,
});
// We need to manually flip the value of `expanded` for
// watcher to trigger.
wrappeCustom.setProps({
expanded,
});
await wrappeCustom.vm.$nextTick();
expect(wrappeCustom.classes()).toContain(layoutPageClass);
wrappeCustom.destroy();
},
);
it('renders contents for slot `bulk-edit-actions`', () => {
expect(wrapper.find('button.js-edit-issuables').exists()).toBe(true);
});
it('renders contents for slot `sidebar-items`', () => {
expect(wrapper.find('button.js-sidebar-dropdown').exists()).toBe(true);
});
});
});
|
