Add latest changes from gitlab-org/gitlab@13-2-stable-ee

1 files changed, 48 insertions, 136 deletions

diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
index b29d86cbc5b..d09fcc92ee7 100644
--- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -1,14 +1,12 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert, GlIcon } from '@gitlab/ui';
-import waitForPromises from 'helpers/wait_for_promises';
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
-import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
 
-import { dashboardGitResponse } from '../mock_data';
+import { dashboardGitResponse, selfMonitoringDashboardGitResponse } from '../mock_data';
 
 const defaultBranch = 'master';
-
+const modalId = 'duplicateDashboardModalId';
 const starredDashboards = dashboardGitResponse.filter(({ starred }) => starred);
 const notStarredDashboards = dashboardGitResponse.filter(({ starred }) => !starred);
 
@@ -32,6 +30,7 @@ describe('DashboardsDropdown', () => {
       propsData: {
         ...props,
         defaultBranch,
+        modalId,
       },
       sync: false,
       ...storeOpts,
@@ -82,7 +81,7 @@ describe('DashboardsDropdown', () => {
       const searchTerm = 'Default';
       setSearchTerm(searchTerm);
 
-      return wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         expect(findItems()).toHaveLength(1);
       });
     });
@@ -91,7 +90,7 @@ describe('DashboardsDropdown', () => {
       const searchTerm = 'does-not-exist';
       setSearchTerm(searchTerm);
 
-      return wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         expect(findNoItemsMsg().isVisible()).toBe(true);
       });
     });
@@ -151,12 +150,18 @@ describe('DashboardsDropdown', () => {
     });
   });
 
