Skip to content
Snippets Groups Projects
Commit faf19ff6 authored by Eline Evje's avatar Eline Evje
Browse files

test: made unit tests for components

parent dfe65cf4
No related branches found
No related tags found
3 merge requests!66Final merge,!59Test/unit tests component,!4Pipeline fix
import { beforeEach, describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import DisplayInfoForChallengeOrGoal from '@/components/DisplayInfoForChallengeOrGoal.vue'
interface Props {
displayInfoCard: boolean;
screenSize: number;
challenge: any;
goal: any;
isChallenge: boolean;
}
describe('InfoCardComponent', () => {
let wrapper: any;
const mockChallenge = {
description: 'Complete daily tasks',
title: 'Daily Challenge',
saved: 100,
completion: 50,
due: '2024-01-01T00:00:00Z',
perPurchase: 10,
target: 500
};
beforeEach(() => {
wrapper = mount(DisplayInfoForChallengeOrGoal, {
props: {
challenge: mockChallenge, // Passing only recognized props
goal: null,
isChallenge: true
}
})
})
it('toggles displayInfoCard when the button is clicked', async () => {
expect(wrapper.vm.displayInfoCard).toBe(false);
await wrapper.find('button').trigger('click');
expect(wrapper.vm.displayInfoCard).toBe(true);
await wrapper.find('button').trigger('click');
expect(wrapper.vm.displayInfoCard).toBe(false);
})
it('does not render the info card when displayInfoCard is false', () => {
expect(wrapper.find('.w-[40vh]').exists()).toBe(false);
})
})
import { beforeEach, describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import HelpComponent from '@/components/HelpComponent.vue'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import ModalComponent from '@/components/ModalComponent.vue'
describe('HelpComponent', () => {
let wrapper: any
beforeEach(() => {
wrapper = mount(HelpComponent, {
props: {
speech: ['Sample Speech'], // Pass as an array
}
})
})
it('initially, the modal should not be open', () => {
expect(wrapper.vm.isModalOpen).toBe(false)
})
it('should open the modal when the image is clicked', async () => {
await wrapper.find('.fixed').trigger('click');
expect(wrapper.vm.isModalOpen).toBe(true);
})
it('should close the modal when the skip link is clicked', async () => {
wrapper.vm.isModalOpen = true;
await wrapper.vm.$nextTick();
if (wrapper.find('a').exists()) {
await wrapper.find('a').trigger('click');
await wrapper.vm.$nextTick();
expect(wrapper.vm.isModalOpen).toBe(false);
} else {
throw new Error('Skip link is not rendered');
}
});
it('modal should render the correct speech text to the InteractiveSpare component when modal is open', async () => {
wrapper.vm.isModalOpen = true;
await wrapper.vm.$nextTick();
const interactiveSpare = wrapper.findComponent(InteractiveSpare);
if (interactiveSpare.exists()) {
expect(interactiveSpare.props('speech')).toEqual(['Sample Speech']); // Pass as an array
} else {
throw new Error('InteractiveSpare component is not rendered');
}
})
it('should close the modal when close event is emitted by the ModalComponent', async () => {
wrapper.vm.isModalOpen = true;
await wrapper.vm.$nextTick();
wrapper.findComponent(ModalComponent).vm.$emit('close');
await wrapper.vm.$nextTick();
expect(wrapper.vm.isModalOpen).toBe(false);
})
})
import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import ModalEditAvatar from '@/components/ModalEditAvatar.vue'
const pinia = createPinia()
const app = createApp({
setup() {
app.use(pinia)
},
render: () => null,
})
const wrapper = mount(ModalEditAvatar, {
global: {
plugins: [pinia],
},
})
describe('ModalEditAvatar', () => {
it('renders properly when modal is closed', async () => {
const wrapper = mount(ModalEditAvatar)
expect(wrapper.find('.fixed').exists()).toBe(false)
})
it('opens modal when button is clicked', async () => {
const wrapper = mount(ModalEditAvatar)
await wrapper.find('button').trigger('click')
expect(wrapper.find('.fixed').exists()).toBe(true)
})
it('closes modal when close button is clicked', async () => {
const wrapper = mount(ModalEditAvatar)
await wrapper.find('button').trigger('click')
expect(wrapper.find('.fixed').exists()).toBe(true)
await wrapper.find('.bg-white button').trigger('click')
expect(wrapper.find('.fixed').exists()).toBe(false)
})
it('cycles avatars to the next one when next button is clicked', async () => {
const wrapper = mount(ModalEditAvatar)
await wrapper.find('button').trigger('click')
const currentAvatarSrc = wrapper.find('.avatar').attributes('src')
await wrapper.find('.avatar-container button:last-child').trigger('click')
const newAvatarSrc = wrapper.find('.avatar').attributes('src')
expect(newAvatarSrc).not.toBe(currentAvatarSrc)
})
it('cycles avatars to the previous one when previous button is clicked', async () => {
const wrapper = mount(ModalEditAvatar)
await wrapper.find('button').trigger('click')
await wrapper.find('.avatar-container button:last-child').trigger('click')
const currentAvatarSrc = wrapper.find('.avatar').attributes('src')
await wrapper.find('.avatar-container button:first-child').trigger('click')
const newAvatarSrc = wrapper.find('.avatar').attributes('src')
expect(newAvatarSrc).not.toBe(currentAvatarSrc)
})
})
import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import SpareComponent from '@/components/SpareComponent.vue'
import ModalComponent from '@/components/ModalComponent.vue'
describe('SpareComponent', () => {
it('renders properly and opens modal when image is clicked', async () => {
const wrapper = mount(SpareComponent, {
props: {
speech: ['Hello', 'World'],
pngSize: 100,
direction: 'left',
imageDirection: 'left',
show: false
}
})
expect(wrapper.findComponent(ModalComponent).exists()).toBe(false)
await wrapper.find('img').trigger('click')
expect(wrapper.findComponent(ModalComponent).exists()).toBe(true)
})
})
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