diff options
Diffstat (limited to 'spec/frontend/issuable')
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, + }); }); }); }); |