-  describe('when a system dashboard is selected', () => {
+  const duplicableCases = [
+    dashboardGitResponse[0],
+    dashboardGitResponse[2],
+    selfMonitoringDashboardGitResponse[0],
+  ];
+
+  describe.each(duplicableCases)('when the selected dashboard can be duplicated', dashboard => {
     let duplicateDashboardAction;
     let modalDirective;
 
     beforeEach(() => {
-      [mockSelectedDashboard] = dashboardGitResponse;
+      mockSelectedDashboard = dashboard;
       modalDirective = jest.fn();
       duplicateDashboardAction = jest.fn().mockResolvedValue();
 
@@ -172,152 +177,59 @@ describe('DashboardsDropdown', () => {
           },
         },
       );
-
-      wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
     });
 
-    it('displays an item for each dashboard plus a "duplicate dashboard" item', () => {
-      const item = wrapper.findAll({ ref: 'duplicateDashboardItem' });
-
+    it('displays a dropdown item for each dashboard', () => {
       expect(findItems().length).toEqual(dashboardGitResponse.length + 1);
-      expect(item.length).toBe(1);
     });
 
-    describe('modal form', () => {
-      let okEvent;
-
-      const findModal = () => wrapper.find(GlModal);
-      const findAlert = () => wrapper.find(GlAlert);
-
-      beforeEach(() => {
-        okEvent = {
-          preventDefault: jest.fn(),
-        };
-      });
-
-      it('exists and contains a form to duplicate a dashboard', () => {
-        expect(findModal().exists()).toBe(true);
-        expect(findModal().contains(DuplicateDashboardForm)).toBe(true);
-      });
-
-      it('saves a new dashboard', () => {
-        findModal().vm.$emit('ok', okEvent);
-
-        return waitForPromises().then(() => {
-          expect(okEvent.preventDefault).toHaveBeenCalled();
-
-          expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-          expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
-          expect(wrapper.emitted().selectDashboard).toBeTruthy();
-          expect(findAlert().exists()).toBe(false);
-        });
-      });
-
-      describe('when a new dashboard is saved succesfully', () => {
-        const newDashboard = {
-          can_edit: true,
-          default: false,
-          display_name: 'A new dashboard',
-          system_dashboard: false,
-        };
-
-        const submitForm = formVals => {
-          duplicateDashboardAction.mockResolvedValueOnce(newDashboard);
-          findModal()
-            .find(DuplicateDashboardForm)
-            .vm.$emit('change', {
-              dashboard: 'common_metrics.yml',
-              commitMessage: 'A commit message',
-              ...formVals,
-            });
-          findModal().vm.$emit('ok', okEvent);
-        };
-
-        it('to the default branch, redirects to the new dashboard', () => {
-          submitForm({
-            branch: defaultBranch,
-          });
-
-          return waitForPromises().then(() => {
-            expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard);
-          });
-        });
-
-        it('to a new branch refreshes in the current dashboard', () => {
-          submitForm({
-            branch: 'another-branch',
-          });
-
-          return waitForPromises().then(() => {
-            expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]);
-          });
-        });
-      });
-
-      it('handles error when a new dashboard is not saved', () => {
-        const errMsg = 'An error occurred';
-
-        duplicateDashboardAction.mockRejectedValueOnce(errMsg);
-        findModal().vm.$emit('ok', okEvent);
+    it('displays one "duplicate dashboard" dropdown item with a directive attached', () => {
+      const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]');
 
-        return waitForPromises().then(() => {
-          expect(okEvent.preventDefault).toHaveBeenCalled();
+      expect(item.length).toBe(1);
+    });
 
-          expect(findAlert().exists()).toBe(true);
-          expect(findAlert().text()).toBe(errMsg);
+    it('"duplicate dashboard" dropdown item directive works', () => {
+      const item = wrapper.find('[data-testid="duplicateDashboardItem"]');
 
-          expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-          expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
-        });
-      });
+      item.trigger('click');
 
-      it('id is correct, as the value of modal directive binding matches modal id', () => {
-        expect(modalDirective).toHaveBeenCalledTimes(1);
-
-        // Binding's second argument contains the modal id
-        expect(modalDirective.mock.calls[0][1]).toEqual(
-          expect.objectContaining({
-            value: findModal().props('modalId'),
-          }),
-        );
+      return wrapper.vm.$nextTick().then(() => {
+        expect(modalDirective).toHaveBeenCalled();
       });
+    });
 
-      it('updates the form on changes', () => {
-        const formVals = {
-          dashboard: 'common_metrics.yml',
-          commitMessage: 'A commit message',
-        };
-
-        findModal()
-          .find(DuplicateDashboardForm)
-          .vm.$emit('change', formVals);
+    it('id is correct, as the value of modal directive binding matches modal id', () => {
+      expect(modalDirective).toHaveBeenCalledTimes(1);
 
-        // Binding's second argument contains the modal id
-        expect(wrapper.vm.form).toEqual(formVals);
-      });
+      // Binding's second argument contains the modal id
+      expect(modalDirective.mock.calls[0][1]).toEqual(
+        expect.objectContaining({
+          value: modalId,
+        }),
+      );
     });
   });
 
-  describe('when a custom dashboard is selected', () => {
-    const findModal = () => wrapper.find(GlModal);
+  const nonDuplicableCases = [dashboardGitResponse[1], selfMonitoringDashboardGitResponse[1]];
 
-    beforeEach(() => {
-      wrapper = createComponent({
-        selectedDashboard: dashboardGitResponse[1],
+  describe.each(nonDuplicableCases)(
+    'when the selected dashboard can not be duplicated',
+    dashboard => {
+      beforeEach(() => {
+        mockSelectedDashboard = dashboard;
+
+        wrapper = createComponent();
       });
-    });
 
-    it('displays an item for each dashboard', () => {
-      const item = wrapper.findAll({ ref: 'duplicateDashboardItem' });
+      it('displays a dropdown list item for each dashboard, but no list item for "duplicate dashboard"', () => {
+        const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]');
 
-      expect(findItems()).toHaveLength(dashboardGitResponse.length);
-      expect(item.length).toBe(0);
-    });
-
-    it('modal form does not exist and contains a form to duplicate a dashboard', () => {
-      expect(findModal().exists()).toBe(false);
-    });
-  });
+        expect(findItems()).toHaveLength(dashboardGitResponse.length);
+        expect(item.length).toBe(0);
+      });
+    },
+  );
 
   describe('when a dashboard gets selected by the user', () => {
     beforeEach(() => {