Merge branch 'MilestoneComponentsUnitTests' into 'master'

Milestone components unit tests

See merge request !63

src/components/__tests__/ActiveMilestoneDisplay.spec.ts

+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import ActiveMilestoneDisplay from '../milestone/ActiveMilestoneDisplay.vue'
+import ProgressBar from '../ProgressBar.vue'
+
+describe('ActiveMilestoneDisplay', () => {
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  const propsData = {
+    id: 1,
+    title: 'Test Milestone',
+    description: 'Test Description',
+    goalSum: 1000,
+    currentSum: 500,
+    deadline: new Date('2024-05-01'),
+    startDate: new Date('2024-04-01'),
+    image: 'test.jpg'
+  }
+
+  const id = 1;
+  const title = 'Test Milestone'
+  const description = 'Test Description'
+  const goalSum = 1000
+  const currentSum = 500
+  const deadline = new Date('2024-05-01')
+  const startDate = new Date('2024-04-01')
+  const image = 'test.jpg'
+
+  it('renders correctly', () => {
+    const wrapper = mount(ActiveMilestoneDisplay, {
+      props: { id, title, description, goalSum, currentSum, deadline, startDate, image }
+    })
+    expect(wrapper.find('.active-milestone-display').exists()).toBe(true)
+    expect(wrapper.find('.title').text()).toBe(propsData.title)
+    expect(wrapper.find('.description').text()).toBe(
+      `${propsData.currentSum}kr av ${propsData.goalSum}kr`
+    )
+    expect(wrapper.findComponent(ProgressBar).props('Max')).toBe(
+      propsData.goalSum
+    )
+    expect(wrapper.findComponent(ProgressBar).props('Current')).toBe(
+      propsData.currentSum
+    )
+  })
+
+  it('displays default image if image prop is not provided', async () => {
+    const wrapper = mount(ActiveMilestoneDisplay, {
+      props: { propsData }
+    })
+    await wrapper.setProps({ image: '' })
+
+    const activeMilestoneDisplay = wrapper.find('.active-milestone-display').element as HTMLDivElement
+    expect(activeMilestoneDisplay.style.backgroundImage).toContain('src/assets/pig.png')
+  })
+
+});

src/components/__tests__/CompletedMilestoneDisplay.spec.ts

+import { mount } from '@vue/test-utils';
+import CompletedMilestoneDisplay from '../milestone/CompletedMilestoneDisplay.vue'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+
+describe('CompletedMilestoneDisplay', () => {
+  it('renders with props', async () => {
+    const wrapper = mount(CompletedMilestoneDisplay, {
+      props: {
+        id: 1,
+        title: 'Test Title',
+        description: 'Test Description',
+        goalSum: 1000,
+        currentSum: 500,
+        deadline: new Date('2024-05-01'),
+        startDate: new Date('2024-04-01'),
+        image: 'test.jpg'
+      }
+    });
+
+    expect(wrapper.find('.title').text()).toBe('Test Title');
+
+    expect(wrapper.find('.info').exists()).toBe(true);
+    expect(wrapper.find('.info h4').text()).toBe('Du sparte 500kr');
+
+    await wrapper.trigger('mouseover');
+
+    await nextTick();
+
+    expect(wrapper.find('.info').exists()).toBe(true);
+    expect(wrapper.find('.info h4').text()).toBe('Test Description');
+
+    await wrapper.trigger('mouseleave');
+
+    await nextTick();
+
+    expect(wrapper.find('.info').exists()).toBe(true);
+    expect(wrapper.find('.info h4').text()).toBe('Du sparte 500kr');
+  });
+
+});

src/components/__tests__/InactiveChallengeDisplay.spec.ts

@@ -2,8 +2,6 @@ import { mount } from '@vue/test-utils';
 import InactiveChallengeDisplay from '@/components/challenge/InactiveChallengeDisplay.vue';
 import { describe, it, expect, beforeEach } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
-import { activateChallenge } from '../../utils/challengeutils'
-import eventBus from '@/components/service/eventBus.js'
 
 describe('InactiveChallengeDisplay', () => {