Add NavBar test

userfrosting · Sep 3, 2024 · ea195d4 · ea195d4
1 parent e87a61b
commit ea195d4
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 42 deletions.
diff --git a/src/components/NavBar/NavBar.vue b/src/components/NavBar/NavBar.vue
@@ -3,8 +3,8 @@ import AppLink from '../Content/AppLink.vue'
 
 withDefaults(
     defineProps<{
-        to: string
-        title: string
+        to?: string
+        title?: string
     }>(),
     {
         to: '',
@@ -19,12 +19,12 @@ withDefaults(
             <div class="uk-navbar-container">
                 <div class="uk-container uk-container-expand">
                     <nav class="uk-navbar" uk-navbar>
-                        <div class="uk-navbar-left">
+                        <div class="uk-navbar-left" data-test="navbar-left">
                             <AppLink :to="to" class="uk-navbar-item uk-logo" label="">
                                 <slot name="title">{{ title }}</slot>
                             </AppLink>
                         </div>
-                        <div class="uk-navbar-right">
+                        <div class="uk-navbar-right" data-test="navbar-right">
                             <ul class="uk-navbar-nav">
                                 <slot></slot>
                             </ul>

diff --git a/src/tests/components/NavBar/NavBar.test.js b/src/tests/components/NavBar/NavBar.test.js
@@ -0,0 +1,82 @@
+import { expect, test, describe } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import NavBar from '../../../components/NavBar/NavBar.vue'
+
+// Mock router
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: NavBar
+        }
+    ]
+})
+
+describe('NavBar.vue', () => {
+    test('Renders correctly with no props or slots', () => {
+        const wrapper = mount(NavBar, {
+            global: {
+                plugins: [router]
+            }
+        })
+
+        // Assert
+        expect(wrapper.exists()).toBe(true)
+        expect(wrapper.get('[data-test="navbar-left"]').text()).toMatch('')
+        expect(wrapper.get('[data-test="navbar-right"]').text()).toMatch('')
+    })
+
+    test('Title props provided', () => {
+        // Arrange
+        const wrapper = mount(NavBar, {
+            props: {
+                title: 'This is the Label as prop',
+                to: '/'
+            },
+            global: {
+                plugins: [router]
+            }
+        })
+
+        // Assert
+        expect(wrapper.get('[data-test="navbar-left"]').text()).toMatch('This is the Label as prop')
+    })
+
+    test('Title slot provided, and it overwrites the props', () => {
+        // Arrange
+        const wrapper = mount(NavBar, {
+            props: {
+                label: 'This is the Label as prop'
+            },
+            slots: {
+                title: 'This is the slot content'
+            },
+            global: {
+                plugins: [router]
+            }
+        })
+
+        // Assert
+        expect(wrapper.get('[data-test="navbar-left"]').text()).toMatch('This is the slot content')
+    })
+
+    test('Right slot provided', () => {
+        // Arrange
+        const wrapper = mount(NavBar, {
+            slots: {
+                default: '<li>This is the right slot content</li>'
+            },
+            global: {
+                plugins: [router]
+            }
+        })
+
+        // Assert
+        expect(wrapper.get('[data-test="navbar-right"]').text()).toMatch(
+            'This is the right slot content'
+        )
+    })
+})
diff --git a/src/tests/components/NavBar/NavBarDropdown.test.js b/src/tests/components/NavBar/NavBarDropdown.test.js
@@ -1,49 +1,51 @@
-import { expect, test } from 'vitest'
+import { expect, test, describe } from 'vitest'
 import { mount } from '@vue/test-utils'
 import MainContent from '../../../components/NavBar/NavBarDropdown.vue'
 
-test('Label as slot', () => {
-    // Arrange
-    const wrapper = mount(MainContent, {
-        slots: {
-            label: 'This is the Label as Slot',
-            default: 'This is the slot content'
-        }
+describe('NavBarDropdown.vue', () => {
+    test('Label as slot', () => {
+        // Arrange
+        const wrapper = mount(MainContent, {
+            slots: {
+                label: 'This is the Label as Slot',
+                default: 'This is the slot content'
+            }
+        })
+
+        // Assert
+        expect(wrapper.get('[data-test="label"]').text()).toMatch('This is the Label as Slot')
+        expect(wrapper.get('[data-test="slot"]').text()).toMatch('This is the slot content')
     })
 
-    // Assert
-    expect(wrapper.get('[data-test="label"]').text()).toMatch('This is the Label as Slot')
-    expect(wrapper.get('[data-test="slot"]').text()).toMatch('This is the slot content')
-})
+    test('Label as prop', () => {
+        // Arrange
+        const wrapper = mount(MainContent, {
+            props: {
+                label: 'This is the Label as prop'
+            },
+            slots: {
+                default: 'This is the slot content'
+            }
+        })
 
-test('Label as prop', () => {
-    // Arrange
-    const wrapper = mount(MainContent, {
-        props: {
-            label: 'This is the Label as prop'
-        },
-        slots: {
-            default: 'This is the slot content'
-        }
+        // Assert
+        expect(wrapper.get('[data-test="label"]').text()).toMatch('This is the Label as prop')
+        expect(wrapper.get('[data-test="slot"]').text()).toMatch('This is the slot content')
     })
 
-    // Assert
-    expect(wrapper.get('[data-test="label"]').text()).toMatch('This is the Label as prop')
-    expect(wrapper.get('[data-test="slot"]').text()).toMatch('This is the slot content')
-})
+    test('Label slot overwrite prop', () => {
+        // Arrange
+        const wrapper = mount(MainContent, {
+            props: {
+                label: 'This is the Label as prop'
+            },
+            slots: {
+                label: 'This is the Label as Slot'
+            }
+        })
 
-test('Label slot overwrite prop', () => {
-    // Arrange
-    const wrapper = mount(MainContent, {
-        props: {
-            label: 'This is the Label as prop'
-        },
-        slots: {
-            label: 'This is the Label as Slot'
-        }
+        // Assert
+        expect(wrapper.get('[data-test="label"]').text()).toMatch('This is the Label as Slot')
+        expect(wrapper.get('[data-test="slot"]').text()).toMatch('')
     })
-
-    // Assert
-    expect(wrapper.get('[data-test="label"]').text()).toMatch('This is the Label as Slot')
-    expect(wrapper.get('[data-test="slot"]').text()).toMatch('')
 })