diff options
Diffstat (limited to 'spec/frontend/ml/model_registry/routes/models/index')
3 files changed, 106 insertions, 23 deletions
diff --git a/spec/frontend/ml/model_registry/routes/models/index/components/ml_models_index_spec.js b/spec/frontend/ml/model_registry/routes/models/index/components/ml_models_index_spec.js index d1715ccd8f1..c1b9aef9634 100644 --- a/spec/frontend/ml/model_registry/routes/models/index/components/ml_models_index_spec.js +++ b/spec/frontend/ml/model_registry/routes/models/index/components/ml_models_index_spec.js @@ -1,39 +1,63 @@ -import { GlLink } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import MlModelsIndexApp from '~/ml/model_registry/routes/models/index'; -import { TITLE_LABEL } from '~/ml/model_registry/routes/models/index/translations'; -import { mockModels } from './mock_data'; +import ModelRow from '~/ml/model_registry/routes/models/index/components/model_row.vue'; +import { TITLE_LABEL, NO_MODELS_LABEL } from '~/ml/model_registry/routes/models/index/translations'; +import Pagination from '~/vue_shared/components/incubation/pagination.vue'; +import { mockModels, startCursor, defaultPageInfo } from './mock_data'; let wrapper; -const createWrapper = (models = mockModels) => { - wrapper = shallowMountExtended(MlModelsIndexApp, { - propsData: { models }, - }); +const createWrapper = (propsData = { models: mockModels, pageInfo: defaultPageInfo }) => { + wrapper = shallowMountExtended(MlModelsIndexApp, { propsData }); }; -const findModelLink = (index) => wrapper.findAllComponents(GlLink).at(index); -const modelLinkText = (index) => findModelLink(index).text(); -const modelLinkHref = (index) => findModelLink(index).attributes('href'); +const findModelRow = (index) => wrapper.findAllComponents(ModelRow).at(index); +const findPagination = () => wrapper.findComponent(Pagination); const findTitle = () => wrapper.findByText(TITLE_LABEL); +const findEmptyLabel = () => wrapper.findByText(NO_MODELS_LABEL); describe('MlModelsIndex', () => { - beforeEach(() => { - createWrapper(); - }); + describe('empty state', () => { + beforeEach(() => createWrapper({ models: [], pageInfo: defaultPageInfo })); + + it('displays empty state when no experiment', () => { + expect(findEmptyLabel().exists()).toBe(true); + }); - describe('header', () => { - it('displays the title', () => { - expect(findTitle().exists()).toBe(true); + it('does not show pagination', () => { + expect(findPagination().exists()).toBe(false); }); }); - describe('model list', () => { - it('displays the models', () => { - expect(modelLinkHref(0)).toBe(mockModels[0].path); - expect(modelLinkText(0)).toBe(`${mockModels[0].name} / ${mockModels[0].version}`); + describe('with data', () => { + beforeEach(() => { + createWrapper(); + }); + + it('does not show empty state', () => { + expect(findEmptyLabel().exists()).toBe(false); + }); + + describe('header', () => { + it('displays the title', () => { + expect(findTitle().exists()).toBe(true); + }); + }); + + 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); + }); - expect(modelLinkHref(1)).toBe(mockModels[1].path); - expect(modelLinkText(1)).toBe(`${mockModels[1].name} / ${mockModels[1].version}`); + it('passes pagination to pagination component', () => { + expect(findPagination().props('startCursor')).toBe(startCursor); + }); }); }); }); diff --git a/spec/frontend/ml/model_registry/routes/models/index/components/mock_data.js b/spec/frontend/ml/model_registry/routes/models/index/components/mock_data.js index b8a999abbbd..841a543606f 100644 --- a/spec/frontend/ml/model_registry/routes/models/index/components/mock_data.js +++ b/spec/frontend/ml/model_registry/routes/models/index/components/mock_data.js @@ -3,10 +3,27 @@ export const mockModels = [ name: 'model_1', version: '1.0', path: 'path/to/model_1', + versionCount: 3, }, { name: 'model_2', - version: '1.0', + version: '1.1', path: 'path/to/model_2', + versionCount: 1, }, ]; + +export const modelWithoutVersion = { + name: 'model_without_version', + path: 'path/to/model_without_version', + versionCount: 0, +}; + +export const startCursor = 'eyJpZCI6IjE2In0'; + +export const defaultPageInfo = Object.freeze({ + startCursor, + endCursor: 'eyJpZCI6IjIifQ', + hasNextPage: true, + hasPreviousPage: true, +}); diff --git a/spec/frontend/ml/model_registry/routes/models/index/components/model_row_spec.js b/spec/frontend/ml/model_registry/routes/models/index/components/model_row_spec.js new file mode 100644 index 00000000000..7600288f560 --- /dev/null +++ b/spec/frontend/ml/model_registry/routes/models/index/components/model_row_spec.js @@ -0,0 +1,42 @@ +import { GlLink } from '@gitlab/ui'; +import { + mockModels, + modelWithoutVersion, +} from 'jest/ml/model_registry/routes/models/index/components/mock_data'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import ModelRow from '~/ml/model_registry/routes/models/index/components/model_row.vue'; + +let wrapper; +const createWrapper = (model = mockModels[0]) => { + wrapper = shallowMountExtended(ModelRow, { propsData: { model } }); +}; + +const findLink = () => wrapper.findComponent(GlLink); +const findMessage = (message) => wrapper.findByText(message); + +describe('ModelRow', () => { + beforeEach(() => { + createWrapper(); + }); + + it('Has a link to the model', () => { + expect(findLink().text()).toBe(mockModels[0].name); + expect(findLink().attributes('href')).toBe(mockModels[0].path); + }); + + it('Shows the latest version and the version count', () => { + expect(findMessage('1.0 · 3 versions').exists()).toBe(true); + }); + + it('Shows the latest version and no version count if it has only 1 version', () => { + createWrapper(mockModels[1]); + + expect(findMessage('1.1 · No other versions').exists()).toBe(true); + }); + + it('Shows no version message if model has no versions', () => { + createWrapper(modelWithoutVersion); + + expect(findMessage('No registered versions').exists()).toBe(true); + }); +}); |