Added unit test to DropNav router navigation

src/components/__tests__/DropNav.spec.ts

 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);
 

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>