From e4b3fbe8b799b6621537afe365267a18eab9d3cd Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 2 Jul 2020 16:04:45 +0200
Subject: [PATCH] fix(warn): warn when RouterView is wrapped with transition

---
 __tests__/RouterView.spec.ts | 83 ++++++++++++++++++++++++++++++++++++
 src/RouterView.ts            |  5 ++-
 2 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/__tests__/RouterView.spec.ts b/__tests__/RouterView.spec.ts
index 80a66f49..b7805d37 100644
--- a/__tests__/RouterView.spec.ts
+++ b/__tests__/RouterView.spec.ts
@@ -293,6 +293,89 @@ describe('RouterView', () => {
     expect(wrapper.html()).toBe(`<div>id:2;other:page</div>`)
   })
 
+  describe('warnings', () => {
+    it('does not warn RouterView is wrapped', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <div>
+          <router-view/>
+        </div>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div><div>Home</div></div>`)
+      expect('can no longer be used directly inside').not.toHaveBeenWarned()
+    })
+    it('warns if KeepAlive wraps a RouterView', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <keep-alive>
+          <router-view/>
+        </keep-alive>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div>Home</div>`)
+      expect('can no longer be used directly inside').toHaveBeenWarned()
+    })
+
+    it('warns if KeepAlive and Transition wrap a RouterView', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <transition>
+          <keep-alive>
+            <router-view/>
+          </keep-alive>
+        </transition>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div>Home</div>`)
+      expect('can no longer be used directly inside').toHaveBeenWarned()
+    })
+
+    it('warns if Transition wraps a RouterView', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <transition>
+          <router-view/>
+        </transition>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div>Home</div>`)
+      expect('can no longer be used directly inside').toHaveBeenWarned()
+    })
+  })
+
   describe('KeepAlive', () => {
     async function factory(
       initialRoute: RouteLocationNormalizedLoose,
diff --git a/src/RouterView.ts b/src/RouterView.ts
index a4e816b6..74ed892d 100644
--- a/src/RouterView.ts
+++ b/src/RouterView.ts
@@ -115,7 +115,10 @@ export const RouterView = (RouterViewImpl as any) as {
 function warnDeprecatedUsage() {
   const instance = getCurrentInstance()!
   const parentName = instance.parent && instance.parent.type.name
-  if (parentName === 'KeepAlive' || parentName === 'Transition') {
+  if (
+    parentName &&
+    (parentName === 'KeepAlive' || parentName.includes('Transition'))
+  ) {
     const comp = parentName === 'KeepAlive' ? 'keep-alive' : 'transition'
     warn(
       `<router-view> can no longer be used directly inside <transition> or <keep-alive>.\n` +
-- 
2.47.3