Commit 623b0d9b authored by Illya Klymov's avatar Illya Klymov

Introduce stub_transition helper

@vue/test-utils 1.x will not autostub transitions anymore. Instead
their docs recommend different approaches. One of them is picked
and implemented in stub_transition helper
parent 0e1bd185
......@@ -3,6 +3,7 @@ import { shallowMount, mount } from '@vue/test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
import { stubTransition } from 'helpers/stub_transition';
import LicenseComplianceApp from 'ee/license_compliance/components/app.vue';
import DetectedLicensesTable from 'ee/license_compliance/components/detected_licenses_table.vue';
import PipelineInfo from 'ee/license_compliance/components/pipeline_info.vue';
......@@ -31,13 +32,6 @@ const documentationPath = '/';
const noop = () => {};
const transitionStub = () => ({
render() {
// eslint-disable-next-line no-underscore-dangle
return this.$options._renderChildren;
},
});
const createComponent = ({ state, props, options }) => {
const fakeStore = new Vuex.Store({
modules: {
......@@ -85,7 +79,7 @@ const createComponent = ({ state, props, options }) => {
},
...options,
store: fakeStore,
stubs: { transition: transitionStub() },
stubs: { transition: stubTransition() },
});
};
......
import { mount, shallowMount } from '@vue/test-utils';
import { stubTransition } from 'helpers/stub_transition';
import ExpandableSection from 'ee/security_configuration/sast/components/expandable_section.vue';
describe('ExpandableSection component', () => {
let wrapper;
const createComponent = (options, mountFn = shallowMount) => {
wrapper = mountFn(ExpandableSection, options);
wrapper = mountFn(ExpandableSection, {
stubs: { transition: stubTransition() },
...options,
});
};
const findButton = () => wrapper.find('button');
......@@ -76,7 +80,8 @@ describe('ExpandableSection component', () => {
createComponent({}, mount);
});
it('hides the content by default', () => {
it('hides the content by default', async () => {
await wrapper.vm.$nextTick();
expect(findContent().isVisible()).toBe(false);
});
......
export function stubTransition() {
return {
render() {
// eslint-disable-next-line no-underscore-dangle
return this.$options._renderChildren;
},
};
}
import { createMockDirective } from 'helpers/vue_mock_directive';
import { mount } from '@vue/test-utils';
import { stubTransition } from 'helpers/stub_transition';
import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
describe('Issuable Time Tracker', () => {
......@@ -22,6 +23,9 @@ describe('Issuable Time Tracker', () => {
mount(TimeTracker, {
propsData: { ...defaultProps, ...props },
directives: { GlTooltip: createMockDirective() },
stubs: {
transition: stubTransition(),
},
});
afterEach(() => {
......@@ -213,14 +217,12 @@ describe('Issuable Time Tracker', () => {
findHelpButton().trigger('click');
await wrapper.vm.$nextTick();
expect(findByTestId('helpPane').classes('help-state-toggle-enter')).toBe(true);
expect(findByTestId('helpPane').classes('help-state-toggle-leave')).toBe(false);
expect(findByTestId('helpPane').exists()).toBe(true);
findCloseHelpButton().trigger('click');
await wrapper.vm.$nextTick();
expect(findByTestId('helpPane').classes('help-state-toggle-leave')).toBe(true);
expect(findByTestId('helpPane').classes('help-state-toggle-enter')).toBe(false);
expect(findByTestId('helpPane').exists()).toBe(false);
});
});
});
......
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