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
|
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { IndexMlModels } from '~/ml/model_registry/apps';
import ModelRow from '~/ml/model_registry/components/model_row.vue';
import { TITLE_LABEL, NO_MODELS_LABEL } from '~/ml/model_registry/translations';
import Pagination from '~/vue_shared/components/incubation/pagination.vue';
import SearchBar from '~/ml/model_registry/components/search_bar.vue';
import { BASE_SORT_FIELDS } from '~/ml/model_registry/constants';
import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
import { mockModels, startCursor, defaultPageInfo } from '../mock_data';
let wrapper;
const createWrapper = (
propsData = { models: mockModels, pageInfo: defaultPageInfo, modelCount: 2 },
) => {
wrapper = shallowMountExtended(IndexMlModels, { propsData });
};
const findModelRow = (index) => wrapper.findAllComponents(ModelRow).at(index);
const findPagination = () => wrapper.findComponent(Pagination);
const findEmptyLabel = () => wrapper.findByText(NO_MODELS_LABEL);
const findSearchBar = () => wrapper.findComponent(SearchBar);
const findTitleArea = () => wrapper.findComponent(TitleArea);
const findModelCountMetadataItem = () => findTitleArea().findComponent(MetadataItem);
describe('MlModelsIndex', () => {
describe('empty state', () => {
beforeEach(() => createWrapper({ models: [], pageInfo: defaultPageInfo }));
it('displays empty state when no experiment', () => {
expect(findEmptyLabel().exists()).toBe(true);
});
it('does not show pagination', () => {
expect(findPagination().exists()).toBe(false);
});
it('does not show search bar', () => {
expect(findSearchBar().exists()).toBe(false);
});
});
describe('with data', () => {
beforeEach(() => {
createWrapper();
});
it('does not show empty state', () => {
expect(findEmptyLabel().exists()).toBe(false);
});
describe('header', () => {
it('displays the title', () => {
expect(findTitleArea().props('title')).toBe(TITLE_LABEL);
});
it('sets model metadata item to model count', () => {
expect(findModelCountMetadataItem().props('text')).toBe(`2 models`);
});
});
it('adds a search bar', () => {
expect(findSearchBar().props()).toMatchObject({ sortableFields: BASE_SORT_FIELDS });
});
describe('model list', () => {
it('displays the models', () => {
expect(findModelRow(0).props('model')).toMatchObject(mockModels[0]);
expect(findModelRow(1).props('model')).toMatchObject(mockModels[1]);
});
});
describe('pagination', () => {
it('should show', () => {
expect(findPagination().exists()).toBe(true);
});
it('passes pagination to pagination component', () => {
expect(findPagination().props('startCursor')).toBe(startCursor);
});
});
});
});
|
