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
|
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { GlSkeletonLoader } from '@gitlab/ui';
import HarborListHeader from '~/packages_and_registries/harbor_registry/components/list/harbor_list_header.vue';
import HarborRegistryList from '~/packages_and_registries/harbor_registry/pages/list.vue';
import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
import waitForPromises from 'helpers/wait_for_promises';
// import { harborListResponse } from '~/packages_and_registries/harbor_registry/mock_api.js';
import HarborList from '~/packages_and_registries/harbor_registry/components/list/harbor_list.vue';
import CliCommands from '~/packages_and_registries/shared/components/cli_commands.vue';
import { SORT_FIELDS } from '~/packages_and_registries/harbor_registry/constants/index';
import { harborListResponse, dockerCommands } from '../mock_data';
let mockHarborListResponse;
jest.mock('~/packages_and_registries/harbor_registry/mock_api.js', () => ({
harborListResponse: () => mockHarborListResponse,
}));
describe('Harbor List Page', () => {
let wrapper;
const waitForHarborPageRequest = async () => {
await waitForPromises();
await nextTick();
};
beforeEach(() => {
mockHarborListResponse = Promise.resolve(harborListResponse);
});
const findHarborListHeader = () => wrapper.findComponent(HarborListHeader);
const findPersistedSearch = () => wrapper.findComponent(PersistedSearch);
const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
const findHarborList = () => wrapper.findComponent(HarborList);
const findCliCommands = () => wrapper.findComponent(CliCommands);
const fireFirstSortUpdate = () => {
findPersistedSearch().vm.$emit('update', { sort: 'UPDATED_DESC', filters: [] });
};
const mountComponent = ({ config = { isGroupPage: false } } = {}) => {
wrapper = shallowMount(HarborRegistryList, {
stubs: {
HarborListHeader,
},
provide() {
return {
config,
...dockerCommands,
};
},
});
};
afterEach(() => {
wrapper.destroy();
});
it('contains harbor registry header', async () => {
mountComponent();
fireFirstSortUpdate();
await waitForHarborPageRequest();
await nextTick();
expect(findHarborListHeader().exists()).toBe(true);
expect(findHarborListHeader().props()).toMatchObject({
imagesCount: 3,
metadataLoading: false,
});
});
describe('isLoading is true', () => {
it('shows the skeleton loader', async () => {
mountComponent();
fireFirstSortUpdate();
expect(findSkeletonLoader().exists()).toBe(true);
});
it('harborList is not visible', () => {
mountComponent();
expect(findHarborList().exists()).toBe(false);
});
it('cli commands is not visible', () => {
mountComponent();
expect(findCliCommands().exists()).toBe(false);
});
it('title has the metadataLoading props set to true', async () => {
mountComponent();
fireFirstSortUpdate();
expect(findHarborListHeader().props('metadataLoading')).toBe(true);
});
});
describe('list is not empty', () => {
describe('unfiltered state', () => {
it('quick start is visible', async () => {
mountComponent();
fireFirstSortUpdate();
await waitForHarborPageRequest();
await nextTick();
expect(findCliCommands().exists()).toBe(true);
});
it('list component is visible', async () => {
mountComponent();
fireFirstSortUpdate();
await waitForHarborPageRequest();
await nextTick();
expect(findHarborList().exists()).toBe(true);
});
});
describe('search and sorting', () => {
it('has a persisted search box element', async () => {
mountComponent();
fireFirstSortUpdate();
await waitForHarborPageRequest();
await nextTick();
const harborRegistrySearch = findPersistedSearch();
expect(harborRegistrySearch.exists()).toBe(true);
expect(harborRegistrySearch.props()).toMatchObject({
defaultOrder: 'UPDATED',
defaultSort: 'desc',
sortableFields: SORT_FIELDS,
});
});
});
});
});
|
