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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import { GlFormCheckbox, GlFormGroup, GlFormCheckboxGroup } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import ChecklistWidget from '~/pipeline_wizard/components/widgets/checklist.vue';
describe('Pipeline Wizard - Checklist Widget', () => {
let wrapper;
const props = {
title: 'Foobar',
items: [
'foo bar baz', // simple, text-only content
{
text: 'abc',
help: 'def',
},
],
};
const getLastUpdateValidEvent = () => {
const eventArray = wrapper.emitted('update:valid');
return eventArray[eventArray.length - 1];
};
const findItem = (atIndex = 0) => wrapper.findAllComponents(GlFormCheckbox).at(atIndex);
const getGlFormGroup = () => wrapper.getComponent(GlFormGroup);
const getGlFormCheckboxGroup = () => wrapper.getComponent(GlFormCheckboxGroup);
// The item.ids *can* be passed inside props.items, but are usually
// autogenerated by lodash.uniqueId() inside the component. So to
// get the actual value that the component expects to be emitted in
// GlFormCheckboxGroup's `v-model`, we need to obtain the value that is
// actually passed to GlFormCheckbox.
const getAllItemIds = () => props.items.map((_, i) => findItem(i).attributes().value);
const createComponent = (mountFn = shallowMountExtended) => {
wrapper = mountFn(ChecklistWidget, {
propsData: {
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
it('creates the component', () => {
createComponent();
expect(wrapper.exists()).toBe(true);
});
it('displays the item', () => {
createComponent();
expect(findItem().exists()).toBe(true);
});
it("displays the item's text", () => {
createComponent();
expect(findItem().text()).toBe(props.items[0]);
});
it('assigns the same non-null value to label-for and form id', () => {
createComponent();
const formGroupLabelFor = getGlFormGroup().attributes('label-for');
const formCheckboxGroupId = getGlFormCheckboxGroup().attributes('id');
expect(formGroupLabelFor).not.toBeNull();
expect(formCheckboxGroupId).not.toBeNull();
expect(formGroupLabelFor).toBe(formCheckboxGroupId);
});
it('displays an item with a help text', () => {
createComponent();
const { text, help } = props.items[1];
const itemWrapper = findItem(1);
const itemText = itemWrapper.text();
// Unfortunately there is no wrapper.slots() accessor in vue_test_utils.
// To make sure the help text is being passed to the correct slot, we need to
// access the slot internally.
// This selector accesses the text of the first slot named "help" in itemWrapper
const helpText = itemWrapper.vm.$slots?.help[0]?.text?.trim();
expect(itemText).toBe(text);
expect(helpText).toBe(help);
});
it("emits a 'update:valid' event after all boxes have been checked", async () => {
createComponent();
// initially, `valid` should be false
expect(wrapper.emitted('update:valid')).toEqual([[false]]);
const values = getAllItemIds();
// this mocks checking all the boxes
getGlFormCheckboxGroup().vm.$emit('input', values);
await nextTick();
expect(wrapper.emitted('update:valid')).toEqual([[false], [true]]);
});
it('emits a invalid event after a box has been unchecked', async () => {
createComponent();
// initially, `valid` should be false
expect(wrapper.emitted('update:valid')).toEqual([[false]]);
// checking all the boxes first
const values = getAllItemIds();
getGlFormCheckboxGroup().vm.$emit('input', values);
await nextTick();
// ensure the test later doesn't just pass because it doesn't emit
// `true` to begin with
expect(getLastUpdateValidEvent()).toEqual([true]);
// Now we're unchecking the last box.
values.pop();
getGlFormCheckboxGroup().vm.$emit('input', values);
await nextTick();
expect(getLastUpdateValidEvent()).toEqual([false]);
});
});
|
