summaryrefslogtreecommitdiff
path: root/spec/frontend/issuable
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/issuable')
-rw-r--r--spec/frontend/issuable/components/csv_export_modal_spec.js44
-rw-r--r--spec/frontend/issuable/components/csv_import_export_buttons_spec.js58
-rw-r--r--spec/frontend/issuable/components/csv_import_modal_spec.js48
-rw-r--r--spec/frontend/issuable/components/issuable_by_email_spec.js11
-rw-r--r--spec/frontend/issuable/components/status_box_spec.js4
-rw-r--r--spec/frontend/issuable/related_issues/components/related_issues_root_spec.js6
6 files changed, 85 insertions, 86 deletions
diff --git a/spec/frontend/issuable/components/csv_export_modal_spec.js b/spec/frontend/issuable/components/csv_export_modal_spec.js
index 7eb85a946ae..34094d22e68 100644
--- a/spec/frontend/issuable/components/csv_export_modal_spec.js
+++ b/spec/frontend/issuable/components/csv_export_modal_spec.js
@@ -1,7 +1,6 @@
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', () => {
@@ -9,26 +8,24 @@ describe('CsvExportModal', () => {
function createComponent(options = {}) {
const { injectedProperties = {}, props = {} } = options;
- return extendedWrapper(
- 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>',
- }),
- },
- }),
- );
+ 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(() => {
@@ -61,14 +58,13 @@ describe('CsvExportModal', () => {
describe('issuable count info text', () => {
it('displays the info text when issuableCount is > -1', () => {
wrapper = createComponent({ props: { issuableCount: 10 } });
- expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(true);
- expect(wrapper.findByTestId('issuable-count-note').text()).toContain('10 issues selected');
+ expect(wrapper.text()).toContain('10 issues selected');
expect(findIcon().exists()).toBe(true);
});
it("doesn't display the info text when issuableCount is -1", () => {
wrapper = createComponent({ props: { issuableCount: -1 } });
- expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(false);
+ expect(wrapper.text()).not.toContain('issues selected');
});
});
diff --git a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
index 2fe8d28a333..118c12d968b 100644
--- a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
+++ b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
@@ -1,6 +1,6 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlDropdown } from '@gitlab/ui';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } 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';
@@ -14,35 +14,33 @@ describe('CsvImportExportButtons', () => {
function createComponent(injectedProperties = {}) {
glModalDirective = jest.fn();
- return extendedWrapper(
- shallowMount(CsvImportExportButtons, {
- directives: {
- GlTooltip: createMockDirective(),
- glModal: {
- bind(_, { value }) {
- glModalDirective(value);
- },
+ return mountExtended(CsvImportExportButtons, {
+ directives: {
+ GlTooltip: createMockDirective(),
+ glModal: {
+ bind(_, { value }) {
+ glModalDirective(value);
},
},
- provide: {
- ...injectedProperties,
- },
- propsData: {
- exportCsvPath,
- issuableCount,
- },
- }),
- );
+ },
+ provide: {
+ ...injectedProperties,
+ },
+ propsData: {
+ exportCsvPath,
+ issuableCount,
+ },
+ });
}
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 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' });
const findExportCsvModal = () => wrapper.findComponent(CsvExportModal);
const findImportCsvModal = () => wrapper.findComponent(CsvImportModal);
@@ -97,7 +95,7 @@ describe('CsvImportExportButtons', () => {
expect(findImportDropdown().exists()).toBe(true);
});
- it('renders the import button', () => {
+ it('renders the import csv menu item', () => {
expect(findImportCsvButton().exists()).toBe(true);
});
@@ -106,8 +104,11 @@ describe('CsvImportExportButtons', () => {
wrapper = createComponent({ showImportButton: true, showLabel: false });
});
- it('does not have a button text', () => {
- expect(findImportCsvButton().props('text')).toBe(null);
+ it('hides button text', () => {
+ expect(findImportDropdown().props()).toMatchObject({
+ text: 'Import issues',
+ textSrOnly: true,
+ });
});
it('import button has a tooltip', () => {
@@ -124,7 +125,10 @@ describe('CsvImportExportButtons', () => {
});
it('displays a button text', () => {
- expect(findImportCsvButton().props('text')).toBe('Import issues');
+ expect(findImportDropdown().props()).toMatchObject({
+ text: 'Import issues',
+ textSrOnly: false,
+ });
});
it('import button has no tooltip', () => {
diff --git a/spec/frontend/issuable/components/csv_import_modal_spec.js b/spec/frontend/issuable/components/csv_import_modal_spec.js
index ce9d738f77b..0c88b6b1283 100644
--- a/spec/frontend/issuable/components/csv_import_modal_spec.js
+++ b/spec/frontend/issuable/components/csv_import_modal_spec.js
@@ -1,8 +1,6 @@
-import { GlModal } from '@gitlab/ui';
-import { getByRole, getByLabelText } from '@testing-library/dom';
-import { mount } from '@vue/test-utils';
+import { GlButton, GlModal } from '@gitlab/ui';
import { stubComponent } from 'helpers/stub_component';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
import CsvImportModal from '~/issuable/components/csv_import_modal.vue';
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
@@ -13,23 +11,21 @@ describe('CsvImportModal', () => {
function createComponent(options = {}) {
const { injectedProperties = {}, props = {} } = options;
- return extendedWrapper(
- mount(CsvImportModal, {
- propsData: {
- modalId: 'csv-import-modal',
- ...props,
- },
- provide: {
- issuableType: 'issues',
- ...injectedProperties,
- },
- stubs: {
- GlModal: stubComponent(GlModal, {
- template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
- }),
- },
- }),
- );
+ return mountExtended(CsvImportModal, {
+ propsData: {
+ modalId: 'csv-import-modal',
+ ...props,
+ },
+ provide: {
+ issuableType: 'issues',
+ ...injectedProperties,
+ },
+ stubs: {
+ GlModal: stubComponent(GlModal, {
+ template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
+ }),
+ },
+ });
}
beforeEach(() => {
@@ -41,9 +37,9 @@ describe('CsvImportModal', () => {
});
const findModal = () => wrapper.findComponent(GlModal);
- const findPrimaryButton = () => getByRole(wrapper.element, 'button', { name: 'Import issues' });
- const findForm = () => wrapper.findByTestId('import-csv-form');
- const findFileInput = () => getByLabelText(wrapper.element, 'Upload CSV file');
+ const findPrimaryButton = () => wrapper.findComponent(GlButton);
+ const findForm = () => wrapper.find('form');
+ const findFileInput = () => wrapper.findByLabelText('Upload CSV file');
const findAuthenticityToken = () => new FormData(findForm().element).get('authenticity_token');
describe('template', () => {
@@ -76,8 +72,8 @@ describe('CsvImportModal', () => {
expect(findPrimaryButton()).toExist();
});
- it('submits the form when the primary action is clicked', async () => {
- findPrimaryButton().click();
+ it('submits the form when the primary action is clicked', () => {
+ findPrimaryButton().trigger('click');
expect(formSubmitSpy).toHaveBeenCalled();
});
diff --git a/spec/frontend/issuable/components/issuable_by_email_spec.js b/spec/frontend/issuable/components/issuable_by_email_spec.js
index 08a99f29479..f11c41fe25d 100644
--- a/spec/frontend/issuable/components/issuable_by_email_spec.js
+++ b/spec/frontend/issuable/components/issuable_by_email_spec.js
@@ -58,10 +58,11 @@ describe('IssuableByEmail', () => {
mockAxios.restore();
});
- const findFormInputGroup = () => wrapper.find(GlFormInputGroup);
+ const findButton = () => wrapper.findComponent(GlButton);
+ const findFormInputGroup = () => wrapper.findComponent(GlFormInputGroup);
const clickResetEmail = async () => {
- wrapper.findByTestId('incoming-email-token-reset').vm.$emit('click');
+ wrapper.findAllComponents(GlButton).at(2).trigger('click');
await waitForPromises();
};
@@ -75,14 +76,14 @@ describe('IssuableByEmail', () => {
'renders a link with "$buttonText" when type is "$issuableType"',
({ issuableType, buttonText }) => {
wrapper = createComponent({ issuableType });
- expect(wrapper.findByTestId('issuable-email-modal-btn').text()).toBe(buttonText);
+ expect(findButton().text()).toBe(buttonText);
},
);
it('opens the modal when the user clicks the button', () => {
wrapper = createComponent();
- wrapper.findByTestId('issuable-email-modal-btn').vm.$emit('click');
+ findButton().trigger('click');
expect(glModalDirective).toHaveBeenCalled();
});
@@ -105,7 +106,7 @@ describe('IssuableByEmail', () => {
initialEmail,
});
- expect(wrapper.findByTestId('mail-to-btn').attributes('href')).toBe(
+ expect(wrapper.findAllComponents(GlButton).at(1).attributes('href')).toBe(
`mailto:${initialEmail}?subject=${subject}&body=${body}`,
);
});
diff --git a/spec/frontend/issuable/components/status_box_spec.js b/spec/frontend/issuable/components/status_box_spec.js
index 990fac67f7e..9cbf023dbd6 100644
--- a/spec/frontend/issuable/components/status_box_spec.js
+++ b/spec/frontend/issuable/components/status_box_spec.js
@@ -1,4 +1,4 @@
-import { GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import StatusBox from '~/issuable/components/status_box.vue';
@@ -64,7 +64,7 @@ describe('Merge request status box component', () => {
initialState: testCase.state,
});
- expect(wrapper.find('[data-testid="status-icon"]').props('name')).toBe(testCase.icon);
+ expect(wrapper.findComponent(GlIcon).props('name')).toBe(testCase.icon);
});
});
});
diff --git a/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js b/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js
index e5e3478dc59..3099e0b639b 100644
--- a/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js
+++ b/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js
@@ -6,7 +6,7 @@ import {
issuable1,
issuable2,
} from 'jest/vue_shared/components/issue/related_issuable_mock_data';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
import { linkedIssueTypesMap } from '~/related_issues/constants';
@@ -195,7 +195,9 @@ describe('RelatedIssuesRoot', () => {
wrapper.vm.onPendingFormSubmit(input);
return waitForPromises().then(() => {
- expect(createFlash).toHaveBeenCalledWith(message);
+ expect(createFlash).toHaveBeenCalledWith({
+ message,
+ });
});
});
});