fix(vue): testing a routerLink-capable component no longer warns of m…

…issing router dependency (#22532) resolves #22506
ionic-team · Nov 23, 2020 · 4e23aad · 4e23aad
1 parent a664ccb
commit 4e23aad
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/core/package.json
@@ -38,7 +38,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/core": "2.1.2",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "0.1.8",
+    "@stencil/vue-output-target": "0.2.2",
     "@types/jest": "^26.0.10",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "3.0.1",

diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
@@ -3,7 +3,7 @@
 /* auto-generated vue proxies */
 import { defineContainer } from './vue-component-lib/utils';
 
-import { JSX } from '@ionic/core';
+import type { JSX } from '@ionic/core';
 
 
 

diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
@@ -1,4 +1,4 @@
-import { VNode, defineComponent, h, inject, ref, Ref } from 'vue';
+import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
 export interface InputProps extends Object {
   modelValue: string | boolean;
@@ -62,16 +62,22 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
 
     let handleClick: (ev: Event) => void;
     if (routerLinkComponent) {
-      const navManager: NavManager = inject(NAV_MANAGER);
+      const currentInstance = getCurrentInstance();
+      const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+      const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
       handleClick = (ev: Event) => {
         const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX));
         if (routerProps.length === 0) return;
 
-        let navigationPayload: any = { event: ev };
-        routerProps.forEach(prop => {
-          navigationPayload[prop] = (props as any)[prop];
-        });
-        navManager.navigate(navigationPayload);
+        if (navManager !== undefined) {
+          let navigationPayload: any = { event: ev };
+          routerProps.forEach(prop => {
+            navigationPayload[prop] = (props as any)[prop];
+          });
+          navManager.navigate(navigationPayload);
+        } else {
+          console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
+        }
       }
     }