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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
import { shallowMount, mount } from '@vue/test-utils';
import { discussionMock } from '../mock_data';
import DiscussionActions from '~/notes/components/discussion_actions.vue';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import ResolveDiscussionButton from '~/notes/components/discussion_resolve_button.vue';
import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
import JumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
import createStore from '~/notes/stores';
// NOTE: clone mock_data so that it is not accidentally mutated
const createDiscussionMock = (props = {}) =>
Object.assign(JSON.parse(JSON.stringify(discussionMock)), props);
const createNoteMock = (props = {}) =>
Object.assign(JSON.parse(JSON.stringify(discussionMock.notes[0])), props);
const createResolvableNote = () =>
createNoteMock({ resolvable: true, current_user: { can_resolve_discussion: true } });
const createUnresolvableNote = () =>
createNoteMock({ resolvable: false, current_user: { can_resolve_discussion: false } });
const createUnallowedNote = () =>
createNoteMock({ resolvable: true, current_user: { can_resolve_discussion: false } });
describe('DiscussionActions', () => {
let wrapper;
const createComponentFactory = (shallow = true) => (props, options) => {
const store = createStore();
const mountFn = shallow ? shallowMount : mount;
wrapper = mountFn(DiscussionActions, {
store,
propsData: {
discussion: discussionMock,
isResolving: false,
resolveButtonTitle: 'Resolve discussion',
resolveWithIssuePath: '/some/issue/path',
shouldShowJumpToNextDiscussion: true,
...props,
},
provide: {
glFeatures: {
hideJumpToNextUnresolvedInThreads: options?.hideJumpToNextUnresolvedInThreads,
},
},
});
};
afterEach(() => {
wrapper.destroy();
});
describe('rendering', () => {
const createComponent = createComponentFactory();
it('renders reply placeholder, resolve discussion button, resolve with issue button and jump to next discussion button', () => {
createComponent();
expect(wrapper.find(ReplyPlaceholder).exists()).toBe(true);
expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(true);
expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(true);
expect(wrapper.find(JumpToNextDiscussionButton).exists()).toBe(true);
});
it('only renders reply placholder if disccusion is not resolvable', () => {
const discussion = { ...discussionMock };
discussion.resolvable = false;
createComponent({ discussion });
expect(wrapper.find(ReplyPlaceholder).exists()).toBe(true);
expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(false);
expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(false);
expect(wrapper.find(JumpToNextDiscussionButton).exists()).toBe(false);
});
it('does not render resolve with issue button if resolveWithIssuePath is falsy', () => {
createComponent({ resolveWithIssuePath: '' });
expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(false);
});
it('does not render jump to next discussion button if shouldShowJumpToNextDiscussion is false', () => {
createComponent({ shouldShowJumpToNextDiscussion: false });
expect(wrapper.find(JumpToNextDiscussionButton).exists()).toBe(false);
});
describe.each`
desc | notes | shouldRender
${'with no notes'} | ${[]} | ${true}
${'with resolvable notes'} | ${[createResolvableNote(), createResolvableNote()]} | ${true}
${'with unresolvable notes'} | ${[createResolvableNote(), createUnresolvableNote()]} | ${true}
${'with unallowed note'} | ${[createResolvableNote(), createUnallowedNote()]} | ${false}
`('$desc', ({ notes, shouldRender }) => {
beforeEach(() => {
createComponent({
discussion: createDiscussionMock({ notes }),
});
});
it(shouldRender ? 'renders resolve buttons' : 'does not render resolve buttons', () => {
expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(shouldRender);
expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(shouldRender);
});
});
});
it('does not render jump to next discussion button if feature flag is enabled', () => {
const createComponent = createComponentFactory();
createComponent({}, { hideJumpToNextUnresolvedInThreads: true });
expect(wrapper.find(JumpToNextDiscussionButton).exists()).toBe(false);
});
describe('events handling', () => {
const createComponent = createComponentFactory(false);
beforeEach(() => {
createComponent();
});
it('emits showReplyForm event when clicking on reply placeholder', () => {
jest.spyOn(wrapper.vm, '$emit');
wrapper
.find(ReplyPlaceholder)
.find('button')
.trigger('click');
expect(wrapper.vm.$emit).toHaveBeenCalledWith('showReplyForm');
});
it('emits resolve event when clicking on resolve button', () => {
jest.spyOn(wrapper.vm, '$emit');
wrapper
.find(ResolveDiscussionButton)
.find('button')
.trigger('click');
expect(wrapper.vm.$emit).toHaveBeenCalledWith('resolve');
});
});
});
|
