Add latest changes from gitlab-org/gitlab@master

3 files changed, 115 insertions, 7 deletions

diff --git a/spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js b/spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js
new file mode 100644
index 00000000000..96be5b345a1
--- /dev/null
+++ b/spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js
@@ -0,0 +1,61 @@
+import { GlIcon, GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import DeployKeyItem from '~/vue_shared/components/list_selector/deploy_key_item.vue';
+
+describe('DeployKeyItem spec', () => {
+  let wrapper;
+
+  const MOCK_DATA = { title: 'Some key', owner: 'root', id: '123' };
+
+  const createComponent = (props) => {
+    wrapper = shallowMountExtended(DeployKeyItem, {
+      propsData: {
+        data: MOCK_DATA,
+        ...props,
+      },
+    });
+  };
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findDeleteButton = () => wrapper.findComponent(GlButton);
+  const findWrapper = () => wrapper.findByTestId('deploy-key-wrapper');
+
+  beforeEach(() => createComponent());
+
+  it('renders a key icon component', () => {
+    expect(findIcon().props('name')).toBe('key');
+  });
+
+  it('renders a title and username', () => {
+    expect(wrapper.text()).toContain('Some key');
+    expect(wrapper.text()).toContain('@root');
+  });
+
+  it('does not render a delete button by default', () => {
+    expect(findDeleteButton().exists()).toBe(false);
+  });
+
+  it('emits a select event when the wrapper  is clicked', () => {
+    findWrapper().trigger('click');
+
+    expect(wrapper.emitted('select')).toEqual([[MOCK_DATA.id]]);
+  });
+
+  describe('Delete button', () => {
+    beforeEach(() => createComponent({ canDelete: true }));
+
+    it('renders a delete button', () => {
+      expect(findDeleteButton().exists()).toBe(true);
+      expect(findDeleteButton().props('icon')).toBe('remove');
+    });
+
+    it('emits a delete event if the delete button is clicked', () => {
+      const stopPropagation = jest.fn();
+
+      findDeleteButton().vm.$emit('click', { stopPropagation });
+
+      expect(stopPropagation).toHaveBeenCalled();
+      expect(wrapper.emitted('delete')).toEqual([[MOCK_DATA.id]]);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/list_selector/index_spec.js b/spec/frontend/vue_shared/components/list_selector/index_spec.js
index 11e64a91eb0..6de9a77582c 100644
--- a/spec/frontend/vue_shared/components/list_selector/index_spec.js
+++ b/spec/frontend/vue_shared/components/list_selector/index_spec.js
@@ -7,6 +7,7 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ListSelector from '~/vue_shared/components/list_selector/index.vue';
 import UserItem from '~/vue_shared/components/list_selector/user_item.vue';
 import GroupItem from '~/vue_shared/components/list_selector/group_item.vue';
+import DeployKeyItem from '~/vue_shared/components/list_selector/deploy_key_item.vue';
 import groupsAutocompleteQuery from '~/graphql_shared/queries/groups_autocomplete.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -20,18 +21,21 @@ describe('List Selector spec', () => {
   let fakeApollo;
 
   const USERS_MOCK_PROPS = {
-    title: 'Users',
     projectPath: 'some/project/path',
     groupPath: 'some/group/path',
     type: 'users',
   };
 
   const GROUPS_MOCK_PROPS = {
-    title: 'Groups',
     projectPath: 'some/project/path',
     type: 'groups',
   };
 
+  const DEPLOY_KEYS_MOCK_PROPS = {
+    projectPath: 'some/project/path',
+    type: 'deployKeys',
+  };
+
   const groupsAutocompleteQuerySuccess = jest.fn().mockResolvedValue(GROUPS_RESPONSE_MOCK);
 
   const createComponent = async (props) => {
@@ -56,6 +60,7 @@ describe('List Selector spec', () => {
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
   const findAllUserComponents = () => wrapper.findAllComponents(UserItem);
   const findAllGroupComponents = () => wrapper.findAllComponents(GroupItem);
+  const findAllDeployKeyComponents = () => wrapper.findAllComponents(DeployKeyItem);
 
   beforeEach(() => {
     jest.spyOn(Api, 'projectUsers').mockResolvedValue(USERS_RESPONSE_MOCK);
@@ -254,4 +259,46 @@ describe('List Selector spec', () => {
       });
     });
   });
+
+  describe('Deploy keys type', () => {
+    beforeEach(() => createComponent(DEPLOY_KEYS_MOCK_PROPS));
+
+    it('renders a correct title', () => {
+      expect(findTitle().exists()).toBe(true);
+      expect(findTitle().text()).toContain('Deploy keys');
+    });
+
+    it('renders the correct icon', () => {
+      expect(findIcon().props('name')).toBe('key');
+    });
+
+    describe('selected items', () => {
+      const selectedKey = { title: 'MyKey', owner: 'peter', id: '123' };
+      const selectedItems = [selectedKey];
+      beforeEach(() => createComponent({ ...DEPLOY_KEYS_MOCK_PROPS, selectedItems }));
+
+      it('renders a heading with the total selected items', () => {
+        expect(findTitle().text()).toContain('Deploy keys');
+        expect(findTitle().text()).toContain('1');
+      });
+
+      it('renders a deploy key component for each selected item', () => {
+        expect(findAllDeployKeyComponents().length).toBe(selectedItems.length);
+        expect(findAllDeployKeyComponents().at(0).props()).toMatchObject({
+          data: selectedKey,
+          canDelete: true,
+        });
+      });
+
+      it('emits a delete event when a delete event is emitted from the deploy key component', () => {
+        const id = '123';
+        findAllDeployKeyComponents().at(0).vm.$emit('delete', id);
+
+        expect(wrapper.emitted('delete')).toEqual([[id]]);
+      });
+
+      // TODO - add a test for the select event once we have API integration
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/432494
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js b/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
index 544466a22ca..626b1df5474 100644
--- a/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
+++ b/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
@@ -43,7 +43,7 @@ describe('Metrics tab store actions', () => {
     it('should call success action when fetching metric images', () => {
       service.getMetricImages.mockImplementation(() => Promise.resolve(fileList));
 
-      testAction(actions.fetchImages, null, state, [
+      return testAction(actions.fetchImages, null, state, [
         { type: types.REQUEST_METRIC_IMAGES },
         {
           type: types.RECEIVE_METRIC_IMAGES_SUCCESS,
@@ -80,7 +80,7 @@ describe('Metrics tab store actions', () => {
     it('should call success action when uploading an image', () => {
       service.uploadMetricImage.mockImplementation(() => Promise.resolve(fileList[0]));
 
-      testAction(actions.uploadImage, payload, state, [
+      return testAction(actions.uploadImage, payload, state, [
         { type: types.REQUEST_METRIC_UPLOAD },
         {
           type: types.RECEIVE_METRIC_UPLOAD_SUCCESS,
@@ -112,7 +112,7 @@ describe('Metrics tab store actions', () => {
     it('should call success action when updating an image', () => {
       service.updateMetricImage.mockImplementation(() => Promise.resolve());
 
-      testAction(actions.updateImage, payload, state, [
+      return testAction(actions.updateImage, payload, state, [
         { type: types.REQUEST_METRIC_UPLOAD },
         {
           type: types.RECEIVE_METRIC_UPDATE_SUCCESS,
@@ -140,7 +140,7 @@ describe('Metrics tab store actions', () => {
     it('should call success action when deleting an image', () => {
       service.deleteMetricImage.mockImplementation(() => Promise.resolve());
 
-      testAction(actions.deleteImage, payload, state, [
+      return testAction(actions.deleteImage, payload, state, [
         {
           type: types.RECEIVE_METRIC_DELETE_SUCCESS,
           payload,
@@ -151,7 +151,7 @@ describe('Metrics tab store actions', () => {
 
   describe('initial data', () => {
     it('should set the initial data correctly', () => {
-      testAction(actions.setInitialData, initialData, state, [
+      return testAction(actions.setInitialData, initialData, state, [
         { type: types.SET_INITIAL_DATA, payload: initialData },
       ]);
     });