From 9f71d2a3dbccac906fc69757c44185bcb6a09fd8 Mon Sep 17 00:00:00 2001
From: Sverre <sverrefh@stud.ntnu.no>
Date: Mon, 29 Apr 2024 10:43:15 +0200
Subject: [PATCH] Added unit test to DropNav router navigation

---
 src/components/__tests__/DropNav.spec.ts | 112 ++++++++++++++++++++++-
 src/components/navigation/DropNav.vue    |  12 +--
 2 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/src/components/__tests__/DropNav.spec.ts b/src/components/__tests__/DropNav.spec.ts
index 33cd6a7..5e8f466 100644
--- a/src/components/__tests__/DropNav.spec.ts
+++ b/src/components/__tests__/DropNav.spec.ts
@@ -1,8 +1,118 @@
 import { shallowMount } from '@vue/test-utils';
 import DropNav from '@/components/navigation/DropNav.vue';
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi , afterEach, beforeEach } from 'vitest'
+
+afterEach(() => {
+  vi.clearAllMocks
+})
+
+const mockRoutePush = vi.fn()
+
+beforeEach(() => {
+  vi.mock('vue-router', async () => {
+    return {
+      RouterView: {},
+      useRouter: () => {
+        return {
+          push: mockRoutePush
+        }
+      }
+    }
+  })
+})
+
 
 describe('DropNavComponent', () => {
+  it('navigates to home', async () => {
+
+    const wrapper = shallowMount(DropNav);
+
+    const button = wrapper.find('[data-testid="home-button"]');
+
+    await button.trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(mockRoutePush).toHaveBeenCalled()
+    expect(mockRoutePush).toHaveBeenCalledWith('/homepage/home');
+
+  })
+
+  it('navigates to discover', async () => {
+
+    const wrapper = shallowMount(DropNav);
+
+    const button = wrapper.find('[data-testid="discover-button"]');
+
+    await button.trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(mockRoutePush).toHaveBeenCalled()
+    expect(mockRoutePush).toHaveBeenCalledWith('/homepage/discover');
+
+  })
+
+  it('navigates to milestones', async () => {
+
+    const wrapper = shallowMount(DropNav);
+
+    const button = wrapper.find('[data-testid="milestone-button"]');
+
+    await button.trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(mockRoutePush).toHaveBeenCalled()
+    expect(mockRoutePush).toHaveBeenCalledWith('/homepage/milestone');
+
+  })
+
+  it('navigates to challenges', async () => {
+
+    const wrapper = shallowMount(DropNav);
+
+    const button = wrapper.find('[data-testid="challenge-button"]');
+
+    await button.trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(mockRoutePush).toHaveBeenCalled()
+    expect(mockRoutePush).toHaveBeenCalledWith('/homepage/challenge');
+
+  })
+
+  it('navigates to economy', async () => {
+
+    const wrapper = shallowMount(DropNav);
+
+    const button = wrapper.find('[data-testid="economy-button"]');
+
+    await button.trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(mockRoutePush).toHaveBeenCalled()
+    expect(mockRoutePush).toHaveBeenCalledWith('/homepage/economy');
+
+  })
+
+  it('navigates to profile', async () => {
+
+    const wrapper = shallowMount(DropNav);
+
+    const button = wrapper.find('[data-testid="profile-button"]');
+
+    await button.trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(mockRoutePush).toHaveBeenCalled()
+    expect(mockRoutePush).toHaveBeenCalledWith('/homepage/profile');
+
+  })
+
   it('renders buttons with correct labels and icons', () => {
     const wrapper = shallowMount(DropNav);
 
diff --git a/src/components/navigation/DropNav.vue b/src/components/navigation/DropNav.vue
index 47bf42a..210b001 100644
--- a/src/components/navigation/DropNav.vue
+++ b/src/components/navigation/DropNav.vue
@@ -14,27 +14,27 @@
 <template>
   <div class="burger-menu-component">
     <div class="button-menu">
-      <button class="menu-button" @click="navigateTo('/homepage/home')">
+      <button class="menu-button" @click="navigateTo('/homepage/home')" data-testid="home-button">
         <img src="/src/components/icons/navigation/house-chimney.svg" alt="Home Icon" class="icon">
         <label class="button-label">Hjem</label>
       </button>
-      <button class="menu-button" @click="navigateTo('/homepage/discover')">
+      <button class="menu-button" @click="navigateTo('/homepage/discover')" data-testid="discover-button">
         <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="Discover Icon" class="icon">
         <label class="button-label">Sparetips</label>
       </button>
-      <button class="menu-button" @click="navigateTo('/homepage/milestone')">
+      <button class="menu-button" @click="navigateTo('/homepage/milestone')" data-testid="milestone-button">
         <img src="/src/components/icons/navigation/piggy-bank.svg" alt="Milestone Icon" class="icon">
         <label class="button-label">Sparemål</label>
       </button>
-      <button class="menu-button" @click="navigateTo('/homepage/challenge')">
+      <button class="menu-button" @click="navigateTo('/homepage/challenge')" data-testid="challenge-button">
         <img src="/src/components/icons/navigation/challenge.svg" alt="Challenge Icon" class="icon">
         <label class="button-label">Utfordringer</label>
       </button>
-      <button class="menu-button" @click="navigateTo('/homepage/economy')">
+      <button class="menu-button" @click="navigateTo('/homepage/economy')" data-testid="economy-button">
         <img src="/src/components/icons/navigation/economy.svg" alt="Economy Icon" class="icon">
         <label class="button-label">Forbruk</label>
       </button>
-      <button class="menu-button" @click="navigateTo('/homepage/profile')">
+      <button class="menu-button" @click="navigateTo('/homepage/profile')" data-testid="profile-button">
         <img src="/src/components/icons/navigation/user.svg" alt="Profile Icon" class="icon">
         <label class="button-label">Profil</label>
       </button>
-- 
GitLab