fix(warn): warn when RouterView is wrapped with transition

vuejs · Jul 2, 2020 · e4b3fbe · e4b3fbe
1 parent 994c073
commit e4b3fbe
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 1 deletion.
diff --git 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
@@ -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` +