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
|
import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
const localVue = createLocalVue();
const DEFAULT_PROPS = {
canApply: true,
isApplied: false,
helpPagePath: 'path_to_docs',
};
describe('Suggestion Diff component', () => {
let wrapper;
const createComponent = props => {
wrapper = shallowMount(localVue.extend(SuggestionDiffHeader), {
propsData: {
...DEFAULT_PROPS,
...props,
},
localVue,
sync: false,
});
};
afterEach(() => {
wrapper.destroy();
});
const findApplyButton = () => wrapper.find('.js-apply-btn');
const findHeader = () => wrapper.find('.js-suggestion-diff-header');
const findHelpButton = () => wrapper.find('.js-help-btn');
const findLoading = () => wrapper.find(GlLoadingIcon);
it('renders a suggestion header', () => {
createComponent();
const header = findHeader();
expect(header.exists()).toBe(true);
expect(header.html().includes('Suggested change')).toBe(true);
});
it('renders a help button', () => {
createComponent();
expect(findHelpButton().exists()).toBe(true);
});
it('renders an apply button', () => {
createComponent();
const applyBtn = findApplyButton();
expect(applyBtn.exists()).toBe(true);
expect(applyBtn.html().includes('Apply suggestion')).toBe(true);
});
it('does not render an apply button if `canApply` is set to false', () => {
createComponent({ canApply: false });
expect(findApplyButton().exists()).toBe(false);
});
describe('when apply suggestion is clicked', () => {
beforeEach(done => {
createComponent();
findApplyButton().vm.$emit('click');
wrapper.vm.$nextTick(done);
});
it('emits apply', () => {
expect(wrapper.emittedByOrder()).toContainEqual({
name: 'apply',
args: [expect.any(Function)],
});
});
it('hides apply button', () => {
expect(findApplyButton().exists()).toBe(false);
});
it('shows loading', () => {
expect(findLoading().exists()).toBe(true);
expect(wrapper.text()).toContain('Applying suggestion');
});
it('when callback of apply is called, hides loading', done => {
const [callback] = wrapper.emitted().apply[0];
callback();
wrapper.vm
.$nextTick()
.then(() => {
expect(findApplyButton().exists()).toBe(true);
expect(findLoading().exists()).toBe(false);
})
.then(done)
.catch(done.fail);
});
});
});
|
