1 files changed, 40 insertions, 5 deletions

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);
+    });
   });
 });