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
|
import { mount } from '@vue/test-utils';
import { GlCollapsibleListbox, GlListboxItem, GlButton } from '@gitlab/ui';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import DiscussionFilter from '~/notes/components/mr_discussion_filter.vue';
import { MR_FILTER_OPTIONS } from '~/notes/constants';
Vue.use(Vuex);
describe('Merge request discussion filter component', () => {
let wrapper;
let store;
let updateMergeRequestFilters;
let setDiscussionSortDirection;
function createComponent(mergeRequestFilters = MR_FILTER_OPTIONS.map((f) => f.value)) {
updateMergeRequestFilters = jest.fn();
setDiscussionSortDirection = jest.fn();
store = new Vuex.Store({
modules: {
notes: {
state: {
mergeRequestFilters,
discussionSortOrder: 'asc',
},
actions: {
updateMergeRequestFilters,
setDiscussionSortDirection,
},
},
},
});
wrapper = mount(DiscussionFilter, {
store,
});
}
afterEach(() => {
localStorage.removeItem('mr_activity_filters');
localStorage.removeItem('sort_direction_merge_request');
});
describe('local sync sort direction', () => {
it('calls setDiscussionSortDirection when mounted', () => {
localStorage.setItem('sort_direction_merge_request', 'desc');
createComponent();
expect(setDiscussionSortDirection).toHaveBeenCalledWith(expect.anything(), {
direction: 'desc',
});
});
});
describe('local sync sort filters', () => {
it('calls setDiscussionSortDirection when mounted', () => {
localStorage.setItem('mr_activity_filters', '["comments"]');
createComponent();
expect(updateMergeRequestFilters).toHaveBeenCalledWith(expect.anything(), ['comments']);
});
});
it('lists current filters', () => {
createComponent();
expect(wrapper.findAllComponents(GlListboxItem).length).toBe(MR_FILTER_OPTIONS.length);
});
it('updates store when selecting filter', async () => {
createComponent();
wrapper.findComponent(GlListboxItem).vm.$emit('select');
await nextTick();
wrapper.findComponent(GlCollapsibleListbox).vm.$emit('hidden');
expect(updateMergeRequestFilters).toHaveBeenCalledWith(expect.anything(), [
'assignees_reviewers',
'comments',
'commit_branches',
'edits',
'labels',
'lock_status',
'mentions',
'status',
'tracking',
]);
});
it.each`
state | expectedText
${['status']} | ${'Merge request status'}
${['status', 'comments']} | ${'Merge request status +1 more'}
${[]} | ${'None'}
${MR_FILTER_OPTIONS.map((f) => f.value)} | ${'All activity'}
`('updates toggle text to $expectedText with $state', async ({ state, expectedText }) => {
createComponent();
store.state.notes.mergeRequestFilters = state;
await nextTick();
expect(wrapper.findComponent(GlButton).text()).toBe(expectedText);
});
});
|
