From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 28 Feb 2020 14:32:43 +0000 (+0100)
Subject: refactor(link): pass down everything from useLink
X-Git-Tag: v4.0.0-alpha.2~28
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1360baaaa1bd050c02b350c48d1d3f427f446727;p=thirdparty%2Fvuejs%2Frouter.git

refactor(link): pass down everything from useLink
---

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 79e8637a..880902dc 100644
--- 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 6de7f7e2..459b6f13 100644
--- 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 e4b9a88a..beead366 100644
--- 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)
       )
     }
   },