91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
import { GlModal, GlIcon } from '@gitlab/ui';
|
|
import { mount } from '@vue/test-utils';
|
|
import { stubComponent } from 'helpers/stub_component';
|
|
import CsvExportModal from '~/issuable/components/csv_export_modal.vue';
|
|
import { __ } from '~/locale';
|
|
|
|
describe('CsvExportModal', () => {
|
|
let wrapper;
|
|
|
|
function createComponent(options = {}) {
|
|
const { injectedProperties = {}, props = {} } = options;
|
|
return mount(CsvExportModal, {
|
|
propsData: {
|
|
modalId: 'csv-export-modal',
|
|
exportCsvPath: 'export/csv/path',
|
|
issuableCount: 1,
|
|
...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);
|
|
|
|
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().props('title')).toBe(modalTitle);
|
|
});
|
|
|
|
it('displays the primary button with title "$modalTitle" and href', () => {
|
|
expect(findModal().props('actionPrimary')).toMatchObject({
|
|
text: modalTitle,
|
|
attributes: {
|
|
href: 'export/csv/path',
|
|
variant: 'confirm',
|
|
'data-method': 'post',
|
|
'data-qa-selector': `export_${issuableType}_button`,
|
|
'data-track-action': 'click_button',
|
|
'data-track-label': `export_${issuableType}_csv`,
|
|
},
|
|
});
|
|
});
|
|
|
|
it('displays the cancel button', () => {
|
|
expect(findModal().props('actionCancel')).toEqual({ text: __('Cancel') });
|
|
});
|
|
});
|
|
|
|
describe('issuable count info text', () => {
|
|
it('displays the info text when issuableCount is > -1', () => {
|
|
wrapper = createComponent({ props: { issuableCount: 10 } });
|
|
expect(wrapper.text()).toContain('10 issues selected');
|
|
expect(findIcon().exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
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.`,
|
|
);
|
|
});
|
|
});
|
|
});
|
|
});
|