2021-05-21 09:10:16 +00:00
|
|
|
import { GlButton, GlDropdown } from '@gitlab/ui';
|
2021-03-11 09:09:36 +00:00
|
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
2021-05-21 09:10:16 +00:00
|
|
|
import { mountExtended } from 'helpers/vue_test_utils_helper';
|
2021-03-11 09:09:36 +00:00
|
|
|
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;
|
|
|
|
|
2021-04-01 18:13:56 +00:00
|
|
|
const exportCsvPath = '/gitlab-org/gitlab-test/-/issues/export_csv';
|
|
|
|
const issuableCount = 10;
|
|
|
|
|
2021-03-11 09:09:36 +00:00
|
|
|
function createComponent(injectedProperties = {}) {
|
|
|
|
glModalDirective = jest.fn();
|
2021-05-21 09:10:16 +00:00
|
|
|
return mountExtended(CsvImportExportButtons, {
|
|
|
|
directives: {
|
|
|
|
GlTooltip: createMockDirective(),
|
|
|
|
glModal: {
|
|
|
|
bind(_, { value }) {
|
|
|
|
glModalDirective(value);
|
2021-03-11 09:09:36 +00:00
|
|
|
},
|
|
|
|
},
|
2021-05-21 09:10:16 +00:00
|
|
|
},
|
|
|
|
provide: {
|
|
|
|
...injectedProperties,
|
|
|
|
},
|
|
|
|
propsData: {
|
|
|
|
exportCsvPath,
|
|
|
|
issuableCount,
|
|
|
|
},
|
|
|
|
});
|
2021-03-11 09:09:36 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
2021-05-21 09:10:16 +00:00
|
|
|
const findExportCsvButton = () => wrapper.findComponent(GlButton);
|
|
|
|
const findImportDropdown = () => wrapper.findComponent(GlDropdown);
|
|
|
|
const findImportCsvButton = () => wrapper.findByRole('menuitem', { name: 'Import CSV' });
|
|
|
|
const findImportFromJiraLink = () => wrapper.findByRole('menuitem', { name: 'Import from Jira' });
|
2021-03-11 09:09:36 +00:00
|
|
|
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', () => {
|
2021-04-01 18:13:56 +00:00
|
|
|
expect(findExportCsvModal().props()).toMatchObject({ exportCsvPath, issuableCount });
|
2021-03-11 09:09:36 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
|
2021-05-21 09:10:16 +00:00
|
|
|
it('renders the import csv menu item', () => {
|
2021-03-11 09:09:36 +00:00
|
|
|
expect(findImportCsvButton().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
2021-03-15 15:09:07 +00:00
|
|
|
describe('when showLabel=false', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ showImportButton: true, showLabel: false });
|
|
|
|
});
|
2021-03-11 09:09:36 +00:00
|
|
|
|
2021-05-21 09:10:16 +00:00
|
|
|
it('hides button text', () => {
|
|
|
|
expect(findImportDropdown().props()).toMatchObject({
|
|
|
|
text: 'Import issues',
|
|
|
|
textSrOnly: true,
|
|
|
|
});
|
2021-03-15 15:09:07 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
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', () => {
|
2021-05-21 09:10:16 +00:00
|
|
|
expect(findImportDropdown().props()).toMatchObject({
|
|
|
|
text: 'Import issues',
|
|
|
|
textSrOnly: false,
|
|
|
|
});
|
2021-03-15 15:09:07 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('import button has no tooltip', () => {
|
|
|
|
const tooltip = getBinding(findImportDropdown().element, 'gl-tooltip');
|
|
|
|
|
|
|
|
expect(tooltip.value).toBe(null);
|
|
|
|
});
|
2021-03-11 09:09:36 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|