diff options
Diffstat (limited to 'spec/frontend/ml/model_registry/apps')
3 files changed, 66 insertions, 15 deletions
diff --git a/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js b/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js index 6e0ab2ebe2d..66a447e73d3 100644 --- a/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js +++ b/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js @@ -1,12 +1,13 @@ +import { GlBadge } from '@gitlab/ui'; 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 { BASE_SORT_FIELDS, MODEL_ENTITIES } 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 EmptyState from '~/ml/model_registry/components/empty_state.vue'; import { mockModels, startCursor, defaultPageInfo } from '../mock_data'; let wrapper; @@ -18,17 +19,18 @@ const createWrapper = ( const findModelRow = (index) => wrapper.findAllComponents(ModelRow).at(index); const findPagination = () => wrapper.findComponent(Pagination); -const findEmptyLabel = () => wrapper.findByText(NO_MODELS_LABEL); +const findEmptyState = () => wrapper.findComponent(EmptyState); const findSearchBar = () => wrapper.findComponent(SearchBar); const findTitleArea = () => wrapper.findComponent(TitleArea); const findModelCountMetadataItem = () => findTitleArea().findComponent(MetadataItem); +const findBadge = () => wrapper.findComponent(GlBadge); describe('MlModelsIndex', () => { describe('empty state', () => { beforeEach(() => createWrapper({ models: [], pageInfo: defaultPageInfo })); - it('displays empty state when no experiment', () => { - expect(findEmptyLabel().exists()).toBe(true); + it('shows empty state', () => { + expect(findEmptyState().props('entityType')).toBe(MODEL_ENTITIES.model); }); it('does not show pagination', () => { @@ -46,12 +48,16 @@ describe('MlModelsIndex', () => { }); it('does not show empty state', () => { - expect(findEmptyLabel().exists()).toBe(false); + expect(findEmptyState().exists()).toBe(false); }); describe('header', () => { it('displays the title', () => { - expect(findTitleArea().props('title')).toBe(TITLE_LABEL); + expect(findTitleArea().text()).toContain('Model registry'); + }); + + it('displays the experiment badge', () => { + expect(findBadge().attributes().href).toBe('/help/user/project/ml/model_registry/index.md'); }); it('sets model metadata item to model count', () => { diff --git a/spec/frontend/ml/model_registry/apps/show_ml_model_spec.js b/spec/frontend/ml/model_registry/apps/show_ml_model_spec.js index bc4770976a9..1fe0f5f88b3 100644 --- a/spec/frontend/ml/model_registry/apps/show_ml_model_spec.js +++ b/spec/frontend/ml/model_registry/apps/show_ml_model_spec.js @@ -1,22 +1,41 @@ import { GlBadge, GlTab } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; import { ShowMlModel } from '~/ml/model_registry/apps'; +import ModelVersionList from '~/ml/model_registry/components/model_version_list.vue'; +import CandidateList from '~/ml/model_registry/components/candidate_list.vue'; +import ModelVersionDetail from '~/ml/model_registry/components/model_version_detail.vue'; +import EmptyState from '~/ml/model_registry/components/empty_state.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; -import { NO_VERSIONS_LABEL } from '~/ml/model_registry/translations'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import { MODEL_ENTITIES } from '~/ml/model_registry/constants'; import { MODEL, makeModel } from '../mock_data'; +const apolloProvider = createMockApollo([]); let wrapper; + +Vue.use(VueApollo); + const createWrapper = (model = MODEL) => { - wrapper = shallowMount(ShowMlModel, { propsData: { model } }); + wrapper = shallowMount(ShowMlModel, { + apolloProvider, + propsData: { model }, + stubs: { GlTab }, + }); }; const findDetailTab = () => wrapper.findAllComponents(GlTab).at(0); const findVersionsTab = () => wrapper.findAllComponents(GlTab).at(1); const findVersionsCountBadge = () => findVersionsTab().findComponent(GlBadge); +const findModelVersionList = () => findVersionsTab().findComponent(ModelVersionList); +const findModelVersionDetail = () => findDetailTab().findComponent(ModelVersionDetail); const findCandidateTab = () => wrapper.findAllComponents(GlTab).at(2); +const findCandidateList = () => findCandidateTab().findComponent(CandidateList); const findCandidatesCountBadge = () => findCandidateTab().findComponent(GlBadge); const findTitleArea = () => wrapper.findComponent(TitleArea); +const findEmptyState = () => wrapper.findComponent(EmptyState); const findVersionCountMetadataItem = () => findTitleArea().findComponent(MetadataItem); describe('ShowMlModel', () => { @@ -45,7 +64,11 @@ describe('ShowMlModel', () => { describe('when it has latest version', () => { it('displays the version', () => { - expect(findDetailTab().text()).toContain(MODEL.latestVersion.version); + expect(findModelVersionDetail().props('modelVersion')).toBe(MODEL.latestVersion); + }); + + it('displays the title', () => { + expect(findDetailTab().text()).toContain('Latest version: 1.2.3'); }); }); @@ -54,8 +77,12 @@ describe('ShowMlModel', () => { createWrapper(makeModel({ latestVersion: null })); }); - it('shows no version message', () => { - expect(findDetailTab().text()).toContain(NO_VERSIONS_LABEL); + it('shows empty state', () => { + expect(findEmptyState().props('entityType')).toBe(MODEL_ENTITIES.modelVersion); + }); + + it('does not render model version detail', () => { + expect(findModelVersionDetail().exists()).toBe(false); }); }); }); @@ -66,6 +93,10 @@ describe('ShowMlModel', () => { it('shows the number of versions in the tab', () => { expect(findVersionsCountBadge().text()).toBe(MODEL.versionCount.toString()); }); + + it('shows a list of model versions', () => { + expect(findModelVersionList().props('modelId')).toBe(MODEL.id); + }); }); describe('Candidates tab', () => { @@ -74,5 +105,9 @@ describe('ShowMlModel', () => { it('shows the number of candidates in the tab', () => { expect(findCandidatesCountBadge().text()).toBe(MODEL.candidateCount.toString()); }); + + it('shows a list of candidates', () => { + expect(findCandidateList().props('modelId')).toBe(MODEL.id); + }); }); }); diff --git a/spec/frontend/ml/model_registry/apps/show_ml_model_version_spec.js b/spec/frontend/ml/model_registry/apps/show_ml_model_version_spec.js index 77fca53c00e..2605a75d961 100644 --- a/spec/frontend/ml/model_registry/apps/show_ml_model_version_spec.js +++ b/spec/frontend/ml/model_registry/apps/show_ml_model_version_spec.js @@ -1,5 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { ShowMlModelVersion } from '~/ml/model_registry/apps'; +import ModelVersionDetail from '~/ml/model_registry/components/model_version_detail.vue'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import { MODEL_VERSION } from '../mock_data'; let wrapper; @@ -7,9 +9,17 @@ const createWrapper = () => { wrapper = shallowMount(ShowMlModelVersion, { propsData: { modelVersion: MODEL_VERSION } }); }; -describe('ShowMlModelVersion', () => { +const findTitleArea = () => wrapper.findComponent(TitleArea); +const findModelVersionDetail = () => wrapper.findComponent(ModelVersionDetail); + +describe('ml/model_registry/apps/show_model_version.vue', () => { beforeEach(() => createWrapper()); - it('renders the app', () => { - expect(wrapper.text()).toContain(`${MODEL_VERSION.model.name} - ${MODEL_VERSION.version}`); + + it('renders the title', () => { + expect(findTitleArea().props('title')).toBe('blah / 1.2.3'); + }); + + it('renders the model version detail', () => { + expect(findModelVersionDetail().props('modelVersion')).toBe(MODEL_VERSION); }); }); |