Add test

src/components/Content/AppLink.vue

@@ -4,7 +4,7 @@ import { RouterLink } from 'vue-router'
 
 const link = withDefaults(
     defineProps<{
-        to: string
+        to: string | { name: string }
         label: string
     }>(),
     {
@@ -16,10 +16,16 @@ const link = withDefaults(
 const isExternalLink = computed(() => {
     return typeof link.to === 'string' && link.to.startsWith('http')
 })
+
+// Wrap in compute to suppress a warning. An external link will alway be a string
+// because of the previous computed value.
+const externalLink = computed((): string => {
+    return typeof link.to === 'string' ? link.to : ''
+})
 </script>
 
 <template>
-    <a v-if="isExternalLink" :href="to" target="_blank">
+    <a v-if="isExternalLink" :href="externalLink" target="_blank">
         <slot>{{ label }}</slot>
     </a>
     <RouterLink v-else :to="to">

src/tests/components/Content/AppLink.test.js

@@ -0,0 +1,82 @@
+import { expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import AppLink from '../../../components/Content/AppLink.vue'
+
+test('External, with slot overwrite', () => {
+    // Arrange
+    const wrapper = mount(AppLink, {
+        props: {
+            label: 'Hello world',
+            to: 'http://google.com'
+        },
+        slots: {
+            default: 'This is the slot content'
+        }
+    })
+
+    // Assert
+    expect(wrapper.html()).toMatch(
+        '<a href="http://google.com" target="_blank">This is the slot content</a>'
+    )
+})
+
+test('External, with label', () => {
+    // Arrange
+    const wrapper = mount(AppLink, {
+        props: {
+            label: 'Hello world',
+            to: 'http://google.com'
+        }
+    })
+
+    // Assert
+    expect(wrapper.html()).toMatch('<a href="http://google.com" target="_blank">Hello world</a>')
+})
+
+// Mock router
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: AppLink
+        }
+    ]
+})
+
+test('Internal, with label', () => {
+    // Arrange
+    const wrapper = mount(AppLink, {
+        props: {
+            label: 'Hello world',
+            to: '/'
+        },
+        global: {
+            plugins: [router]
+        }
+    })
+
+    // Assert
+    expect(wrapper.html()).toMatch('<a href="/" class="">Hello world</a>')
+})
+
+test('Internal, with slot', () => {
+    // Arrange
+    const wrapper = mount(AppLink, {
+        props: {
+            label: 'Hello world',
+            to: { name: 'home' }
+        },
+        slots: {
+            default: 'This is the slot content'
+        },
+        global: {
+            plugins: [router]
+        }
+    })
+
+    // Assert
+    expect(wrapper.html()).toMatch('<a href="/" class="">This is the slot content</a>')
+})