Use a global wrapper objectwinh-component-test-wrapper

3 files changed, 29 insertions, 30 deletions

diff --git a/spec/frontend/.eslintrc.yml b/spec/frontend/.eslintrc.yml
index e78a38d31f5..4b14e075ab9 100644
--- a/spec/frontend/.eslintrc.yml
+++ b/spec/frontend/.eslintrc.yml
@@ -14,3 +14,4 @@ globals:
   loadFixtures: false
   preloadFixtures: false
   setFixtures: false
+  wrapper: false
diff --git a/spec/frontend/helpers/component_wrapper.js b/spec/frontend/helpers/component_wrapper.js
index 787c5494a94..fa47a6d2585 100644
--- a/spec/frontend/helpers/component_wrapper.js
+++ b/spec/frontend/helpers/component_wrapper.js
@@ -1,33 +1,35 @@
 /* eslint-disable import/prefer-default-export, global-require, import/no-dynamic-require */
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-export const createComponentFactory = (component, callback = () => {}) => {
-  const localVue = createLocalVue();
-  let wrapper = null;
+const localVue = createLocalVue();
 
-  const setWrapper = newWrapper => {
-    if (wrapper) {
-      wrapper.destroy();
+export const destroyWrapper = () => {
+  if (global.wrapper) {
+    global.wrapper.destroy();
+    global.wrapper = null;
+  }
+};
+
+export const createWrapperFactory = (component, destroyHook = afterEach) => {
+  const createWrapper = options => {
+    if (global.wrapper) {
+      throw new Error('You need to call destroyWrapper() before creating a new wrapper instance!');
     }
 
-    wrapper = newWrapper;
-    callback(newWrapper);
+    global.wrapper = shallowMount(component, {
+      localVue,
 
-    return newWrapper;
-  };
+      // async will become default in the next release
+      // https://github.com/vuejs/vue-test-utils/issues/1137
+      sync: false,
 
-  const create = (...options) =>
-    setWrapper(
-      shallowMount(component, {
-        localVue,
-        // async will become default in the next release
-        // https://github.com/vuejs/vue-test-utils/issues/1137
-        sync: false,
-        ...options,
-      }),
-    );
+      ...options,
+    });
+
+    return global.wrapper;
+  };
 
-  afterEach(() => setWrapper(null));
+  destroyHook(destroyWrapper);
 
-  return create;
+  return createWrapper;
 };
diff --git a/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js b/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js
index 67eccee9243..c8a9fbd5572 100644
--- a/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js
+++ b/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js
@@ -1,17 +1,13 @@
-import { createComponentFactory } from 'helpers/component_wrapper';
+import { createWrapperFactory } from 'helpers/component_wrapper';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 
 describe('TimelineEntryItem', () => {
-  let wrapper;
-
-  const createComponent = createComponentFactory(TimelineEntryItem, val => {
-    wrapper = val;
-  });
+  const createWrapper = createWrapperFactory(TimelineEntryItem);
 
   const findContent = () => wrapper.find('.timeline-entry-inner :first-child');
 
   it('renders correctly', () => {
-    createComponent();
+    createWrapper();
 
     expect(wrapper.is('.timeline-entry')).toBe(true);
     expect(wrapper.contains('.timeline-entry-inner')).toBe(true);
@@ -20,7 +16,7 @@ describe('TimelineEntryItem', () => {
   it('accepts default slot', () => {
     const dummyContent = '<p>some content</p>';
 
-    createComponent({
+    createWrapper({
       slots: {
         default: dummyContent,
       },