From 5241782ba1b6213f43760b87ab8da58a7e389099 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Trygve=20J=C3=B8rgensen?= <trygjor@stud.ntnu.no>
Date: Thu, 25 Apr 2024 18:00:57 +0200
Subject: [PATCH] test(challenge): added CardChallenge test
---
src/components/CardChallenge.vue | 16 +----
.../__tests__/CardChallengeTest.spec.ts | 65 +++++++++++++++++++
src/views/ChallengeView.vue | 7 --
src/views/UserChallengesView.vue | 1 -
4 files changed, 68 insertions(+), 21 deletions(-)
create mode 100644 src/components/__tests__/CardChallengeTest.spec.ts
delete mode 100644 src/views/ChallengeView.vue
diff --git a/src/components/CardChallenge.vue b/src/components/CardChallenge.vue
index a456ad7..b2349e0 100644
--- a/src/components/CardChallenge.vue
+++ b/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"
>
diff --git a/src/components/__tests__/CardChallengeTest.spec.ts b/src/components/__tests__/CardChallengeTest.spec.ts
new file mode 100644
index 0000000..a0e9bc1
--- /dev/null
+++ b/src/components/__tests__/CardChallengeTest.spec.ts
@@ -0,0 +1,65 @@
+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)
+ })
+})
diff --git a/src/views/ChallengeView.vue b/src/views/ChallengeView.vue
deleted file mode 100644
index 6e555f1..0000000
--- a/src/views/ChallengeView.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
- <h1>Spareutfordringer</h1>
-</template>
-
-<style scoped></style>
diff --git a/src/views/UserChallengesView.vue b/src/views/UserChallengesView.vue
index 874702e..52913c7 100644
--- a/src/views/UserChallengesView.vue
+++ b/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
--
GitLab