diff options
Diffstat (limited to 'spec/frontend/issuable/components/csv_import_export_buttons_spec.js')
-rw-r--r-- | spec/frontend/issuable/components/csv_import_export_buttons_spec.js | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js new file mode 100644 index 00000000000..e32bf35b13a --- /dev/null +++ b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js @@ -0,0 +1,187 @@ +import { shallowMount } from '@vue/test-utils'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import CsvExportModal from '~/issuable/components/csv_export_modal.vue'; +import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue'; +import CsvImportModal from '~/issuable/components/csv_import_modal.vue'; + +describe('CsvImportExportButtons', () => { + let wrapper; + let glModalDirective; + + function createComponent(injectedProperties = {}) { + glModalDirective = jest.fn(); + return extendedWrapper( + shallowMount(CsvImportExportButtons, { + directives: { + GlTooltip: createMockDirective(), + glModal: { + bind(_, { value }) { + glModalDirective(value); + }, + }, + }, + provide: { + ...injectedProperties, + }, + }), + ); + } + + afterEach(() => { + wrapper.destroy(); + }); + + const findExportCsvButton = () => wrapper.findByTestId('export-csv-button'); + const findImportDropdown = () => wrapper.findByTestId('import-csv-dropdown'); + const findImportCsvButton = () => wrapper.findByTestId('import-csv-dropdown'); + const findImportFromJiraLink = () => wrapper.findByTestId('import-from-jira-link'); + const findExportCsvModal = () => wrapper.findComponent(CsvExportModal); + const findImportCsvModal = () => wrapper.findComponent(CsvImportModal); + + describe('template', () => { + describe('when the showExportButton=true', () => { + beforeEach(() => { + wrapper = createComponent({ showExportButton: true }); + }); + + it('displays the export button', () => { + expect(findExportCsvButton().exists()).toBe(true); + }); + + it('export button has a tooltip', () => { + const tooltip = getBinding(findExportCsvButton().element, 'gl-tooltip'); + + expect(tooltip).toBeDefined(); + expect(tooltip.value).toBe('Export as CSV'); + }); + + it('renders the export modal', () => { + expect(findExportCsvModal().exists()).toBe(true); + }); + + it('opens the export modal', () => { + findExportCsvButton().trigger('click'); + + expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.exportModalId); + }); + }); + + describe('when the showExportButton=false', () => { + beforeEach(() => { + wrapper = createComponent({ showExportButton: false }); + }); + + it('does not display the export button', () => { + expect(findExportCsvButton().exists()).toBe(false); + }); + + it('does not render the export modal', () => { + expect(findExportCsvModal().exists()).toBe(false); + }); + }); + + describe('when the showImportButton=true', () => { + beforeEach(() => { + wrapper = createComponent({ showImportButton: true }); + }); + + it('displays the import dropdown', () => { + expect(findImportDropdown().exists()).toBe(true); + }); + + it('renders the import button', () => { + expect(findImportCsvButton().exists()).toBe(true); + }); + + describe('when showLabel=false', () => { + beforeEach(() => { + wrapper = createComponent({ showImportButton: true, showLabel: false }); + }); + + it('does not have a button text', () => { + expect(findImportCsvButton().props('text')).toBe(null); + }); + + it('import button has a tooltip', () => { + const tooltip = getBinding(findImportDropdown().element, 'gl-tooltip'); + + expect(tooltip).toBeDefined(); + expect(tooltip.value).toBe('Import issues'); + }); + }); + + describe('when showLabel=true', () => { + beforeEach(() => { + wrapper = createComponent({ showImportButton: true, showLabel: true }); + }); + + it('displays a button text', () => { + expect(findImportCsvButton().props('text')).toBe('Import issues'); + }); + + it('import button has no tooltip', () => { + const tooltip = getBinding(findImportDropdown().element, 'gl-tooltip'); + + expect(tooltip.value).toBe(null); + }); + }); + + it('renders the import modal', () => { + expect(findImportCsvModal().exists()).toBe(true); + }); + + it('opens the import modal', () => { + findImportCsvButton().trigger('click'); + + expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.importModalId); + }); + + describe('import from jira link', () => { + const projectImportJiraPath = 'gitlab-org/gitlab-test/-/import/jira'; + + beforeEach(() => { + wrapper = createComponent({ + showImportButton: true, + canEdit: true, + projectImportJiraPath, + }); + }); + + describe('when canEdit=true', () => { + it('renders the import dropdown item', () => { + expect(findImportFromJiraLink().exists()).toBe(true); + }); + + it('passes the proper path to the link', () => { + expect(findImportFromJiraLink().attributes('href')).toBe(projectImportJiraPath); + }); + }); + + describe('when canEdit=false', () => { + beforeEach(() => { + wrapper = createComponent({ showImportButton: true, canEdit: false }); + }); + + it('does not render the import dropdown item', () => { + expect(findImportFromJiraLink().exists()).toBe(false); + }); + }); + }); + }); + + describe('when the showImportButton=false', () => { + beforeEach(() => { + wrapper = createComponent({ showImportButton: false }); + }); + + it('does not display the import dropdown', () => { + expect(findImportDropdown().exists()).toBe(false); + }); + + it('does not render the import modal', () => { + expect(findImportCsvModal().exists()).toBe(false); + }); + }); + }); +}); |