refactor(link): pass down everything from useLink

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 79e8637ac50fdda77b9617bfdc54a5f19970b66e..880902dceec7abd8fb8194c29e5d6ed5cc568024 100644 (file)
--- a/__tests__/RouterLink.spec.ts
+++ b/__tests__/RouterLink.spec.ts
@@ -111,19 +111,18 @@ describe('RouterLink', () => {
     expect(el.querySelector('a')!.getAttribute('href')).toBe('/home')
   })
 
-  // TODO: not sure why this breaks. We could take a look at @vue/test-runtime
-  it.skip('can change the value', async () => {
+  it('can change the value', async () => {
     const to = ref(locations.basic.string)
     const { el, router } = factory(
       START_LOCATION_NORMALIZED,
       { to },
       locations.basic.normalized
     )
-    expect(el.innerHTML).toBe('<a class="" href="/home">a link</a>')
+    expect(el.querySelector('a')!.getAttribute('href')).toBe('/home')
     router.resolve.mockReturnValueOnce(locations.foo.normalized)
     to.value = locations.foo.string
     await tick()
-    expect(el.innerHTML).toBe('<a class="" href="/foo">a link</a>')
+    expect(el.querySelector('a')!.getAttribute('href')).toBe('/foo')
   })
 
   it('displays a link with an object with path prop', () => {
@@ -144,6 +143,10 @@ describe('RouterLink', () => {
     expect(el.querySelector('a')!.className).toContain('router-link-active')
   })
 
+  it.todo('is active when a child is active')
+  it.todo('only the ')
+  it.todo('is not active if the parent is active')
+
   it('can be exact-active', () => {
     const { el } = factory(
       locations.basic.normalized,
@@ -201,6 +204,7 @@ describe('RouterLink', () => {
         route: {{ JSON.stringify(data.route) }}
         href: "{{ data.href }}"
         isActive: "{{ data.isActive }}"
+        isExactActive: "{{ data.isExactActive }}"
       </RouterLink>`,
         components: { RouterLink } as any,
         setup() {

diff --git a/__tests__/__snapshots__/RouterLink.spec.ts.snap b/__tests__/__snapshots__/RouterLink.spec.ts.snap
index 6de7f7e233da4a6d2f449cf78b6ae5c554fc79c8..459b6f137e9bfa3a8cd01deaeb9c40b9f1f9ff42 100644 (file)
--- a/__tests__/__snapshots__/RouterLink.spec.ts.snap
+++ b/__tests__/__snapshots__/RouterLink.spec.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RouterLink v-slot provides information on v-slot 1`] = `"<a class=\\"router-link-active router-link-exact-active\\" href=\\"/home\\"> route: {\\"fullPath\\":\\"/home\\",\\"path\\":\\"/home\\",\\"params\\":{},\\"meta\\":{},\\"query\\":{},\\"hash\\":\\"\\",\\"matched\\":[{}]} href: \\"/home\\" isActive: \\"true\\" </a>"`;
+exports[`RouterLink v-slot provides information on v-slot 1`] = `"<a class=\\"router-link-active router-link-exact-active\\" href=\\"/home\\"> route: {\\"fullPath\\":\\"/home\\",\\"path\\":\\"/home\\",\\"params\\":{},\\"meta\\":{},\\"query\\":{},\\"hash\\":\\"\\",\\"matched\\":[{}]} href: \\"/home\\" isActive: \\"true\\" isExactActive: \\"true\\" </a>"`;

diff --git a/src/components/Link.ts b/src/components/Link.ts
index e4b9a88a263741140c0d9e2d36d9746983dd4f2e..beead366a6d7158d31329be9b7ccacf7cdf8b32e 100644 (file)
--- a/src/components/Link.ts
+++ b/src/components/Link.ts
@@ -54,7 +54,6 @@ function includesParams(
   return true
 }
 
-// TODO: what should be accepted as arguments?
 export function useLink(props: UseLinkOptions) {
   const router = inject(routerKey)!
 
@@ -107,26 +106,23 @@ export const Link = defineComponent({
   },
 
   setup(props, { slots, attrs }) {
-    const { route, isActive, isExactActive, href, navigate } = useLink(props)
+    const link = reactive(useLink(props))
 
     const elClass = computed(() => ({
-      'router-link-active': isActive.value,
-      'router-link-exact-active': isExactActive.value,
+      'router-link-active': link.isActive,
+      'router-link-exact-active': link.isExactActive,
     }))
 
-    // TODO: exact active classes
-    // TODO: handle replace prop
-
     return () => {
       return h(
         'a',
         {
           class: elClass.value,
-          onClick: navigate,
-          href: href.value,
+          onClick: link.navigate,
+          href: link.href,
           ...attrs,
         },
-        slots.default(reactive({ route, href, isActive }))
+        slots.default(link)
       )
     }
   },