Skip to content

G
gitlab-ce
Commit 2e85eb47 authored by Miguel Rincon's avatar Miguel Rincon
Browse files
Options

Reduce verbose component creation in tests 

This change reduces repetition in tests by using a simpler way to
create extended wrappers for tests.

It also reduces the unnecessary use of localVue.
parent a36e640b
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 171 deletions
ee/spec/frontend/runner/components/runner_update_cost_factor_fields_spec.js
View file @ 2e85eb47
import { mount } from '@vue/test-utils'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import RunnerUpdateCostFactorFields from 'ee/runner/components/runner_update_cost_factor_fields.vue'; import RunnerUpdateCostFactorFields from 'ee/runner/components/runner_update_cost_factor_fields.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { runnerData } from 'jest/runner/mock_data'; import { runnerData } from 'jest/runner/mock_data';
const mockRunner = runnerData.data.runner; const mockRunner = runnerData.data.runner;
...@@ -20,13 +19,11 @@ describe('RunnerUpdateCostFactorFields', () => { ...@@ -20,13 +19,11 @@ describe('RunnerUpdateCostFactorFields', () => {
}; };
const createComponent = () => { const createComponent = () => {
wrapper = extendedWrapper( wrapper = mountExtended(RunnerUpdateCostFactorFields, {
mount(RunnerUpdateCostFactorFields, { propsData: {
propsData: { value: mockRunner,
value: mockRunner, },
}, });
}),
);
}; };
describe('when on dot_com', () => { describe('when on dot_com', () => {
......
ee/spec/frontend/runner/components/runner_update_form_spec.js
View file @ 2e85eb47
import Vue from 'vue';
import { GlForm } from '@gitlab/ui'; import { GlForm } from '@gitlab/ui';
import { createLocalVue, mount } from '@vue/test-utils';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { runnerData } from 'jest/runner/mock_data'; import { runnerData } from 'jest/runner/mock_data';
import { createAlert, VARIANT_SUCCESS } from '~/flash'; import { createAlert, VARIANT_SUCCESS } from '~/flash';
...@@ -13,8 +13,7 @@ jest.mock('~/flash'); ...@@ -13,8 +13,7 @@ jest.mock('~/flash');
const mockRunner = runnerData.data.runner; const mockRunner = runnerData.data.runner;
const localVue = createLocalVue(); Vue.use(VueApollo);
localVue.use(VueApollo);
describe('RunnerUpdateForm', () => { describe('RunnerUpdateForm', () => {
let wrapper; let wrapper;
...@@ -35,16 +34,13 @@ describe('RunnerUpdateForm', () => { ...@@ -35,16 +34,13 @@ describe('RunnerUpdateForm', () => {
const submitFormAndWait = () => submitForm().then(waitForPromises); const submitFormAndWait = () => submitForm().then(waitForPromises);
const createComponent = ({ props } = {}) => { const createComponent = ({ props } = {}) => {
wrapper = extendedWrapper( wrapper = mountExtended(RunnerUpdateForm, {
mount(RunnerUpdateForm, { propsData: {
localVue, runner: mockRunner,
propsData: { ...props,
runner: mockRunner, },
...props, apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
}, });
apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
}),
);
}; };
const expectToHaveSubmittedRunnerContaining = (submittedRunner) => { const expectToHaveSubmittedRunnerContaining = (submittedRunner) => {
......
spec/frontend/runner/admin_runners/admin_runners_app_spec.js
View file @ 2e85eb47
import Vue from 'vue';
import { GlLink } from '@gitlab/ui'; import { GlLink } from '@gitlab/ui';
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import setWindowLocation from 'helpers/set_window_location_helper'; import setWindowLocation from 'helpers/set_window_location_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import {
extendedWrapper,
shallowMountExtended,
mountExtended,
} from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { createAlert } from '~/flash'; import { createAlert } from '~/flash';
import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { getIdFromGraphQLId } from '~/graphql_shared/utils';
...@@ -46,8 +50,7 @@ jest.mock('~/lib/utils/url_utility', () => ({ ...@@ -46,8 +50,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
updateHistory: jest.fn(), updateHistory: jest.fn(),
})); }));
const localVue = createLocalVue(); Vue.use(VueApollo);
localVue.use(VueApollo);
describe('AdminRunnersApp', () => { describe('AdminRunnersApp', () => {
let wrapper; let wrapper;
...@@ -65,22 +68,19 @@ describe('AdminRunnersApp', () => { ...@@ -65,22 +68,19 @@ describe('AdminRunnersApp', () => {
const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar); const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar);
const findFilteredSearch = () => wrapper.findComponent(FilteredSearch); const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => { const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
const handlers = [ const handlers = [
[getRunnersQuery, mockRunnersQuery], [getRunnersQuery, mockRunnersQuery],
[getRunnersCountQuery, mockRunnersCountQuery], [getRunnersCountQuery, mockRunnersCountQuery],
]; ];
wrapper = extendedWrapper( wrapper = mountFn(AdminRunnersApp, {
mountFn(AdminRunnersApp, { apolloProvider: createMockApollo(handlers),
localVue, propsData: {
apolloProvider: createMockApollo(handlers), registrationToken: mockRegistrationToken,
propsData: { ...props,
registrationToken: mockRegistrationToken, },
...props, });
},
}),
);
}; };
beforeEach(async () => { beforeEach(async () => {
...@@ -98,7 +98,7 @@ describe('AdminRunnersApp', () => { ...@@ -98,7 +98,7 @@ describe('AdminRunnersApp', () => {
}); });
it('shows total runner counts', async () => { it('shows total runner counts', async () => {
createComponent({ mountFn: mount }); createComponent({ mountFn: mountExtended });
await waitForPromises(); await waitForPromises();
...@@ -129,7 +129,7 @@ describe('AdminRunnersApp', () => { ...@@ -129,7 +129,7 @@ describe('AdminRunnersApp', () => {
return Promise.resolve({ data: { runners: { count } } }); return Promise.resolve({ data: { runners: { count } } });
}); });
createComponent({ mountFn: mount }); createComponent({ mountFn: mountExtended });
await waitForPromises(); await waitForPromises();
expect(findRunnerTypeTabs().text()).toMatchInterpolatedText( expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
...@@ -157,7 +157,7 @@ describe('AdminRunnersApp', () => { ...@@ -157,7 +157,7 @@ describe('AdminRunnersApp', () => {
return Promise.resolve({ data: { runners: { count } } }); return Promise.resolve({ data: { runners: { count } } });
}); });
createComponent({ mountFn: mount }); createComponent({ mountFn: mountExtended });
await waitForPromises(); await waitForPromises();
expect(findRunnerTypeTabs().text()).toMatchInterpolatedText( expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
...@@ -175,7 +175,7 @@ describe('AdminRunnersApp', () => { ...@@ -175,7 +175,7 @@ describe('AdminRunnersApp', () => {
}); });
it('runner item links to the runner admin page', async () => { it('runner item links to the runner admin page', async () => {
createComponent({ mountFn: mount }); createComponent({ mountFn: mountExtended });
await waitForPromises(); await waitForPromises();
...@@ -198,7 +198,7 @@ describe('AdminRunnersApp', () => { ...@@ -198,7 +198,7 @@ describe('AdminRunnersApp', () => {
}); });
it('sets tokens in the filtered search', () => { it('sets tokens in the filtered search', () => {
createComponent({ mountFn: mount }); createComponent({ mountFn: mountExtended });
expect(findFilteredSearch().props('tokens')).toEqual([ expect(findFilteredSearch().props('tokens')).toEqual([
expect.objectContaining({ expect.objectContaining({
...@@ -310,7 +310,7 @@ describe('AdminRunnersApp', () => { ...@@ -310,7 +310,7 @@ describe('AdminRunnersApp', () => {
beforeEach(() => { beforeEach(() => {
mockRunnersQuery = jest.fn().mockResolvedValue(runnersDataPaginated); mockRunnersQuery = jest.fn().mockResolvedValue(runnersDataPaginated);
createComponent({ mountFn: mount }); createComponent({ mountFn: mountExtended });
}); });
it('more pages can be selected', () => { it('more pages can be selected', () => {
......
spec/frontend/runner/components/cells/runner_actions_cell_spec.js
View file @ 2e85eb47
import { createLocalVue, shallowMount } from '@vue/test-utils'; import Vue from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { createAlert } from '~/flash'; import { createAlert } from '~/flash';
...@@ -21,8 +21,7 @@ const mockRunner = runnersData.data.runners.nodes[0]; ...@@ -21,8 +21,7 @@ const mockRunner = runnersData.data.runners.nodes[0];
const getRunnersQueryName = getRunnersQuery.definitions[0].name.value; const getRunnersQueryName = getRunnersQuery.definitions[0].name.value;
const getGroupRunnersQueryName = getGroupRunnersQuery.definitions[0].name.value; const getGroupRunnersQueryName = getGroupRunnersQuery.definitions[0].name.value;
const localVue = createLocalVue(); Vue.use(VueApollo);
localVue.use(VueApollo);
jest.mock('~/flash'); jest.mock('~/flash');
jest.mock('~/runner/sentry_utils'); jest.mock('~/runner/sentry_utils');
...@@ -41,35 +40,32 @@ describe('RunnerTypeCell', () => { ...@@ -41,35 +40,32 @@ describe('RunnerTypeCell', () => {
const getTooltip = (w) => getBinding(w.element, 'gl-tooltip')?.value; const getTooltip = (w) => getBinding(w.element, 'gl-tooltip')?.value;
const createComponent = (runner = {}, options) => { const createComponent = (runner = {}, options) => {
wrapper = extendedWrapper( wrapper = shallowMountExtended(RunnerActionCell, {
shallowMount(RunnerActionCell, { propsData: {
propsData: { runner: {
runner: { id: mockRunner.id,
id: mockRunner.id, shortSha: mockRunner.shortSha,
shortSha: mockRunner.shortSha, editAdminUrl: mockRunner.editAdminUrl,
editAdminUrl: mockRunner.editAdminUrl, userPermissions: mockRunner.userPermissions,
userPermissions: mockRunner.userPermissions, active: mockRunner.active,
active: mockRunner.active, ...runner,
...runner,
},
}, },
localVue, },
apolloProvider: createMockApollo([ apolloProvider: createMockApollo([
[runnerDeleteMutation, runnerDeleteMutationHandler], [runnerDeleteMutation, runnerDeleteMutationHandler],
[runnerActionsUpdateMutation, runnerActionsUpdateMutationHandler], [runnerActionsUpdateMutation, runnerActionsUpdateMutationHandler],
]), ]),
directives: { directives: {
GlTooltip: createMockDirective(), GlTooltip: createMockDirective(),
GlModal: createMockDirective(), GlModal: createMockDirective(),
}, },
mocks: { mocks: {
$toast: { $toast: {
show: mockToastShow, show: mockToastShow,
},
}, },
...options, },
}), ...options,
); });
}; };
beforeEach(() => { beforeEach(() => {
......
spec/frontend/runner/components/registration/registration_dropdown_spec.js
View file @ 2e85eb47
import { GlDropdown, GlDropdownItem, GlDropdownForm } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem, GlDropdownForm } from '@gitlab/ui';
import { createLocalVue, mount, shallowMount, createWrapper } from '@vue/test-utils'; import { createLocalVue, createWrapper } from '@vue/test-utils';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import RegistrationDropdown from '~/runner/components/registration/registration_dropdown.vue'; import RegistrationDropdown from '~/runner/components/registration/registration_dropdown.vue';
...@@ -33,17 +33,15 @@ describe('RegistrationDropdown', () => { ...@@ -33,17 +33,15 @@ describe('RegistrationDropdown', () => {
const findToggleMaskButton = () => wrapper.findByTestId('toggle-masked'); const findToggleMaskButton = () => wrapper.findByTestId('toggle-masked');
const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMount) => { const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMountExtended) => {
wrapper = extendedWrapper( wrapper = mountFn(RegistrationDropdown, {
mountFn(RegistrationDropdown, { propsData: {
propsData: { registrationToken: mockToken,
registrationToken: mockToken, type: INSTANCE_TYPE,
type: INSTANCE_TYPE, ...props,
...props, },
}, ...options,
...options, });
}),
);
}; };
it.each` it.each`
...@@ -52,7 +50,7 @@ describe('RegistrationDropdown', () => { ...@@ -52,7 +50,7 @@ describe('RegistrationDropdown', () => {
${GROUP_TYPE} | ${'Register a group runner'} ${GROUP_TYPE} | ${'Register a group runner'}
${PROJECT_TYPE} | ${'Register a project runner'} ${PROJECT_TYPE} | ${'Register a project runner'}
`('Dropdown text for type $type is "$text"', () => { `('Dropdown text for type $type is "$text"', () => {
createComponent({ props: { type: INSTANCE_TYPE } }, mount); createComponent({ props: { type: INSTANCE_TYPE } }, mountExtended);
expect(wrapper.text()).toContain('Register an instance runner'); expect(wrapper.text()).toContain('Register an instance runner');
}); });
...@@ -93,7 +91,7 @@ describe('RegistrationDropdown', () => { ...@@ -93,7 +91,7 @@ describe('RegistrationDropdown', () => {
// Use `attachTo` to find the modal // Use `attachTo` to find the modal
attachTo: document.body, attachTo: document.body,
}, },
mount, mountExtended,
); );
findRegistrationInstructionsDropdownItem().trigger('click'); findRegistrationInstructionsDropdownItem().trigger('click');
...@@ -131,7 +129,7 @@ describe('RegistrationDropdown', () => { ...@@ -131,7 +129,7 @@ describe('RegistrationDropdown', () => {
}); });
it('Displays masked value by default', () => { it('Displays masked value by default', () => {
createComponent({}, mount); createComponent({}, mountExtended);
expect(findTokenDropdownItem().text()).toMatchInterpolatedText( expect(findTokenDropdownItem().text()).toMatchInterpolatedText(
`Registration token ${maskToken}`, `Registration token ${maskToken}`,
...@@ -154,7 +152,7 @@ describe('RegistrationDropdown', () => { ...@@ -154,7 +152,7 @@ describe('RegistrationDropdown', () => {
}); });
it('Updates the token when it gets reset', async () => { it('Updates the token when it gets reset', async () => {
createComponent({}, mount); createComponent({}, mountExtended);
const newToken = 'mock1'; const newToken = 'mock1';
......
spec/frontend/runner/components/registration/registration_token_reset_dropdown_item_spec.js
View file @ 2e85eb47
import Vue, { nextTick } from 'vue';
import { GlDropdownItem, GlLoadingIcon, GlToast, GlModal } from '@gitlab/ui'; import { GlDropdownItem, GlLoadingIcon, GlToast, GlModal } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { createAlert } from '~/flash'; import { createAlert } from '~/flash';
...@@ -14,9 +14,8 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; ...@@ -14,9 +14,8 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
jest.mock('~/flash'); jest.mock('~/flash');
jest.mock('~/runner/sentry_utils'); jest.mock('~/runner/sentry_utils');
const localVue = createLocalVue(); Vue.use(VueApollo);
localVue.use(VueApollo); Vue.use(GlToast);
localVue.use(GlToast);
const mockNewToken = 'NEW_TOKEN'; const mockNewToken = 'NEW_TOKEN';
const modalID = 'token-reset-modal'; const modalID = 'token-reset-modal';
...@@ -33,8 +32,7 @@ describe('RegistrationTokenResetDropdownItem', () => { ...@@ -33,8 +32,7 @@ describe('RegistrationTokenResetDropdownItem', () => {
const clickSubmit = () => findModal().vm.$emit('primary', mockEvent); const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
const createComponent = ({ props, provide = {} } = {}) => { const createComponent = ({ props, provide = {} } = {}) => {
wrapper = shallowMount(RegistrationTokenResetDropdownItem, { wrapper = shallowMountExtended(RegistrationTokenResetDropdownItem, {
localVue,
provide, provide,
propsData: { propsData: {
type: INSTANCE_TYPE, type: INSTANCE_TYPE,
......
spec/frontend/runner/components/registration/registration_token_spec.js
View file @ 2e85eb47
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { GlToast } from '@gitlab/ui'; import { GlToast } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createLocalVue } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import RegistrationToken from '~/runner/components/registration/registration_token.vue'; import RegistrationToken from '~/runner/components/registration/registration_token.vue';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
...@@ -25,15 +25,13 @@ describe('RegistrationToken', () => { ...@@ -25,15 +25,13 @@ describe('RegistrationToken', () => {
const createComponent = ({ props = {}, withGlToast = true } = {}) => { const createComponent = ({ props = {}, withGlToast = true } = {}) => {
const localVue = withGlToast ? vueWithGlToast() : undefined; const localVue = withGlToast ? vueWithGlToast() : undefined;
wrapper = extendedWrapper( wrapper = shallowMountExtended(RegistrationToken, {
shallowMount(RegistrationToken, { propsData: {
propsData: { value: mockToken,
value: mockToken, ...props,
...props, },
}, localVue,
localVue, });
}),
);
showToast = wrapper.vm.$toast ? jest.spyOn(wrapper.vm.$toast, 'show') : null; showToast = wrapper.vm.$toast ? jest.spyOn(wrapper.vm.$toast, 'show') : null;
}; };
......
spec/frontend/runner/components/runner_filtered_search_bar_spec.js
View file @ 2e85eb47
import { GlFilteredSearch, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlFilteredSearch, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue'; import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue';
import { statusTokenConfig } from '~/runner/components/search_tokens/status_token_config'; import { statusTokenConfig } from '~/runner/components/search_tokens/status_token_config';
import TagToken from '~/runner/components/search_tokens/tag_token.vue'; import TagToken from '~/runner/components/search_tokens/tag_token.vue';
...@@ -29,27 +28,25 @@ describe('RunnerList', () => { ...@@ -29,27 +28,25 @@ describe('RunnerList', () => {
}; };
const createComponent = ({ props = {}, options = {} } = {}) => { const createComponent = ({ props = {}, options = {} } = {}) => {
wrapper = extendedWrapper( wrapper = shallowMountExtended(RunnerFilteredSearchBar, {
shallowMount(RunnerFilteredSearchBar, { propsData: {
propsData: { namespace: 'runners',
namespace: 'runners', tokens: [],
tokens: [], value: {
value: { runnerType: null,
runnerType: null, filters: [],
filters: [], sort: mockDefaultSort,
sort: mockDefaultSort,
},
...props,
}, },
stubs: { ...props,
FilteredSearch, },
GlFilteredSearch, stubs: {
GlDropdown, FilteredSearch,
GlDropdownItem, GlFilteredSearch,
}, GlDropdown,
...options, GlDropdownItem,
}), },
); ...options,
});
}; };
beforeEach(() => { beforeEach(() => {
......
spec/frontend/runner/components/runner_list_spec.js
View file @ 2e85eb47
import { GlTable, GlSkeletonLoader } from '@gitlab/ui'; import { GlTable, GlSkeletonLoader } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils'; import {
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; extendedWrapper,
shallowMountExtended,
mountExtended,
} from 'helpers/vue_test_utils_helper';
import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import RunnerList from '~/runner/components/runner_list.vue'; import RunnerList from '~/runner/components/runner_list.vue';
import { runnersData } from '../mock_data'; import { runnersData } from '../mock_data';
...@@ -18,20 +21,18 @@ describe('RunnerList', () => { ...@@ -18,20 +21,18 @@ describe('RunnerList', () => {
const findCell = ({ row = 0, fieldKey }) => const findCell = ({ row = 0, fieldKey }) =>
extendedWrapper(findRows().at(row).find(`[data-testid="td-${fieldKey}"]`)); extendedWrapper(findRows().at(row).find(`[data-testid="td-${fieldKey}"]`));
const createComponent = ({ props = {} } = {}, mountFn = shallowMount) => { const createComponent = ({ props = {} } = {}, mountFn = shallowMountExtended) => {
wrapper = extendedWrapper( wrapper = mountFn(RunnerList, {
mountFn(RunnerList, { propsData: {
propsData: { runners: mockRunners,
runners: mockRunners, activeRunnersCount: mockActiveRunnersCount,
activeRunnersCount: mockActiveRunnersCount, ...props,
...props, },
}, });
}),
);
}; };
beforeEach(() => { beforeEach(() => {
createComponent({}, mount); createComponent({}, mountExtended);
}); });
afterEach(() => { afterEach(() => {
...@@ -54,7 +55,7 @@ describe('RunnerList', () => { ...@@ -54,7 +55,7 @@ describe('RunnerList', () => {
}); });
it('Sets runner id as a row key', () => { it('Sets runner id as a row key', () => {
createComponent({}, shallowMount); createComponent({});
expect(findTable().attributes('primary-key')).toBe('id'); expect(findTable().attributes('primary-key')).toBe('id');
}); });
...@@ -107,7 +108,7 @@ describe('RunnerList', () => { ...@@ -107,7 +108,7 @@ describe('RunnerList', () => {
it('Formats job counts', () => { it('Formats job counts', () => {
mockRunnersCopy[0].jobCount = 1; mockRunnersCopy[0].jobCount = 1;
createComponent({ props: { runners: mockRunnersCopy } }, mount); createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1'); expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1');
}); });
...@@ -115,7 +116,7 @@ describe('RunnerList', () => { ...@@ -115,7 +116,7 @@ describe('RunnerList', () => {
it('Formats large job counts', () => { it('Formats large job counts', () => {
mockRunnersCopy[0].jobCount = 1000; mockRunnersCopy[0].jobCount = 1000;
createComponent({ props: { runners: mockRunnersCopy } }, mount); createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000'); expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000');
}); });
...@@ -123,7 +124,7 @@ describe('RunnerList', () => { ...@@ -123,7 +124,7 @@ describe('RunnerList', () => {
it('Formats large job counts with a plus symbol', () => { it('Formats large job counts with a plus symbol', () => {
mockRunnersCopy[0].jobCount = 1001; mockRunnersCopy[0].jobCount = 1001;
createComponent({ props: { runners: mockRunnersCopy } }, mount); createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000+'); expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000+');
}); });
...@@ -143,13 +144,13 @@ describe('RunnerList', () => { ...@@ -143,13 +144,13 @@ describe('RunnerList', () => {
}); });
it('when there are no runners, shows an skeleton loader', () => { it('when there are no runners, shows an skeleton loader', () => {
createComponent({ props: { runners: [], loading: true } }, mount); createComponent({ props: { runners: [], loading: true } }, mountExtended);
expect(findSkeletonLoader().exists()).toBe(true); expect(findSkeletonLoader().exists()).toBe(true);
}); });
it('when there are runners, shows a busy indicator skeleton loader', () => { it('when there are runners, shows a busy indicator skeleton loader', () => {
createComponent({ props: { loading: true } }, mount); createComponent({ props: { loading: true } }, mountExtended);
expect(findSkeletonLoader().exists()).toBe(false); expect(findSkeletonLoader().exists()).toBe(false);
}); });
......
spec/frontend/runner/components/runner_update_form_spec.js
View file @ 2e85eb47
import Vue, { nextTick } from 'vue';
import { GlForm } from '@gitlab/ui'; import { GlForm } from '@gitlab/ui';
import { createLocalVue, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { createAlert, VARIANT_SUCCESS } from '~/flash'; import { createAlert, VARIANT_SUCCESS } from '~/flash';
import RunnerUpdateForm from '~/runner/components/runner_update_form.vue'; import RunnerUpdateForm from '~/runner/components/runner_update_form.vue';
...@@ -23,8 +22,7 @@ jest.mock('~/runner/sentry_utils'); ...@@ -23,8 +22,7 @@ jest.mock('~/runner/sentry_utils');
const mockRunner = runnerData.data.runner; const mockRunner = runnerData.data.runner;
const localVue = createLocalVue(); Vue.use(VueApollo);
localVue.use(VueApollo);
describe('RunnerUpdateForm', () => { describe('RunnerUpdateForm', () => {
let wrapper; let wrapper;
...@@ -61,16 +59,13 @@ describe('RunnerUpdateForm', () => { ...@@ -61,16 +59,13 @@ describe('RunnerUpdateForm', () => {
}); });
const createComponent = ({ props } = {}) => { const createComponent = ({ props } = {}) => {
wrapper = extendedWrapper( wrapper = mountExtended(RunnerUpdateForm, {
mount(RunnerUpdateForm, { propsData: {
localVue, runner: mockRunner,
propsData: { ...props,
runner: mockRunner, },
...props, apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
}, });
apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
}),
);
}; };
const expectToHaveSubmittedRunnerContaining = (submittedRunner) => { const expectToHaveSubmittedRunnerContaining = (submittedRunner) => {
......
spec/frontend/runner/group_runners/group_runners_app_spec.js
View file @ 2e85eb47
import { nextTick } from 'vue'; import Vue, { nextTick } from 'vue';
import { GlLink } from '@gitlab/ui'; import { GlLink } from '@gitlab/ui';
import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; import { shallowMount, mount } from '@vue/test-utils';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import setWindowLocation from 'helpers/set_window_location_helper'; import setWindowLocation from 'helpers/set_window_location_helper';
...@@ -33,8 +33,7 @@ import { captureException } from '~/runner/sentry_utils'; ...@@ -33,8 +33,7 @@ import { captureException } from '~/runner/sentry_utils';
import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue'; import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
import { groupRunnersData, groupRunnersDataPaginated, groupRunnersCountData } from '../mock_data'; import { groupRunnersData, groupRunnersDataPaginated, groupRunnersCountData } from '../mock_data';
const localVue = createLocalVue(); Vue.use(VueApollo);
localVue.use(VueApollo);
const mockGroupFullPath = 'group1'; const mockGroupFullPath = 'group1';
const mockRegistrationToken = 'AABBCC'; const mockRegistrationToken = 'AABBCC';
...@@ -69,7 +68,6 @@ describe('GroupRunnersApp', () => { ...@@ -69,7 +68,6 @@ describe('GroupRunnersApp', () => {
]; ];
wrapper = mountFn(GroupRunnersApp, { wrapper = mountFn(GroupRunnersApp, {
localVue,
apolloProvider: createMockApollo(handlers), apolloProvider: createMockApollo(handlers),
propsData: { propsData: {
registrationToken: mockRegistrationToken, registrationToken: mockRegistrationToken,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7