1 files changed, 111 insertions, 0 deletions
diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js
new file mode 100644
index 00000000000..d8ffb4443ac
--- /dev/null
+++ b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js
@@ -0,0 +1,111 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
+
+import waitForPromises from 'helpers/wait_for_promises';
+
+import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
+import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
+
+import { dashboardGitResponse } from '../mock_data';
+
+describe('duplicate dashboard modal', () => {
+  let wrapper;
+  let mockDashboards;
+  let mockSelectedDashboard;
+  let duplicateDashboardAction;
+  let okEvent;
+
+  function createComponent(opts = {}) {
+    const storeOpts = {
+      methods: {
+        duplicateSystemDashboard: jest.fn(),
+      },
+      computed: {
+        allDashboards: () => mockDashboards,
+        selectedDashboard: () => mockSelectedDashboard,
+      },
+    };
+
+    return shallowMount(DuplicateDashboardModal, {
+      propsData: {
+        defaultBranch: 'master',
+        modalId: 'id',
+      },
+      sync: false,
+      ...storeOpts,
+      ...opts,
+    });
+  }
+
+  const findAlert = () => wrapper.find(GlAlert);
+  const findModal = () => wrapper.find(GlModal);
+  const findDuplicateDashboardForm = () => wrapper.find(DuplicateDashboardForm);
+
+  beforeEach(() => {
+    mockDashboards = dashboardGitResponse;
+    [mockSelectedDashboard] = dashboardGitResponse;
+
+    duplicateDashboardAction = jest.fn().mockResolvedValue();
+
+    okEvent = {
+      preventDefault: jest.fn(),
+    };
+
+    wrapper = createComponent({
+      methods: {
+        // Mock vuex actions
+        duplicateSystemDashboard: duplicateDashboardAction,
+      },
+    });
+
+    wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
+  });
+
+  it('contains a form to duplicate a dashboard', () => {
+    expect(findDuplicateDashboardForm().exists()).toBe(true);
+  });
+
+  it('saves a new dashboard', () => {
+    findModal().vm.$emit('ok', okEvent);
+
+    return waitForPromises().then(() => {
+      expect(okEvent.preventDefault).toHaveBeenCalled();
+      expect(wrapper.emitted().dashboardDuplicated).toBeTruthy();
+      expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  it('handles error when a new dashboard is not saved', () => {
+    const errMsg = 'An error occurred';
+
+    duplicateDashboardAction.mockRejectedValueOnce(errMsg);
+    findModal().vm.$emit('ok', okEvent);
+
+    return waitForPromises().then(() => {
+      expect(okEvent.preventDefault).toHaveBeenCalled();
+
+      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().text()).toBe(errMsg);
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
+    });
+  });
+
+  it('updates the form on changes', () => {
+    const formVals = {
+      dashboard: 'common_metrics.yml',
+      commitMessage: 'A commit message',
+    };
+
+    findModal()
+      .find(DuplicateDashboardForm)
+      .vm.$emit('change', formVals);
+
+    // Binding's second argument contains the modal id
+    expect(wrapper.vm.form).toEqual(formVals);
+  });
+});