Skip to content
Snippets Groups Projects
Commit 192a1131 authored by Vilde Min Vikan's avatar Vilde Min Vikan
Browse files

Merge branch 'NavigationUnitTests' into 'master'

Navigation unit tests

See merge request !58
parents c7319c22 85c5fad2
No related branches found
No related tags found
1 merge request!58Navigation unit tests
Pipeline #280622 passed
import { shallowMount } from '@vue/test-utils';
import DropNav from '@/components/navigation/DropNav.vue';
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);
const buttons = wrapper.findAll('.menu-button');
expect(buttons).toHaveLength(6);
expect(buttons[0].find('.button-label').text()).toBe('Hjem');
expect(buttons[1].find('.button-label').text()).toBe('Sparetips');
expect(buttons[2].find('.button-label').text()).toBe('Sparemål');
expect(buttons[3].find('.button-label').text()).toBe('Utfordringer');
expect(buttons[4].find('.button-label').text()).toBe('Forbruk');
expect(buttons[5].find('.button-label').text()).toBe('Profil');
expect(buttons[0].find('img').attributes('src')).toBe('/src/components/icons/navigation/house-chimney.svg');
expect(buttons[1].find('img').attributes('src')).toBe('/src/components/icons/navigation/lightbulb-on.svg');
expect(buttons[2].find('img').attributes('src')).toBe('/src/components/icons/navigation/piggy-bank.svg');
expect(buttons[3].find('img').attributes('src')).toBe('/src/components/icons/navigation/challenge.svg');
expect(buttons[4].find('img').attributes('src')).toBe('/src/components/icons/navigation/economy.svg');
expect(buttons[5].find('img').attributes('src')).toBe('/src/components/icons/navigation/user.svg');
});
});
import { mount } from '@vue/test-utils';
import DropDownMenu from '@/components/navigation/TopNav.vue';
import { describe, it, expect, vi , afterEach, beforeEach } from 'vitest'
describe('DropDownMenu', () => {
it('renders properly when burger menu is closed', () => {
const wrapper = mount(DropDownMenu);
expect(wrapper.find('.burger').exists()).toBe(false);
});
it('renders properly when burger menu is open', async () => {
const wrapper = mount(DropDownMenu);
await wrapper.find('.burger-menu').trigger('click');
expect(wrapper.find('.burger').exists()).toBe(true);
});
});
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment