From: Eduardo San Martin Morote Date: Thu, 2 Jul 2020 14:04:45 +0000 (+0200) Subject: fix(warn): warn when RouterView is wrapped with transition X-Git-Tag: v4.0.0-beta.1~11 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e4b3fbe8b799b6621537afe365267a18eab9d3cd;p=thirdparty%2Fvuejs%2Frouter.git fix(warn): warn when RouterView is wrapped with transition --- 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(`
id:2;other:page
`) }) + describe('warnings', () => { + it('does not warn RouterView is wrapped', async () => { + const route = createMockedRoute(routes.root) + const wrapper = await mount( + { + template: ` +
+ +
+ `, + }, + { + propsData: {}, + provide: route.provides, + components: { RouterView }, + } + ) + expect(wrapper.html()).toBe(`
Home
`) + 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: ` + + + + `, + }, + { + propsData: {}, + provide: route.provides, + components: { RouterView }, + } + ) + expect(wrapper.html()).toBe(`
Home
`) + 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: ` + + + + + + `, + }, + { + propsData: {}, + provide: route.provides, + components: { RouterView }, + } + ) + expect(wrapper.html()).toBe(`
Home
`) + 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: ` + + + + `, + }, + { + propsData: {}, + provide: route.provides, + components: { RouterView }, + } + ) + expect(wrapper.html()).toBe(`
Home
`) + 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( ` can no longer be used directly inside or .\n` +