test(link): active + alias

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 4fe72040d9cee9464f9d0b184e365df599440a68..934792a472e93a26b0e322185097d3ab50f91730 100644 (file)
--- 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 e070765bff41f8750d9bb1fa1c7f31c5444c0095..755bc85cb64035e5659bc0c761289e3cb27bea32 100644 (file)
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -55,8 +55,11 @@ export function isSameRouteRecord(
   a: Immutable<RouteRecordNormalized>,
   b: Immutable<RouteRecordNormalized>
 ): 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(