diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
commit | b39512ed755239198a9c294b6a45e65c05900235 (patch) | |
tree | d234a3efade1de67c46b9e5a38ce813627726aa7 /spec/frontend/__helpers__ | |
parent | d31474cf3b17ece37939d20082b07f6657cc79a9 (diff) |
Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42
Diffstat (limited to 'spec/frontend/__helpers__')
-rw-r--r-- | spec/frontend/__helpers__/mock_apollo_helper.js | 1 | ||||
-rw-r--r-- | spec/frontend/__helpers__/mock_dom_observer.js | 2 | ||||
-rw-r--r-- | spec/frontend/__helpers__/mocks/axios_utils.js | 2 | ||||
-rw-r--r-- | spec/frontend/__helpers__/stub_component.js | 8 | ||||
-rw-r--r-- | spec/frontend/__helpers__/timeout.js | 59 | ||||
-rw-r--r-- | spec/frontend/__helpers__/vue_mount_component_helper.js | 29 | ||||
-rw-r--r-- | spec/frontend/__helpers__/vue_test_utils_helper.js | 19 | ||||
-rw-r--r-- | spec/frontend/__helpers__/vue_test_utils_helper_spec.js | 57 | ||||
-rw-r--r-- | spec/frontend/__helpers__/vuex_action_helper.js | 6 | ||||
-rw-r--r-- | spec/frontend/__helpers__/vuex_action_helper_spec.js | 2 | ||||
-rw-r--r-- | spec/frontend/__helpers__/wait_for_promises.js | 6 | ||||
-rw-r--r-- | spec/frontend/__helpers__/web_worker_transformer.js | 2 |
12 files changed, 85 insertions, 108 deletions
diff --git a/spec/frontend/__helpers__/mock_apollo_helper.js b/spec/frontend/__helpers__/mock_apollo_helper.js index bae9f33be87..e0739df7086 100644 --- a/spec/frontend/__helpers__/mock_apollo_helper.js +++ b/spec/frontend/__helpers__/mock_apollo_helper.js @@ -8,7 +8,6 @@ export function createMockClient(handlers = [], resolvers = {}, cacheOptions = { const cache = new InMemoryCache({ possibleTypes, typePolicies, - addTypename: false, ...cacheOptions, }); diff --git a/spec/frontend/__helpers__/mock_dom_observer.js b/spec/frontend/__helpers__/mock_dom_observer.js index bc2646be4c2..8c9c435041e 100644 --- a/spec/frontend/__helpers__/mock_dom_observer.js +++ b/spec/frontend/__helpers__/mock_dom_observer.js @@ -22,14 +22,12 @@ class MockObserver { takeRecords() {} - // eslint-disable-next-line camelcase $_triggerObserve(node, { entry = {}, options = {} } = {}) { if (this.$_hasObserver(node, options)) { this.$_cb([{ target: node, ...entry }]); } } - // eslint-disable-next-line camelcase $_hasObserver(node, options = {}) { return this.$_observers.some( ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions), diff --git a/spec/frontend/__helpers__/mocks/axios_utils.js b/spec/frontend/__helpers__/mocks/axios_utils.js index b1efd29dc8d..60644c84a57 100644 --- a/spec/frontend/__helpers__/mocks/axios_utils.js +++ b/spec/frontend/__helpers__/mocks/axios_utils.js @@ -1,4 +1,6 @@ import EventEmitter from 'events'; +// eslint-disable-next-line no-restricted-syntax +import { setImmediate } from 'timers'; const axios = jest.requireActual('~/lib/utils/axios_utils').default; diff --git a/spec/frontend/__helpers__/stub_component.js b/spec/frontend/__helpers__/stub_component.js index 96fe3a8bc45..4f9d1ee6f5d 100644 --- a/spec/frontend/__helpers__/stub_component.js +++ b/spec/frontend/__helpers__/stub_component.js @@ -22,6 +22,14 @@ const createStubbedMethods = (methods = {}) => { ); }; +export const RENDER_ALL_SLOTS_TEMPLATE = `<div> + <template v-for="(_, name) in $scopedSlots"> + <div :data-testid="'slot-' + name"> + <slot :name="name" /> + </div> + </template> +</div>`; + export function stubComponent(Component, options = {}) { return { props: Component.props, diff --git a/spec/frontend/__helpers__/timeout.js b/spec/frontend/__helpers__/timeout.js deleted file mode 100644 index 8688625a95e..00000000000 --- a/spec/frontend/__helpers__/timeout.js +++ /dev/null @@ -1,59 +0,0 @@ -const NS_PER_SEC = 1e9; -const NS_PER_MS = 1e6; -const IS_DEBUGGING = process.execArgv.join(' ').includes('--inspect-brk'); - -let testTimeoutNS; - -export const setTestTimeout = (newTimeoutMS) => { - const newTimeoutNS = newTimeoutMS * NS_PER_MS; - // never accept a smaller timeout than the default - if (newTimeoutNS < testTimeoutNS) { - return; - } - - testTimeoutNS = newTimeoutNS; - jest.setTimeout(newTimeoutMS); -}; - -// Allows slow tests to set their own timeout. -// Useful for tests with jQuery, which is very slow in big DOMs. -let temporaryTimeoutNS = null; -export const setTestTimeoutOnce = (newTimeoutMS) => { - const newTimeoutNS = newTimeoutMS * NS_PER_MS; - // never accept a smaller timeout than the default - if (newTimeoutNS < testTimeoutNS) { - return; - } - - temporaryTimeoutNS = newTimeoutNS; -}; - -export const initializeTestTimeout = (defaultTimeoutMS) => { - setTestTimeout(defaultTimeoutMS); - - let testStartTime; - - // https://github.com/facebook/jest/issues/6947 - beforeEach(() => { - testStartTime = process.hrtime(); - }); - - afterEach(() => { - let timeoutNS = testTimeoutNS; - if (Number.isFinite(temporaryTimeoutNS)) { - timeoutNS = temporaryTimeoutNS; - temporaryTimeoutNS = null; - } - - const [seconds, remainingNs] = process.hrtime(testStartTime); - const elapsedNS = seconds * NS_PER_SEC + remainingNs; - - // Disable the timeout error when debugging. It is meaningless because - // debugging always takes longer than the test timeout. - if (elapsedNS > timeoutNS && !IS_DEBUGGING) { - throw new Error( - `Test took too long (${elapsedNS / NS_PER_MS}ms > ${timeoutNS / NS_PER_MS}ms)!`, - ); - } - }); -}; diff --git a/spec/frontend/__helpers__/vue_mount_component_helper.js b/spec/frontend/__helpers__/vue_mount_component_helper.js index 615ff69a01c..ed43355ea5b 100644 --- a/spec/frontend/__helpers__/vue_mount_component_helper.js +++ b/spec/frontend/__helpers__/vue_mount_component_helper.js @@ -1,5 +1,3 @@ -import Vue from 'vue'; - /** * Deprecated. Please do not use. * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445 @@ -33,31 +31,4 @@ export const mountComponentWithStore = (Component, { el, props, store }) => * Deprecated. Please do not use. * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445 */ -export const mountComponentWithSlots = (Component, { props, slots }) => { - const component = new Component({ - propsData: props || {}, - }); - - component.$slots = slots; - - return component.$mount(); -}; - -/** - * Mount a component with the given render method. - * - * ----------------------------- - * Deprecated. Please do not use. - * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445 - * ----------------------------- - * - * This helps with inserting slots that need to be compiled. - */ -export const mountComponentWithRender = (render, el = null) => - mountComponent(Vue.extend({ render }), {}, el); - -/** - * Deprecated. Please do not use. - * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445 - */ export default mountComponent; diff --git a/spec/frontend/__helpers__/vue_test_utils_helper.js b/spec/frontend/__helpers__/vue_test_utils_helper.js index 2aae91f8a39..75bd5df8cbf 100644 --- a/spec/frontend/__helpers__/vue_test_utils_helper.js +++ b/spec/frontend/__helpers__/vue_test_utils_helper.js @@ -7,6 +7,20 @@ const vNodeContainsText = (vnode, text) => (vnode.children && vnode.children.filter((child) => vNodeContainsText(child, text)).length); /** + * Create a VTU wrapper from an element. + * + * If a Vue instance manages the element, the wrapper is created + * with that Vue instance. + * + * @param {HTMLElement} element + * @param {Object} options + * @returns VTU wrapper + */ +const createWrapperFromElement = (element, options) => + // eslint-disable-next-line no-underscore-dangle + createWrapper(element.__vue__ || element, options || {}); + +/** * Determines whether a `shallowMount` Wrapper contains text * within one of it's slots. This will also work on Wrappers * acquired with `find()`, but only if it's parent Wrapper @@ -85,8 +99,7 @@ export const extendedWrapper = (wrapper) => { if (!elements.length) { return new ErrorWrapper(query); } - - return createWrapper(elements[0], this.options || {}); + return createWrapperFromElement(elements[0], this.options); }, }, }; @@ -104,7 +117,7 @@ export const extendedWrapper = (wrapper) => { ); const wrappers = elements.map((element) => { - const elementWrapper = createWrapper(element, this.options || {}); + const elementWrapper = createWrapperFromElement(element, this.options); elementWrapper.selector = text; return elementWrapper; diff --git a/spec/frontend/__helpers__/vue_test_utils_helper_spec.js b/spec/frontend/__helpers__/vue_test_utils_helper_spec.js index 3bb228f94b8..ae180c3b49d 100644 --- a/spec/frontend/__helpers__/vue_test_utils_helper_spec.js +++ b/spec/frontend/__helpers__/vue_test_utils_helper_spec.js @@ -6,6 +6,7 @@ import { WrapperArray as VTUWrapperArray, ErrorWrapper as VTUErrorWrapper, } from '@vue/test-utils'; +import Vue from 'vue'; import { extendedWrapper, shallowMountExtended, @@ -139,9 +140,12 @@ describe('Vue test utils helpers', () => { const text = 'foo bar'; const options = { selector: 'div' }; const mockDiv = document.createElement('div'); + const mockVm = new Vue({ render: (h) => h('div') }).$mount(); let wrapper; beforeEach(() => { + jest.spyOn(vtu, 'createWrapper'); + wrapper = extendedWrapper( shallowMount({ template: `<div>foo bar</div>`, @@ -164,7 +168,6 @@ describe('Vue test utils helpers', () => { describe('when element is found', () => { beforeEach(() => { jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => [mockDiv]); - jest.spyOn(vtu, 'createWrapper'); }); it('returns a VTU wrapper', () => { @@ -172,14 +175,27 @@ describe('Vue test utils helpers', () => { expect(vtu.createWrapper).toHaveBeenCalledWith(mockDiv, wrapper.options); expect(result).toBeInstanceOf(VTUWrapper); + expect(result.vm).toBeUndefined(); }); }); + describe('when a Vue instance element is found', () => { + beforeEach(() => { + jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => [mockVm.$el]); + }); + + it('returns a VTU wrapper', () => { + const result = wrapper[findMethod](text, options); + + expect(vtu.createWrapper).toHaveBeenCalledWith(mockVm, wrapper.options); + expect(result).toBeInstanceOf(VTUWrapper); + expect(result.vm).toBeInstanceOf(Vue); + }); + }); describe('when multiple elements are found', () => { beforeEach(() => { const mockSpan = document.createElement('span'); jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => [mockDiv, mockSpan]); - jest.spyOn(vtu, 'createWrapper'); }); it('returns the first element as a VTU wrapper', () => { @@ -187,6 +203,24 @@ describe('Vue test utils helpers', () => { expect(vtu.createWrapper).toHaveBeenCalledWith(mockDiv, wrapper.options); expect(result).toBeInstanceOf(VTUWrapper); + expect(result.vm).toBeUndefined(); + }); + }); + + describe('when multiple Vue instances are found', () => { + beforeEach(() => { + const mockVm2 = new Vue({ render: (h) => h('span') }).$mount(); + jest + .spyOn(testingLibrary, expectedQuery) + .mockImplementation(() => [mockVm.$el, mockVm2.$el]); + }); + + it('returns the first element as a VTU wrapper', () => { + const result = wrapper[findMethod](text, options); + + expect(vtu.createWrapper).toHaveBeenCalledWith(mockVm, wrapper.options); + expect(result).toBeInstanceOf(VTUWrapper); + expect(result.vm).toBeInstanceOf(Vue); }); }); @@ -211,12 +245,17 @@ describe('Vue test utils helpers', () => { ${'findAllByAltText'} | ${'queryAllByAltText'} `('$findMethod', ({ findMethod, expectedQuery }) => { const text = 'foo bar'; - const options = { selector: 'div' }; + const options = { selector: 'li' }; const mockElements = [ document.createElement('li'), document.createElement('li'), document.createElement('li'), ]; + const mockVms = [ + new Vue({ render: (h) => h('li') }).$mount(), + new Vue({ render: (h) => h('li') }).$mount(), + new Vue({ render: (h) => h('li') }).$mount(), + ]; let wrapper; beforeEach(() => { @@ -245,9 +284,13 @@ describe('Vue test utils helpers', () => { ); }); - describe('when elements are found', () => { + describe.each` + case | mockResult | isVueInstance + ${'HTMLElements'} | ${mockElements} | ${false} + ${'Vue instance elements'} | ${mockVms} | ${true} + `('when $case are found', ({ mockResult, isVueInstance }) => { beforeEach(() => { - jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => mockElements); + jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => mockResult); }); it('returns a VTU wrapper array', () => { @@ -257,7 +300,9 @@ describe('Vue test utils helpers', () => { expect( result.wrappers.every( (resultWrapper) => - resultWrapper instanceof VTUWrapper && resultWrapper.options === wrapper.options, + resultWrapper instanceof VTUWrapper && + resultWrapper.vm instanceof Vue === isVueInstance && + resultWrapper.options === wrapper.options, ), ).toBe(true); expect(result.length).toBe(3); diff --git a/spec/frontend/__helpers__/vuex_action_helper.js b/spec/frontend/__helpers__/vuex_action_helper.js index ab2637d6024..bdd5a0a9034 100644 --- a/spec/frontend/__helpers__/vuex_action_helper.js +++ b/spec/frontend/__helpers__/vuex_action_helper.js @@ -1,5 +1,7 @@ -/** - * Helper for testing action with expected mutations inspired in +// eslint-disable-next-line no-restricted-syntax +import { setImmediate } from 'timers'; + +/** Helper for testing action with expected mutations inspired in * https://vuex.vuejs.org/en/testing.html * * @param {(Function|Object)} action to be tested, or object of named parameters diff --git a/spec/frontend/__helpers__/vuex_action_helper_spec.js b/spec/frontend/__helpers__/vuex_action_helper_spec.js index 5bb2b3b26e2..182aea9c1c5 100644 --- a/spec/frontend/__helpers__/vuex_action_helper_spec.js +++ b/spec/frontend/__helpers__/vuex_action_helper_spec.js @@ -76,7 +76,7 @@ describe.each([testActionFn, testActionFnWithOptionsArg])( const promise = testAction(() => {}, null, {}, assertion.mutations, assertion.actions); - originalExpect(promise instanceof Promise).toBeTruthy(); + originalExpect(promise instanceof Promise).toBe(true); return promise; }); diff --git a/spec/frontend/__helpers__/wait_for_promises.js b/spec/frontend/__helpers__/wait_for_promises.js index 753c3c5d92b..5a15b8b74b5 100644 --- a/spec/frontend/__helpers__/wait_for_promises.js +++ b/spec/frontend/__helpers__/wait_for_promises.js @@ -1,4 +1,2 @@ -export default () => - new Promise((resolve) => { - requestAnimationFrame(resolve); - }); +// eslint-disable-next-line no-restricted-syntax +export default () => new Promise(jest.requireActual('timers').setImmediate); diff --git a/spec/frontend/__helpers__/web_worker_transformer.js b/spec/frontend/__helpers__/web_worker_transformer.js index 5b2f7d77947..767ab3f5675 100644 --- a/spec/frontend/__helpers__/web_worker_transformer.js +++ b/spec/frontend/__helpers__/web_worker_transformer.js @@ -6,7 +6,7 @@ const babelJestTransformer = require('babel-jest'); // [1]: https://webpack.js.org/loaders/worker-loader/ module.exports = { process: (contentArg, filename, ...args) => { - const { code: content } = babelJestTransformer.process(contentArg, filename, ...args); + const { code: content } = babelJestTransformer.default.process(contentArg, filename, ...args); return `const { FakeWebWorker } = require("helpers/web_worker_fake"); module.exports = class JestTransformedWorker extends FakeWebWorker { |