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
171
172
173
174
175
176
177
178
179
180
181
182
|
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import * as Sentry from '~/sentry/sentry_browser_wrapper';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import CandidateList from '~/ml/model_registry/components/candidate_list.vue';
import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
import CandidateListRow from '~/ml/model_registry/components/candidate_list_row.vue';
import getModelCandidatesQuery from '~/ml/model_registry/graphql/queries/get_model_candidates.query.graphql';
import { GRAPHQL_PAGE_SIZE } from '~/ml/model_registry/constants';
import {
emptyCandidateQuery,
modelCandidatesQuery,
graphqlCandidates,
graphqlPageInfo,
} from '../graphql_mock_data';
Vue.use(VueApollo);
describe('ml/model_registry/components/candidate_list.vue', () => {
let wrapper;
let apolloProvider;
const findAlert = () => wrapper.findComponent(GlAlert);
const findLoader = () => wrapper.findComponent(PackagesListLoader);
const findRegistryList = () => wrapper.findComponent(RegistryList);
const findListRow = () => wrapper.findComponent(CandidateListRow);
const findAllRows = () => wrapper.findAllComponents(CandidateListRow);
const mountComponent = ({
props = {},
resolver = jest.fn().mockResolvedValue(modelCandidatesQuery()),
} = {}) => {
const requestHandlers = [[getModelCandidatesQuery, resolver]];
apolloProvider = createMockApollo(requestHandlers);
wrapper = shallowMount(CandidateList, {
apolloProvider,
propsData: {
modelId: 2,
...props,
},
stubs: {
RegistryList,
},
});
};
beforeEach(() => {
jest.spyOn(Sentry, 'captureException').mockImplementation();
});
describe('when list is loaded and has no data', () => {
const resolver = jest.fn().mockResolvedValue(emptyCandidateQuery);
beforeEach(async () => {
mountComponent({ resolver });
await waitForPromises();
});
it('displays empty slot message', () => {
expect(wrapper.text()).toContain('This model has no candidates');
});
it('does not display loader', () => {
expect(findLoader().exists()).toBe(false);
});
it('does not display rows', () => {
expect(findListRow().exists()).toBe(false);
});
it('does not display registry list', () => {
expect(findRegistryList().exists()).toBe(false);
});
it('does not display alert', () => {
expect(findAlert().exists()).toBe(false);
});
});
describe('if load fails, alert', () => {
beforeEach(async () => {
const error = new Error('Failure!');
mountComponent({ resolver: jest.fn().mockRejectedValue(error) });
await waitForPromises();
});
it('is displayed', () => {
expect(findAlert().exists()).toBe(true);
});
it('shows error message', () => {
expect(findAlert().text()).toContain('Failed to load model candidates with error: Failure!');
});
it('is not dismissible', () => {
expect(findAlert().props('dismissible')).toBe(false);
});
it('is of variant danger', () => {
expect(findAlert().attributes('variant')).toBe('danger');
});
it('error is logged in sentry', () => {
expect(Sentry.captureException).toHaveBeenCalled();
});
});
describe('when list is loaded with data', () => {
beforeEach(async () => {
mountComponent();
await waitForPromises();
});
it('displays package registry list', () => {
expect(findRegistryList().exists()).toEqual(true);
});
it('binds the right props', () => {
expect(findRegistryList().props()).toMatchObject({
items: graphqlCandidates,
pagination: {},
isLoading: false,
hiddenDelete: true,
});
});
it('displays candidate rows', () => {
expect(findAllRows().exists()).toEqual(true);
expect(findAllRows()).toHaveLength(graphqlCandidates.length);
});
it('binds the correct props', () => {
expect(findAllRows().at(0).props()).toMatchObject({
candidate: expect.objectContaining(graphqlCandidates[0]),
});
expect(findAllRows().at(1).props()).toMatchObject({
candidate: expect.objectContaining(graphqlCandidates[1]),
});
});
it('does not display loader', () => {
expect(findLoader().exists()).toBe(false);
});
it('does not display empty message', () => {
expect(findAlert().exists()).toBe(false);
});
});
describe('when user interacts with pagination', () => {
const resolver = jest.fn().mockResolvedValue(modelCandidatesQuery());
beforeEach(async () => {
mountComponent({ resolver });
await waitForPromises();
});
it('when list emits next-page fetches the next set of records', async () => {
findRegistryList().vm.$emit('next-page');
await waitForPromises();
expect(resolver).toHaveBeenLastCalledWith(
expect.objectContaining({ after: graphqlPageInfo.endCursor, first: GRAPHQL_PAGE_SIZE }),
);
});
it('when list emits prev-page fetches the prev set of records', async () => {
findRegistryList().vm.$emit('prev-page');
await waitForPromises();
expect(resolver).toHaveBeenLastCalledWith(
expect.objectContaining({ before: graphqlPageInfo.startCursor, last: GRAPHQL_PAGE_SIZE }),
);
});
});
});
|
