1 files changed, 91 insertions, 0 deletions
diff --git a/spec/frontend/issuable/components/csv_export_modal_spec.js b/spec/frontend/issuable/components/csv_export_modal_spec.js
new file mode 100644
index 00000000000..f46b6f72f05
--- /dev/null
+++ b/spec/frontend/issuable/components/csv_export_modal_spec.js
@@ -0,0 +1,91 @@
+import { GlModal, GlIcon, GlButton } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CsvExportModal from '~/issuable/components/csv_export_modal.vue';
+
+describe('CsvExportModal', () => {
+  let wrapper;
+
+  function createComponent(options = {}) {
+    const { injectedProperties = {}, props = {} } = options;
+    return extendedWrapper(
+      mount(CsvExportModal, {
+        propsData: {
+          modalId: 'csv-export-modal',
+          ...props,
+        },
+        provide: {
+          issuableType: 'issues',
+          ...injectedProperties,
+        },
+        stubs: {
+          GlModal: stubComponent(GlModal, {
+            template:
+              '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+          }),
+        },
+      }),
+    );
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  describe('template', () => {
+    describe.each`
+      issuableType        | modalTitle
+      ${'issues'}         | ${'Export issues'}
+      ${'merge-requests'} | ${'Export merge requests'}
+    `('with the issuableType "$issuableType"', ({ issuableType, modalTitle }) => {
+      beforeEach(() => {
+        wrapper = createComponent({ injectedProperties: { issuableType } });
+      });
+
+      it('displays the modal title "$modalTitle"', () => {
+        expect(findModal().text()).toContain(modalTitle);
+      });
+
+      it('displays the button with title "$modalTitle"', () => {
+        expect(findButton().text()).toBe(modalTitle);
+      });
+    });
+
+    describe('issuable count info text', () => {
+      it('displays the info text when issuableCount is > -1', () => {
+        wrapper = createComponent({ injectedProperties: { issuableCount: 10 } });
+        expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(true);
+        expect(wrapper.findByTestId('issuable-count-note').text()).toContain('10 issues selected');
+        expect(findIcon().exists()).toBe(true);
+      });
+
+      it("doesn't display the info text when issuableCount is -1", () => {
+        wrapper = createComponent({ injectedProperties: { issuableCount: -1 } });
+        expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(false);
+      });
+    });
+
+    describe('email info text', () => {
+      it('displays the proper email', () => {
+        const email = 'admin@example.com';
+        wrapper = createComponent({ injectedProperties: { email } });
+        expect(findModal().text()).toContain(
+          `The CSV export will be created in the background. Once finished, it will be sent to ${email} in an attachment.`,
+        );
+      });
+    });
+
+    describe('primary button', () => {
+      it('passes the exportCsvPath to the button', () => {
+        const exportCsvPath = '/gitlab-org/gitlab-test/-/issues/export_csv';
+        wrapper = createComponent({ injectedProperties: { exportCsvPath } });
+        expect(findButton().attributes('href')).toBe(exportCsvPath);
+      });
+    });
+  });
+});