1 files changed, 36 insertions, 43 deletions

diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js
index fc88bfa06d2..0f4afa5e288 100644
--- a/spec/frontend/design_management/router_spec.js
+++ b/spec/frontend/design_management/router_spec.js
@@ -1,4 +1,5 @@
 import { mount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import App from '~/design_management/components/app.vue';
 import Designs from '~/design_management/pages/index.vue';
@@ -11,74 +12,66 @@ import {
 } from '~/design_management/router/constants';
 import '~/commons/bootstrap';
 
-jest.mock('mousetrap', () => ({
-  bind: jest.fn(),
-  unbind: jest.fn(),
-}));
-
-describe('Design management router', () => {
-  let vm;
-  let router;
-
-  function factory() {
-    const localVue = createLocalVue();
-
-    localVue.use(VueRouter);
+function factory(routeArg) {
+  const localVue = createLocalVue();
+  localVue.use(VueRouter);
 
-    window.gon = { sprite_icons: '' };
+  window.gon = { sprite_icons: '' };
 
-    router = createRouter('/');
+  const router = createRouter('/');
+  if (routeArg !== undefined) {
+    router.push(routeArg);
+  }
 
-    vm = mount(App, {
-      localVue,
-      router,
-      mocks: {
-        $apollo: {
-          queries: {
-            designs: { loading: true },
-            design: { loading: true },
-            permissions: { loading: true },
-          },
+  return mount(App, {
+    localVue,
+    router,
+    mocks: {
+      $apollo: {
+        queries: {
+          designs: { loading: true },
+          design: { loading: true },
+          permissions: { loading: true },
         },
       },
-    });
-  }
-
-  beforeEach(() => {
-    factory();
+    },
   });
+}
 
-  afterEach(() => {
-    vm.destroy();
+jest.mock('mousetrap', () => ({
+  bind: jest.fn(),
+  unbind: jest.fn(),
+}));
 
-    router.app.$destroy();
+describe('Design management router', () => {
+  afterEach(() => {
     window.location.hash = '';
   });
 
-  describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', pushArg => {
+  describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', routeArg => {
     it('pushes home component', () => {
-      router.push(pushArg);
+      const wrapper = factory(routeArg);
 
-      expect(vm.find(Designs).exists()).toBe(true);
+      expect(wrapper.find(Designs).exists()).toBe(true);
     });
   });
 
-  describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', pushArg => {
+  describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', routeArg => {
     it('pushes designs root component', () => {
-      router.push(pushArg);
+      const wrapper = factory(routeArg);
 
-      expect(vm.find(Designs).exists()).toBe(true);
+      expect(wrapper.find(Designs).exists()).toBe(true);
     });
   });
 
   describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
     'designs detail route',
-    pushArg => {
+    routeArg => {
       it('pushes designs detail component', () => {
-        router.push(pushArg);
+        const wrapper = factory(routeArg);
 
-        return vm.vm.$nextTick().then(() => {
-          const detail = vm.find(DesignDetail);
+        return nextTick().then(() => {
+          const detail = wrapper.find(DesignDetail);
           expect(detail.exists()).toBe(true);
           expect(detail.props('id')).toEqual('1');
         });