Test: fix v3 spec/frontend/design_management/router_spec.js

scripts/frontend/quarantined_vue3_specs.txt

@@ -143,7 +143,6 @@ spec/frontend/design_management/components/design_notes/design_reply_form_spec.j
 spec/frontend/design_management/components/design_overlay_spec.js
 spec/frontend/design_management/pages/design/index_spec.js
 spec/frontend/design_management/pages/index_spec.js
-spec/frontend/design_management/router_spec.js
 spec/frontend/diffs/components/diff_line_note_form_spec.js
 spec/frontend/diffs/components/image_diff_overlay_spec.js
 spec/frontend/editor/components/source_editor_toolbar_spec.js

spec/frontend/design_management/router_spec.js

-import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import App from '~/design_management/components/app.vue';
 import DesignDetail from '~/design_management/pages/design/index.vue';
 import Designs from '~/design_management/pages/index.vue';
 import createRouter from '~/design_management/router';
 import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
 import '~/commons/bootstrap';
+import { getMatchedComponents } from '~/lib/utils/vue3compat/vue_router';
 
-function factory(routeArg) {
-  Vue.use(VueRouter);
+let router;
 
-  const router = createRouter('/');
+async function factory(routeArg) {
+  router = createRouter('/');
   if (routeArg !== undefined) {
-    router.push(routeArg);
+    await router.push(routeArg);
   }
 
-  return mount(App, {
+  return shallowMount(App, {
     router,
-    provide: { issueIid: '1' },
-    stubs: { Toolbar: true },
-    mocks: {
-      $apollo: {
-        queries: {
-          designCollection: { loading: true },
-          design: { loading: true },
-          permissions: { loading: true },
-        },
-        mutate: jest.fn(),
-      },
-    },
   });
 }
 
 describe('Design management router', () => {
   describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', (routeArg) => {
-    it('pushes home component', () => {
-      const wrapper = factory(routeArg);
-
-      expect(wrapper.findComponent(Designs).exists()).toBe(true);
+    it('pushes home component', async () => {
+      await factory(routeArg);
+      const components = getMatchedComponents(router, router.currentRoute.path);
+      expect(components).toEqual([Designs]);
     });
   });
 
   describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
     'designs detail route',
     (routeArg) => {
-      it('pushes designs detail component', () => {
-        const wrapper = factory(routeArg);
+      it('pushes designs detail component', async () => {
+        await factory(routeArg);
+        await nextTick();
+
+        const route = router.currentRoute;
+        const matchedComponents = getMatchedComponents(router, route.path);
+        const propsData = route.matched[0].props.default({ params: { id: '1' } });
 
-        return nextTick().then(() => {
-          const detail = wrapper.findComponent(DesignDetail);
-          expect(detail.exists()).toBe(true);
-          expect(detail.props('id')).toEqual('1');
-        });
+        expect(matchedComponents).toEqual([DesignDetail]);
+        expect(propsData).toEqual({ id: '1' });
       });
     },
   );