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