From: Eduardo San Martin Morote Date: Thu, 12 Mar 2020 16:05:15 +0000 (+0100) Subject: test(link): active + alias X-Git-Tag: v4.0.0-alpha.2~11 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3ca067537280c9428565ccf9b9c0cf72620e6de5;p=thirdparty%2Fvuejs%2Frouter.git test(link): active + alias --- diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts index 4fe72040..934792a4 100644 --- a/__tests__/RouterLink.spec.ts +++ b/__tests__/RouterLink.spec.ts @@ -15,9 +15,19 @@ import { RouteRecordNormalized } from '../src/matcher/types' const records = { home: {} as RouteRecordNormalized, + homeAlias: {} as RouteRecordNormalized, foo: {} as RouteRecordNormalized, + parent: {} as RouteRecordNormalized, + child: {} as RouteRecordNormalized, + parentAlias: {} as RouteRecordNormalized, + childAlias: {} as RouteRecordNormalized, } +// fix the aliasOf +records.homeAlias = { aliasOf: records.home } as RouteRecordNormalized +records.parentAlias = { aliasOf: records.parent } as RouteRecordNormalized +records.childAlias = { aliasOf: records.child } as RouteRecordNormalized + const locations: Record< string, { @@ -99,6 +109,107 @@ const locations: Record< name: undefined, }, }, + alias: { + string: '/alias', + normalized: { + fullPath: '/alias', + path: '/alias', + params: {}, + meta: {}, + query: {}, + hash: '', + matched: [records.homeAlias], + redirectedFrom: undefined, + name: undefined, + }, + }, + + // nested routes + parent: { + string: '/parent', + normalized: { + fullPath: '/parent', + path: '/parent', + params: {}, + meta: {}, + query: {}, + hash: '', + matched: [records.parent], + redirectedFrom: undefined, + name: undefined, + }, + }, + parentAlias: { + string: '/p', + normalized: { + fullPath: '/p', + path: '/p', + params: {}, + meta: {}, + query: {}, + hash: '', + matched: [records.parentAlias], + redirectedFrom: undefined, + name: undefined, + }, + }, + + child: { + string: '/parent/child', + normalized: { + fullPath: '/parent/child', + path: '/parent/child', + params: {}, + meta: {}, + query: {}, + hash: '', + matched: [records.parent, records.child], + redirectedFrom: undefined, + name: undefined, + }, + }, + childParentAlias: { + string: '/p/child', + normalized: { + fullPath: '/p/child', + path: '/p/child', + params: {}, + meta: {}, + query: {}, + hash: '', + matched: [records.parentAlias, records.child], + redirectedFrom: undefined, + name: undefined, + }, + }, + childAlias: { + string: '/parent/c', + normalized: { + fullPath: '/parent/c', + path: '/parent/c', + params: {}, + meta: {}, + query: {}, + hash: '', + matched: [records.parent, records.childAlias], + redirectedFrom: undefined, + name: undefined, + }, + }, + childDoubleAlias: { + string: '/p/c', + normalized: { + fullPath: '/p/c', + path: '/p/c', + params: {}, + meta: {}, + query: {}, + hash: '', + matched: [records.parentAlias, records.childAlias], + redirectedFrom: undefined, + name: undefined, + }, + }, } describe('RouterLink', () => { @@ -201,11 +312,127 @@ describe('RouterLink', () => { expect(el.querySelector('a')!.className).toBe('') }) - it.todo('can be active as an alias') - it.todo('can be exact-active as an alias') - it.todo('is active when a child is active') - it.todo('only the children is exact-active') - it.todo('is not active if the parent is active') + it('can be active as an alias', () => { + let { el } = factory( + locations.basic.normalized, + { to: locations.alias.string }, + locations.alias.normalized + ) + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).toContain( + 'router-link-exact-active' + ) + el = factory( + locations.alias.normalized, + { to: locations.basic.string }, + locations.basic.normalized + ).el + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).toContain( + 'router-link-exact-active' + ) + }) + + it('is active when a child is active', () => { + const { el } = factory( + locations.child.normalized, + { to: locations.parent.string }, + locations.parent.normalized + ) + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).not.toContain( + 'router-link-exact-active' + ) + }) + + it('only the children is exact-active', () => { + const { el } = factory( + locations.child.normalized, + { to: locations.child.string }, + locations.child.normalized + ) + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).toContain( + 'router-link-exact-active' + ) + }) + + it('child is not active if the parent is active', () => { + const { el } = factory( + locations.parent.normalized, + { to: locations.child.string }, + locations.child.normalized + ) + expect(el.querySelector('a')!.className).not.toContain('router-link-active') + expect(el.querySelector('a')!.className).not.toContain( + 'router-link-exact-active' + ) + }) + + it('alias parent is active when a child is active', () => { + let { el } = factory( + locations.child.normalized, + { to: locations.parentAlias.string }, + locations.parentAlias.normalized + ) + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).not.toContain( + 'router-link-exact-active' + ) + el = factory( + locations.childDoubleAlias.normalized, + { to: locations.parentAlias.string }, + locations.parentAlias.normalized + ).el + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).not.toContain( + 'router-link-exact-active' + ) + }) + + it('alias parent is active', () => { + let { el } = factory( + locations.parent.normalized, + { to: locations.parentAlias.string }, + locations.parentAlias.normalized + ) + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).toContain( + 'router-link-exact-active' + ) + + el = factory( + locations.parentAlias.normalized, + { to: locations.parent.string }, + locations.parent.normalized + ).el + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).toContain( + 'router-link-exact-active' + ) + }) + + it('child and parent with alias', () => { + let { el } = factory( + locations.child.normalized, + { to: locations.childDoubleAlias.string }, + locations.childDoubleAlias.normalized + ) + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).toContain( + 'router-link-exact-active' + ) + + el = factory( + locations.child.normalized, + { to: locations.childParentAlias.string }, + locations.childParentAlias.normalized + ).el + expect(el.querySelector('a')!.className).toContain('router-link-active') + expect(el.querySelector('a')!.className).toContain( + 'router-link-exact-active' + ) + }) it('can be exact-active', () => { const { el } = factory( diff --git a/src/utils/index.ts b/src/utils/index.ts index e070765b..755bc85c 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -55,8 +55,11 @@ export function isSameRouteRecord( a: Immutable, b: Immutable ): boolean { - // TODO: handle aliases - return a === b + return ( + a === b || a.aliasOf === b || b.aliasOf === a + // TODO: doesn't work if not named and parent is an alias but child is not + // || (!!a.name && a.name === b.name) + ) } export function isSameLocationObject(