diff options
Diffstat (limited to 'spec/frontend/issuable/components/csv_export_modal_spec.js')
-rw-r--r-- | spec/frontend/issuable/components/csv_export_modal_spec.js | 91 |
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); + }); + }); + }); +}); |