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
|
import AxiosMockAdapter from 'axios-mock-adapter';
import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import ForkGroupsList from '~/pages/projects/forks/new/components/fork_groups_list.vue';
import ForkGroupsListItem from '~/pages/projects/forks/new/components/fork_groups_list_item.vue';
jest.mock('~/flash');
describe('Fork groups list component', () => {
let wrapper;
let axiosMock;
const DEFAULT_PROPS = {
endpoint: '/dummy',
hasReachedProjectLimit: false,
};
const replyWith = (...args) => axiosMock.onGet(DEFAULT_PROPS.endpoint).reply(...args);
const createWrapper = propsData => {
wrapper = shallowMount(ForkGroupsList, {
propsData: {
...DEFAULT_PROPS,
...propsData,
},
stubs: {
GlTabs: {
template: '<div><slot></slot><slot name="tabs-end"></slot></div>',
},
},
});
};
beforeEach(() => {
axiosMock = new AxiosMockAdapter(axios);
});
afterEach(() => {
axiosMock.reset();
if (wrapper) {
wrapper.destroy();
wrapper = null;
}
});
it('fires load groups request on mount', async () => {
replyWith(200, { namespaces: [] });
createWrapper();
await waitForPromises();
expect(axiosMock.history.get[0].url).toBe(DEFAULT_PROPS.endpoint);
});
it('displays flash if loading groups fails', async () => {
replyWith(500);
createWrapper();
await waitForPromises();
expect(createFlash).toHaveBeenCalled();
});
it('displays loading indicator while loading groups', () => {
replyWith(() => new Promise(() => {}));
createWrapper();
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
it('displays empty text if no groups are available', async () => {
const EMPTY_TEXT = 'No available groups to fork the project.';
replyWith(200, { namespaces: [] });
createWrapper();
await waitForPromises();
expect(wrapper.text()).toContain(EMPTY_TEXT);
});
it('displays filter field when groups are available', async () => {
replyWith(200, { namespaces: [{ name: 'dummy1' }, { name: 'dummy2' }] });
createWrapper();
await waitForPromises();
expect(wrapper.find(GlSearchBoxByType).exists()).toBe(true);
});
it('renders list items for each available group', async () => {
const namespaces = [{ name: 'dummy1' }, { name: 'dummy2' }, { name: 'otherdummy' }];
const hasReachedProjectLimit = true;
replyWith(200, { namespaces });
createWrapper({ hasReachedProjectLimit });
await waitForPromises();
expect(wrapper.findAll(ForkGroupsListItem)).toHaveLength(namespaces.length);
namespaces.forEach((namespace, idx) => {
expect(
wrapper
.findAll(ForkGroupsListItem)
.at(idx)
.props(),
).toStrictEqual({ group: namespace, hasReachedProjectLimit });
});
});
it('filters repositories on the fly', async () => {
replyWith(200, {
namespaces: [{ name: 'dummy1' }, { name: 'dummy2' }, { name: 'otherdummy' }],
});
createWrapper();
await waitForPromises();
wrapper.find(GlSearchBoxByType).vm.$emit('input', 'other');
await nextTick();
expect(wrapper.findAll(ForkGroupsListItem)).toHaveLength(1);
expect(
wrapper
.findAll(ForkGroupsListItem)
.at(0)
.props().group.name,
).toBe('otherdummy');
});
});
|
