test: made unit tests for components

src/components/__tests__/DisplayInfoForChallengeOrGoalTest.spec.ts

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

src/components/__tests__/HelpComponentTest.spec.ts

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

src/components/__tests__/ModalEditAvatarTest.spec.ts

+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)
+    })
+})

src/components/__tests__/SpareComponentTest.spec.ts

+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)
+    })
+})