1 files changed, 39 insertions, 6 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 66a447e73d3..07d8b4b8b3d 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,4 +1,4 @@
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlButton } 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';
@@ -8,13 +8,22 @@ 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 ActionsDropdown from '~/ml/model_registry/components/actions_dropdown.vue';
 import { mockModels, startCursor, defaultPageInfo } from '../mock_data';
 
 let wrapper;
-const createWrapper = (
-  propsData = { models: mockModels, pageInfo: defaultPageInfo, modelCount: 2 },
-) => {
-  wrapper = shallowMountExtended(IndexMlModels, { propsData });
+
+const createWrapper = (propsData = {}) => {
+  wrapper = shallowMountExtended(IndexMlModels, {
+    propsData: {
+      models: mockModels,
+      pageInfo: defaultPageInfo,
+      modelCount: 2,
+      createModelPath: 'path/to/create',
+      canWriteModelRegistry: false,
+      ...propsData,
+    },
+  });
 };
 
 const findModelRow = (index) => wrapper.findAllComponents(ModelRow).at(index);
@@ -24,8 +33,10 @@ const findSearchBar = () => wrapper.findComponent(SearchBar);
 const findTitleArea = () => wrapper.findComponent(TitleArea);
 const findModelCountMetadataItem = () => findTitleArea().findComponent(MetadataItem);
 const findBadge = () => wrapper.findComponent(GlBadge);
+const findCreateButton = () => findTitleArea().findComponent(GlButton);
+const findActionsDropdown = () => wrapper.findComponent(ActionsDropdown);
 
-describe('MlModelsIndex', () => {
+describe('ml/model_registry/apps/index_ml_models', () => {
   describe('empty state', () => {
     beforeEach(() => createWrapper({ models: [], pageInfo: defaultPageInfo }));
 
@@ -40,6 +51,28 @@ describe('MlModelsIndex', () => {
     it('does not show search bar', () => {
       expect(findSearchBar().exists()).toBe(false);
     });
+
+    it('renders the extra actions button', () => {
+      expect(findActionsDropdown().exists()).toBe(true);
+    });
+  });
+
+  describe('create button', () => {
+    describe('when user has no permission to write model registry', () => {
+      it('does not display create button', () => {
+        createWrapper();
+
+        expect(findCreateButton().exists()).toBe(false);
+      });
+    });
+
+    describe('when user has permission to write model registry', () => {
+      it('displays create button', () => {
+        createWrapper({ canWriteModelRegistry: true });
+
+        expect(findCreateButton().attributes().href).toBe('path/to/create');
+      });
+    });
   });
 
   describe('with data', () => {