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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
import { GlAlert, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import { fetchGroups } from '~/jira_connect/api';
import GroupsList from '~/jira_connect/components/groups_list.vue';
import GroupsListItem from '~/jira_connect/components/groups_list_item.vue';
import { mockGroup1, mockGroup2 } from '../mock_data';
jest.mock('~/jira_connect/api', () => {
return {
fetchGroups: jest.fn(),
};
});
const mockGroupsPath = '/groups';
describe('GroupsList', () => {
let wrapper;
const mockEmptyResponse = { data: [] };
const createComponent = (options = {}) => {
wrapper = extendedWrapper(
shallowMount(GroupsList, {
provide: {
groupsPath: mockGroupsPath,
},
...options,
}),
);
};
afterEach(() => {
wrapper.destroy();
});
const findGlAlert = () => wrapper.findComponent(GlAlert);
const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findAllItems = () => wrapper.findAll(GroupsListItem);
const findFirstItem = () => findAllItems().at(0);
const findSecondItem = () => findAllItems().at(1);
const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
const findGroupsList = () => wrapper.findByTestId('groups-list');
describe('when groups are loading', () => {
it('renders loading icon', async () => {
fetchGroups.mockReturnValue(new Promise(() => {}));
createComponent();
await wrapper.vm.$nextTick();
expect(findGlLoadingIcon().exists()).toBe(true);
});
});
describe('when groups fetch fails', () => {
it('renders error message', async () => {
fetchGroups.mockRejectedValue();
createComponent();
await waitForPromises();
expect(findGlLoadingIcon().exists()).toBe(false);
expect(findGlAlert().exists()).toBe(true);
expect(findGlAlert().text()).toBe('Failed to load namespaces. Please try again.');
});
});
describe('with no groups returned', () => {
it('renders empty state', async () => {
fetchGroups.mockResolvedValue(mockEmptyResponse);
createComponent();
await waitForPromises();
expect(findGlLoadingIcon().exists()).toBe(false);
expect(wrapper.text()).toContain('No available namespaces');
});
});
describe('with groups returned', () => {
beforeEach(async () => {
fetchGroups.mockResolvedValue({
headers: { 'X-PAGE': 1, 'X-TOTAL': 2 },
data: [mockGroup1, mockGroup2],
});
createComponent();
await waitForPromises();
});
it('renders groups list', () => {
expect(findAllItems()).toHaveLength(2);
expect(findFirstItem().props('group')).toBe(mockGroup1);
expect(findSecondItem().props('group')).toBe(mockGroup2);
});
it('sets GroupListItem `disabled` prop to `false`', () => {
findAllItems().wrappers.forEach((groupListItem) => {
expect(groupListItem.props('disabled')).toBe(false);
});
});
it('does not set opacity of the groups list', () => {
expect(findGroupsList().classes()).not.toContain('gl-opacity-5');
});
it('shows error message on $emit from item', async () => {
const errorMessage = 'error message';
findFirstItem().vm.$emit('error', errorMessage);
await wrapper.vm.$nextTick();
expect(findGlAlert().exists()).toBe(true);
expect(findGlAlert().text()).toContain(errorMessage);
});
describe('when searching groups', () => {
const mockSearchTeam = 'mock search term';
describe('while groups are loading', () => {
beforeEach(async () => {
fetchGroups.mockClear();
fetchGroups.mockReturnValue(new Promise(() => {}));
findSearchBox().vm.$emit('input', mockSearchTeam);
await wrapper.vm.$nextTick();
});
it('calls `fetchGroups` with search term', () => {
expect(fetchGroups).toHaveBeenCalledWith(mockGroupsPath, {
page: 1,
perPage: 10,
search: mockSearchTeam,
});
});
it('disables GroupListItems', async () => {
findAllItems().wrappers.forEach((groupListItem) => {
expect(groupListItem.props('disabled')).toBe(true);
});
});
it('sets opacity of the groups list', () => {
expect(findGroupsList().classes()).toContain('gl-opacity-5');
});
it('sets loading prop of ths search box', () => {
expect(findSearchBox().props('isLoading')).toBe(true);
});
});
describe('when group search finishes loading', () => {
beforeEach(async () => {
fetchGroups.mockResolvedValue({ data: [mockGroup1] });
findSearchBox().vm.$emit('input');
await waitForPromises();
});
it('renders new groups list', () => {
expect(findAllItems()).toHaveLength(1);
expect(findFirstItem().props('group')).toBe(mockGroup1);
});
});
});
});
});
|
