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
Show 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 { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { runnerData } from 'jest/runner/mock_data';
const mockRunner = runnerData.data.runner;
......@@ -20,13 +19,11 @@ describe('RunnerUpdateCostFactorFields', () => {
};
const createComponent = () => {
wrapper = extendedWrapper(
mount(RunnerUpdateCostFactorFields, {
wrapper = mountExtended(RunnerUpdateCostFactorFields, {
propsData: {
value: mockRunner,
},
}),
);
});
};
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 { createLocalVue, mount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
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 { runnerData } from 'jest/runner/mock_data';
import { createAlert, VARIANT_SUCCESS } from '~/flash';
......@@ -13,8 +13,7 @@ jest.mock('~/flash');
const mockRunner = runnerData.data.runner;
const localVue = createLocalVue();
localVue.use(VueApollo);
Vue.use(VueApollo);
describe('RunnerUpdateForm', () => {
let wrapper;
......@@ -35,16 +34,13 @@ describe('RunnerUpdateForm', () => {
const submitFormAndWait = () => submitForm().then(waitForPromises);
const createComponent = ({ props } = {}) => {
wrapper = extendedWrapper(
mount(RunnerUpdateForm, {
localVue,
wrapper = mountExtended(RunnerUpdateForm, {
propsData: {
runner: mockRunner,
...props,
},
apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
}),
);
});
};
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 { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_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 { createAlert } from '~/flash';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
......@@ -46,8 +50,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
updateHistory: jest.fn(),
}));
const localVue = createLocalVue();
localVue.use(VueApollo);
Vue.use(VueApollo);
describe('AdminRunnersApp', () => {
let wrapper;
......@@ -65,22 +68,19 @@ describe('AdminRunnersApp', () => {
const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar);
const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
const handlers = [
[getRunnersQuery, mockRunnersQuery],
[getRunnersCountQuery, mockRunnersCountQuery],
];
wrapper = extendedWrapper(
mountFn(AdminRunnersApp, {
localVue,
wrapper = mountFn(AdminRunnersApp, {
apolloProvider: createMockApollo(handlers),
propsData: {
registrationToken: mockRegistrationToken,
...props,
},
}),
);
});
};
beforeEach(async () => {
......@@ -98,7 +98,7 @@ describe('AdminRunnersApp', () => {
});
it('shows total runner counts', async () => {
createComponent({ mountFn: mount });
createComponent({ mountFn: mountExtended });
await waitForPromises();
......@@ -129,7 +129,7 @@ describe('AdminRunnersApp', () => {
return Promise.resolve({ data: { runners: { count } } });
});
createComponent({ mountFn: mount });
createComponent({ mountFn: mountExtended });
await waitForPromises();
expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
......@@ -157,7 +157,7 @@ describe('AdminRunnersApp', () => {
return Promise.resolve({ data: { runners: { count } } });
});
createComponent({ mountFn: mount });
createComponent({ mountFn: mountExtended });
await waitForPromises();
expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
......@@ -175,7 +175,7 @@ describe('AdminRunnersApp', () => {
});
it('runner item links to the runner admin page', async () => {
createComponent({ mountFn: mount });
createComponent({ mountFn: mountExtended });
await waitForPromises();
......@@ -198,7 +198,7 @@ describe('AdminRunnersApp', () => {
});
it('sets tokens in the filtered search', () => {
createComponent({ mountFn: mount });
createComponent({ mountFn: mountExtended });
expect(findFilteredSearch().props('tokens')).toEqual([
expect.objectContaining({
......@@ -310,7 +310,7 @@ describe('AdminRunnersApp', () => {
beforeEach(() => {
mockRunnersQuery = jest.fn().mockResolvedValue(runnersDataPaginated);
createComponent({ mountFn: mount });
createComponent({ mountFn: mountExtended });
});
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 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 { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { createAlert } from '~/flash';
......@@ -21,8 +21,7 @@ const mockRunner = runnersData.data.runners.nodes[0];
const getRunnersQueryName = getRunnersQuery.definitions[0].name.value;
const getGroupRunnersQueryName = getGroupRunnersQuery.definitions[0].name.value;
const localVue = createLocalVue();
localVue.use(VueApollo);
Vue.use(VueApollo);
jest.mock('~/flash');
jest.mock('~/runner/sentry_utils');
......@@ -41,8 +40,7 @@ describe('RunnerTypeCell', () => {
const getTooltip = (w) => getBinding(w.element, 'gl-tooltip')?.value;
const createComponent = (runner = {}, options) => {
wrapper = extendedWrapper(
shallowMount(RunnerActionCell, {
wrapper = shallowMountExtended(RunnerActionCell, {
propsData: {
runner: {
id: mockRunner.id,
......@@ -53,7 +51,6 @@ describe('RunnerTypeCell', () => {
...runner,
},
},
localVue,
apolloProvider: createMockApollo([
[runnerDeleteMutation, runnerDeleteMutationHandler],
[runnerActionsUpdateMutation, runnerActionsUpdateMutationHandler],
......@@ -68,8 +65,7 @@ describe('RunnerTypeCell', () => {
},
},
...options,
}),
);
});
};
beforeEach(() => {
......
spec/frontend/runner/components/registration/registration_dropdown_spec.js
View file @ 2e85eb47
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 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 RegistrationDropdown from '~/runner/components/registration/registration_dropdown.vue';
......@@ -33,17 +33,15 @@ describe('RegistrationDropdown', () => {
const findToggleMaskButton = () => wrapper.findByTestId('toggle-masked');
const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMount) => {
wrapper = extendedWrapper(
mountFn(RegistrationDropdown, {
const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMountExtended) => {
wrapper = mountFn(RegistrationDropdown, {
propsData: {
registrationToken: mockToken,
type: INSTANCE_TYPE,
...props,
},
...options,
}),
);
});
};
it.each`
......@@ -52,7 +50,7 @@ describe('RegistrationDropdown', () => {
${GROUP_TYPE} | ${'Register a group runner'}
${PROJECT_TYPE} | ${'Register a project runner'}
`('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');
});
......@@ -93,7 +91,7 @@ describe('RegistrationDropdown', () => {
// Use `attachTo` to find the modal
attachTo: document.body,
},
mount,
mountExtended,
);
findRegistrationInstructionsDropdownItem().trigger('click');
......@@ -131,7 +129,7 @@ describe('RegistrationDropdown', () => {
});
it('Displays masked value by default', () => {
createComponent({}, mount);
createComponent({}, mountExtended);
expect(findTokenDropdownItem().text()).toMatchInterpolatedText(
`Registration token ${maskToken}`,
......@@ -154,7 +152,7 @@ describe('RegistrationDropdown', () => {
});
it('Updates the token when it gets reset', async () => {
createComponent({}, mount);
createComponent({}, mountExtended);
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 { createLocalVue, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import { createAlert } from '~/flash';
......@@ -14,9 +14,8 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
jest.mock('~/flash');
jest.mock('~/runner/sentry_utils');
const localVue = createLocalVue();
localVue.use(VueApollo);
localVue.use(GlToast);
Vue.use(VueApollo);
Vue.use(GlToast);
const mockNewToken = 'NEW_TOKEN';
const modalID = 'token-reset-modal';
......@@ -33,8 +32,7 @@ describe('RegistrationTokenResetDropdownItem', () => {
const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
const createComponent = ({ props, provide = {} } = {}) => {
wrapper = shallowMount(RegistrationTokenResetDropdownItem, {
localVue,
wrapper = shallowMountExtended(RegistrationTokenResetDropdownItem, {
provide,
propsData: {
type: INSTANCE_TYPE,
......
spec/frontend/runner/components/registration/registration_token_spec.js
View file @ 2e85eb47
import { nextTick } from 'vue';
import { GlToast } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { createLocalVue } from '@vue/test-utils';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import RegistrationToken from '~/runner/components/registration/registration_token.vue';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
......@@ -25,15 +25,13 @@ describe('RegistrationToken', () => {
const createComponent = ({ props = {}, withGlToast = true } = {}) => {
const localVue = withGlToast ? vueWithGlToast() : undefined;
wrapper = extendedWrapper(
shallowMount(RegistrationToken, {
wrapper = shallowMountExtended(RegistrationToken, {
propsData: {
value: mockToken,
...props,
},
localVue,
}),
);
});
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 { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue';
import { statusTokenConfig } from '~/runner/components/search_tokens/status_token_config';
import TagToken from '~/runner/components/search_tokens/tag_token.vue';
......@@ -29,8 +28,7 @@ describe('RunnerList', () => {
};
const createComponent = ({ props = {}, options = {} } = {}) => {
wrapper = extendedWrapper(
shallowMount(RunnerFilteredSearchBar, {
wrapper = shallowMountExtended(RunnerFilteredSearchBar, {
propsData: {
namespace: 'runners',
tokens: [],
......@@ -48,8 +46,7 @@ describe('RunnerList', () => {
GlDropdownItem,
},
...options,
}),
);
});
};
beforeEach(() => {
......
spec/frontend/runner/components/runner_list_spec.js
View file @ 2e85eb47
import { GlTable, GlSkeletonLoader } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import {
extendedWrapper,
shallowMountExtended,
mountExtended,
} from 'helpers/vue_test_utils_helper';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import RunnerList from '~/runner/components/runner_list.vue';
import { runnersData } from '../mock_data';
......@@ -18,20 +21,18 @@ describe('RunnerList', () => {
const findCell = ({ row = 0, fieldKey }) =>
extendedWrapper(findRows().at(row).find(`[data-testid="td-${fieldKey}"]`));
const createComponent = ({ props = {} } = {}, mountFn = shallowMount) => {
wrapper = extendedWrapper(
mountFn(RunnerList, {
const createComponent = ({ props = {} } = {}, mountFn = shallowMountExtended) => {
wrapper = mountFn(RunnerList, {
propsData: {
runners: mockRunners,
activeRunnersCount: mockActiveRunnersCount,
...props,
},
}),
);
});
};
beforeEach(() => {
createComponent({}, mount);
createComponent({}, mountExtended);
});
afterEach(() => {
......@@ -54,7 +55,7 @@ describe('RunnerList', () => {
});
it('Sets runner id as a row key', () => {
createComponent({}, shallowMount);
createComponent({});
expect(findTable().attributes('primary-key')).toBe('id');
});
......@@ -107,7 +108,7 @@ describe('RunnerList', () => {
it('Formats job counts', () => {
mockRunnersCopy[0].jobCount = 1;
createComponent({ props: { runners: mockRunnersCopy } }, mount);
createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1');
});
......@@ -115,7 +116,7 @@ describe('RunnerList', () => {
it('Formats large job counts', () => {
mockRunnersCopy[0].jobCount = 1000;
createComponent({ props: { runners: mockRunnersCopy } }, mount);
createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000');
});
......@@ -123,7 +124,7 @@ describe('RunnerList', () => {
it('Formats large job counts with a plus symbol', () => {
mockRunnersCopy[0].jobCount = 1001;
createComponent({ props: { runners: mockRunnersCopy } }, mount);
createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000+');
});
......@@ -143,13 +144,13 @@ describe('RunnerList', () => {
});
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);
});
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);
});
......
spec/frontend/runner/components/runner_update_form_spec.js
View file @ 2e85eb47
import Vue, { nextTick } from 'vue';
import { GlForm } from '@gitlab/ui';
import { createLocalVue, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
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 { createAlert, VARIANT_SUCCESS } from '~/flash';
import RunnerUpdateForm from '~/runner/components/runner_update_form.vue';
......@@ -23,8 +22,7 @@ jest.mock('~/runner/sentry_utils');
const mockRunner = runnerData.data.runner;
const localVue = createLocalVue();
localVue.use(VueApollo);
Vue.use(VueApollo);
describe('RunnerUpdateForm', () => {
let wrapper;
......@@ -61,16 +59,13 @@ describe('RunnerUpdateForm', () => {
});
const createComponent = ({ props } = {}) => {
wrapper = extendedWrapper(
mount(RunnerUpdateForm, {
localVue,
wrapper = mountExtended(RunnerUpdateForm, {
propsData: {
runner: mockRunner,
...props,
},
apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
}),
);
});
};
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 { createLocalVue, shallowMount, mount } from '@vue/test-utils';
import { shallowMount, mount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper';
import setWindowLocation from 'helpers/set_window_location_helper';
......@@ -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 { groupRunnersData, groupRunnersDataPaginated, groupRunnersCountData } from '../mock_data';
const localVue = createLocalVue();
localVue.use(VueApollo);
Vue.use(VueApollo);
const mockGroupFullPath = 'group1';
const mockRegistrationToken = 'AABBCC';
......@@ -69,7 +68,6 @@ describe('GroupRunnersApp', () => {
];
wrapper = mountFn(GroupRunnersApp, {
localVue,
apolloProvider: createMockApollo(handlers),
propsData: {
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