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
|
import createStore from '~/notes/stores';
import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
import { discussionMock } from '../../../javascripts/notes/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';
// 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: true } });
const createUnresolvableNote = () =>
createNoteMock({ resolvable: false, current_user: { can_resolve: false } });
const createUnallowedNote = () =>
createNoteMock({ resolvable: true, current_user: { can_resolve: false } });
describe('DiscussionActions', () => {
let wrapper;
const createComponentFactory = (shallow = true) => props => {
const localVue = createLocalVue();
const store = createStore();
const mountFn = shallow ? shallowMount : mount;
wrapper = mountFn(DiscussionActions, {
localVue,
store,
propsData: {
discussion: discussionMock,
isResolving: false,
resolveButtonTitle: 'Resolve discussion',
resolveWithIssuePath: '/some/issue/path',
shouldShowJumpToNextDiscussion: true,
...props,
},
});
};
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);
});
});
});
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');
});
it('emits jumpToNextDiscussion event when clicking on jump to next discussion button', () => {
jest.spyOn(wrapper.vm, '$emit');
wrapper
.find(JumpToNextDiscussionButton)
.find('button')
.trigger('click');
expect(wrapper.vm.$emit).toHaveBeenCalledWith('jumpToNextDiscussion');
});
});
});
|
