test(challenge): added CardChallenge test

src/components/CardChallenge.vue

@@ -7,23 +7,13 @@ import type { Challenge } from '@/types/challenge'
 const props = defineProps({
     challengeInstance: {
         type: Object as PropType<Challenge>,
-        default: () => ({
-            id: 0,
-            title: 'Challenge title',
-            saved: 0,
-            target: 1000,
-            description: 'challenge Description',
-            due: '2021-12-31'
-        })
-    },
-    isCompleted: {
-        type: Boolean,
-        default: false
+        required: true
     }
 })
 
 const challengeInstance = props.challengeInstance
 const displayDate = computed(() => challengeInstance.due?.slice(0, 16).split('T').join(' '))
+const isCompleted = computed(() => challengeInstance.completedOn != null)
 
 const handleCardClick = () => {
     router.push({ name: 'view-challenge', params: { id: challengeInstance.id } })
@@ -32,7 +22,7 @@ const handleCardClick = () => {
 
 <template>
     <div
-        :class="{ 'bg-green-200 cursor-default': props.isCompleted }"
+        :class="{ 'bg-green-200 cursor-default': isCompleted }"
         class="border-2 border-black rounded-xl p-4 flex flex-col items-center gap-2 cursor-pointer w-52 overflow-hidden"
         @click="handleCardClick"
     >

src/components/__tests__/CardChallengeTest.spec.ts

+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CardChallenge from '../CardChallenge.vue'
+import type { Challenge } from '../../types/challenge'
+
+describe('CardChallenge', () => {
+    let wrapper: any
+
+    const incompleteChallenge: Challenge = {
+        id: 1,
+        title: 'Test title',
+        perPurchase: 10,
+        saved: 100,
+        target: 1000,
+        description: 'Test description',
+        due: '2022-01-01T00:00:00Z',
+        createdOn: '2021-01-01T00:00:00Z',
+        type: 'Challenge type',
+        completion: 10
+    }
+
+    const completeChallenge: Challenge = {
+        id: 1,
+        title: 'Test title',
+        perPurchase: 10,
+        saved: 100,
+        target: 1000,
+        description: 'Test description',
+        due: '2022-01-01T00:00:00Z',
+        createdOn: '2021-01-01T00:00:00Z',
+        type: 'Challenge type',
+        completion: 10,
+        completedOn: '2022-01-01T00:00:00Z'
+    }
+
+    beforeEach(async () => {
+        wrapper = mount(CardChallenge, {
+            propsData: {
+                challengeInstance: incompleteChallenge
+            }
+        })
+        await wrapper.vm.$nextTick()
+    })
+
+    it('renders correctly', () => {
+        expect(wrapper.text()).toContain('Test title')
+        expect(wrapper.text()).toContain('100kr / 1000kr')
+        expect(wrapper.text()).toContain('2022-01-01 00:00')
+    })
+
+    it('sets isCompleted to false', () => {
+        expect(wrapper.vm.isCompleted).toBe(false)
+    })
+
+    it('sets isCompleted to true', async () => {
+        const completedWrapper = mount(CardChallenge, {
+            propsData: {
+                challengeInstance: completeChallenge
+            }
+        })
+        await completedWrapper.vm.$nextTick()
+
+        expect(completedWrapper.vm.isCompleted).toBe(true)
+    })
+})

src/views/ChallengeView.vue

-<script lang="ts" setup></script>
-
-<template>
-    <h1>Spareutfordringer</h1>
-</template>
-
-<style scoped></style>

src/views/UserChallengesView.vue

@@ -75,7 +75,6 @@ onMounted(async () => {
                 v-for="challenge in completedChallenges"
                 :key="challenge.id"
                 :challenge-instance="challenge"
-                :is-completed="true"
             />
         </div>
         <PageControl