Add latest changes from gitlab-org/gitlab@master

2 files changed, 84 insertions, 7 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 57a5a5f003f..bc4770976a9 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,15 +1,78 @@
+import { GlBadge, GlTab } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { ShowMlModel } from '~/ml/model_registry/apps';
-import { MODEL } from '../mock_data';
+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 { MODEL, makeModel } from '../mock_data';
 
 let wrapper;
-const createWrapper = () => {
-  wrapper = shallowMount(ShowMlModel, { propsData: { model: MODEL } });
+const createWrapper = (model = MODEL) => {
+  wrapper = shallowMount(ShowMlModel, { propsData: { model } });
 };
 
+const findDetailTab = () => wrapper.findAllComponents(GlTab).at(0);
+const findVersionsTab = () => wrapper.findAllComponents(GlTab).at(1);
+const findVersionsCountBadge = () => findVersionsTab().findComponent(GlBadge);
+const findCandidateTab = () => wrapper.findAllComponents(GlTab).at(2);
+const findCandidatesCountBadge = () => findCandidateTab().findComponent(GlBadge);
+const findTitleArea = () => wrapper.findComponent(TitleArea);
+const findVersionCountMetadataItem = () => findTitleArea().findComponent(MetadataItem);
+
 describe('ShowMlModel', () => {
-  beforeEach(() => createWrapper());
-  it('renders the app', () => {
-    expect(wrapper.text()).toContain(MODEL.name);
+  describe('Title', () => {
+    beforeEach(() => createWrapper());
+
+    it('title is set to model name', () => {
+      expect(findTitleArea().props('title')).toBe(MODEL.name);
+    });
+
+    it('subheader is set to description', () => {
+      expect(findTitleArea().text()).toContain(MODEL.description);
+    });
+
+    it('sets version metadata item to version count', () => {
+      expect(findVersionCountMetadataItem().props('text')).toBe(`${MODEL.versionCount} versions`);
+    });
+  });
+
+  describe('Details', () => {
+    beforeEach(() => createWrapper());
+
+    it('has a details tab', () => {
+      expect(findDetailTab().attributes('title')).toBe('Details');
+    });
+
+    describe('when it has latest version', () => {
+      it('displays the version', () => {
+        expect(findDetailTab().text()).toContain(MODEL.latestVersion.version);
+      });
+    });
+
+    describe('when it does not have latest version', () => {
+      beforeEach(() => {
+        createWrapper(makeModel({ latestVersion: null }));
+      });
+
+      it('shows no version message', () => {
+        expect(findDetailTab().text()).toContain(NO_VERSIONS_LABEL);
+      });
+    });
+  });
+
+  describe('Versions tab', () => {
+    beforeEach(() => createWrapper());
+
+    it('shows the number of versions in the tab', () => {
+      expect(findVersionsCountBadge().text()).toBe(MODEL.versionCount.toString());
+    });
+  });
+
+  describe('Candidates tab', () => {
+    beforeEach(() => createWrapper());
+
+    it('shows the number of candidates in the tab', () => {
+      expect(findCandidatesCountBadge().text()).toBe(MODEL.candidateCount.toString());
+    });
   });
 });
diff --git a/spec/frontend/ml/model_registry/mock_data.js b/spec/frontend/ml/model_registry/mock_data.js
index 35a2c3bec01..bed0de36e5d 100644
--- a/spec/frontend/ml/model_registry/mock_data.js
+++ b/spec/frontend/ml/model_registry/mock_data.js
@@ -1,3 +1,17 @@
-export const MODEL = { name: 'blah' };
+const LATEST_VERSION = {
+  version: '1.2.3',
+};
+
+export const makeModel = ({ latestVersion } = { latestVersion: LATEST_VERSION }) => ({
+  id: 1234,
+  name: 'blah',
+  path: 'path/to/blah',
+  description: 'Description of the model',
+  latestVersion,
+  versionCount: 2,
+  candidateCount: 1,
+});
+
+export const MODEL = makeModel();
 
 export const MODEL_VERSION = { version: '1.2.3', model: MODEL };