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
|
import { shallowMount } from '@vue/test-utils';
import $ from 'jquery';
import { nextTick } from 'vue';
import WorkItemDescriptionRendered from '~/work_items/components/work_item_description_rendered.vue';
import { descriptionTextWithCheckboxes, descriptionHtmlWithCheckboxes } from '../mock_data';
describe('WorkItemDescription', () => {
let wrapper;
const findEditButton = () => wrapper.find('[data-testid="edit-description"]');
const findCheckboxAtIndex = (index) => wrapper.findAll('input[type="checkbox"]').at(index);
const defaultWorkItemDescription = {
description: descriptionTextWithCheckboxes,
descriptionHtml: descriptionHtmlWithCheckboxes,
};
const createComponent = ({
workItemDescription = defaultWorkItemDescription,
canEdit = false,
} = {}) => {
wrapper = shallowMount(WorkItemDescriptionRendered, {
propsData: {
workItemDescription,
canEdit,
},
});
};
afterEach(() => {
wrapper.destroy();
});
it('renders gfm', async () => {
const renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
createComponent();
await nextTick();
expect(renderGFMSpy).toHaveBeenCalled();
});
describe('with checkboxes', () => {
beforeEach(() => {
createComponent({
canEdit: true,
workItemDescription: {
description: `- [x] todo 1\n- [ ] todo 2`,
descriptionHtml: `<ul dir="auto" class="task-list" data-sourcepos="1:1-4:0">
<li class="task-list-item" data-sourcepos="1:1-2:15">
<input checked="" class="task-list-item-checkbox" type="checkbox"> todo 1</li>
<li class="task-list-item" data-sourcepos="2:1-2:15">
<input class="task-list-item-checkbox" type="checkbox"> todo 2</li>
</ul>`,
},
});
});
it('checks unchecked checkbox', async () => {
findCheckboxAtIndex(1).setChecked();
await nextTick();
const updatedDescription = `- [x] todo 1\n- [x] todo 2`;
expect(wrapper.emitted('descriptionUpdated')).toEqual([[updatedDescription]]);
});
it('disables checkbox while updating', async () => {
findCheckboxAtIndex(1).setChecked();
await nextTick();
expect(findCheckboxAtIndex(1).attributes().disabled).toBeDefined();
});
it('unchecks checked checkbox', async () => {
findCheckboxAtIndex(0).setChecked(false);
await nextTick();
const updatedDescription = `- [ ] todo 1\n- [ ] todo 2`;
expect(wrapper.emitted('descriptionUpdated')).toEqual([[updatedDescription]]);
});
});
describe('Edit button', () => {
it('is not visible when canUpdate = false', async () => {
await createComponent({
canUpdate: false,
});
expect(findEditButton().exists()).toBe(false);
});
it('toggles edit mode', async () => {
createComponent({
canEdit: true,
});
findEditButton().vm.$emit('click');
await nextTick();
expect(wrapper.emitted('startEditing')).toEqual([[]]);
});
});
});
|
