Merge branch 'xanf/stub-transition' into 'master'

Introduce stubTransition helper

See merge request gitlab-org/gitlab!50106

ee/spec/frontend/license_compliance/components/app_spec.js

@@ -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() },
   });
 };
 

ee/spec/frontend/security_configuration/sast/components/expandable_section_spec.js

 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);
     });
 

spec/frontend/helpers/stub_transition.js

+export function stubTransition() {
+  return {
+    render() {
+      // eslint-disable-next-line no-underscore-dangle
+      return this.$options._renderChildren;
+    },
+  };
+}

spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js

 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);
       });
     });
   });