diff --git a/src/components/NewSavingPath.vue b/src/components/NewSavingPath.vue
deleted file mode 100644
index abab2cb8282ed239f643e2f1a1666e7402f9a5da..0000000000000000000000000000000000000000
--- a/src/components/NewSavingPath.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<script setup>
-
-import {computed, onMounted, ref, watch} from "vue";
-import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover/index.js";
-import Sparti from "@/components/Sparti.vue";
-import {useThemeStore} from "@/stores/theme.js";
-import {useSavingGoalsStore} from "@/stores/savingGoals.js";
-import {useUserStore} from "@/stores/user.js";
-
-/**
- * Define the props for the component
- */
-const props = defineProps({
- savingGoal: {
- type: Object,
- required: true
- }
-})
-
-/**
- * The store for the saving goals
- */
-const savingGoalStore = useSavingGoalsStore()
-
-/**
- * Money collected for the saving goal
- */
-const moneyCollected = computed(() => savingGoalStore.getTotalSavedByGoal(props.savingGoal.savingGoalId))
-
-/**
- * Loading state
- */
-const loading = ref(false);
-
-/**
- * Fetches the total saved for the saving goal when the component is mounted and sets the loading state to false
- */
-onMounted(async () => {
- await savingGoalStore.checkAndFetchTotalSaved(props.savingGoal.savingGoalId);
- loading.value = false;
-});
-
-
-/**
- * The store for the theme
- */
-const themeStore = useThemeStore()
-
-/**
- * The current theme
- */
-const theme = computed(() => themeStore.theme)
-
-
-/**
- * Check if the index is a diagonal
- */
-const isDiagonal = (index) => {
- const totalColumns = 9;
- const row = Math.floor((index - 1) / totalColumns);
- const col = (index - 1) % totalColumns;
-
- const diagonalCoins = [
- [3, 7],
- [0, 2, 4, 6],
- [1, 5]
- ];
- return diagonalCoins[row].includes(col);
-};
-
-/**
- * Keeps track of the clicked buttons
- */
-const clickedButtons = ref(Array(21).fill(false));
-
-
-/**
- * The goal for the saving path
- */
-const goal = computed(() => props.savingGoal.goal);
-
-/**
- * The steps for the saving path
- */
-const steps = [16, 10, 4, 12, 20, 14]
-
-/**
- * The increment for each step
- */
-const increment = goal.value / steps.length;
-
-
-/**
- * The coin thresholds
- */
-const coinThresholds = {
- 8: 0,
-};
-
-/**
- * The highest coin threshold
- */
-coinThresholds[14] = goal.value;
-
-/**
- * Generate the coin thresholds
- */
-steps.forEach((step, index) => {
- coinThresholds[step] = Math.round((index + 1) * increment);
-});
-
-/**
- * Holds the highest unlocked threshold
- */
-const highestUnlockedThreshold = computed( () => {
- return Math.max(
- ...Object.values(coinThresholds).filter(threshold => threshold <= moneyCollected.value)
- );
-});
-
-
-/**
- * Variable that indicated if the popover is opened
- */
-const openedPopover = ref(null);
-
-/**
- * Clicks the button
- */
-const clickButton = (index) => {
- clickedButtons.value[index - 1] = true;
- setTimeout(() => {
- clickedButtons.value[index - 1] = false;
- }, 200);
- openedPopover.value = index;
-};
-
-/**
- * Generates the message for the popover
- */
-const generateMessage = (i) => {
- const steps = [8, 16, 10, 4, 12, 20, 14]
- const messages = [
- `Velkommen til sparestien! Ditt første mål er å spare <strong>${Math.round(coinThresholds[steps[1]])} kr</strong>. Sett i gang ved å ta imot en utfording!`,
- `Neste steg venter. Spar <strong>${Math.round(coinThresholds[steps[1]]-moneyCollected.value)}</strong> kr til for å nå <strong>steg 2</strong>.`,
- `<strong>Steg 3</strong> er neste milepæl. Spar <strong>${Math.round(coinThresholds[steps[2]]-moneyCollected.value)} kr</strong> til for å nå det.`,
- `Du er på god vei! Spar <strong>${Math.round(coinThresholds[steps[3]]-moneyCollected.value)} kr</strong> til for å nå <strong>steg 4</strong>.`,
- `Godt jobbet! Spar <strong>${Math.round(coinThresholds[steps[4]]-moneyCollected.value)} kr</strong> til for å nå <strong>steg 5</strong>.`,
- `Nærmer seg slutten! Spar <strong>${Math.round(coinThresholds[steps[5]]-moneyCollected.value)} kr</strong> til for å nå <strong>steg 6</strong>.`,
- `Ditt siste mål: Spar <strong>${Math.round(coinThresholds[steps[6]]-moneyCollected.value)} kr</strong> til for å fullføre sparestien.`
- ];
-
- const congratulations = [
- "Godt jobbet!",
- "Utmerket!",
- "Flott arbeid!",
- "SÃ¥ flink du er!",
- "Stå på!"
- ];
- const step = steps.indexOf(i);
-
- if (step === 0) {
- return messages[0];
- } else if (coinThresholds[steps[step-1]] === highestUnlockedThreshold.value) {
- return messages[step];
- } else if(moneyCollected.value < coinThresholds[steps[step]] && step===6) {
- return `Spar <strong>${coinThresholds[steps[step]]} kr</strong> for å fullføre sparestien.`;
- } else if (moneyCollected.value < coinThresholds[steps[step]]) {
- return `Spar <strong>${coinThresholds[steps[step]]} kr</strong> for å nå steg ${step+1}.`
- } else if (moneyCollected.value >= coinThresholds[i]) {
- if (step < 6) {
- return `Gratulerer! Du har nådd <strong>steg ${step + 1}</strong> og spart <strong>${coinThresholds[i]} kr</strong>. ${congratulations[step-1]}`;
- } else {
- return `Fantastisk! Du har fullført sparestien og spart totalt <strong>${moneyCollected.value} kr</strong> !`;
- }
- }
-};
-
-</script>
-
-<template>
- <div v-if="loading" class="px-2.5 flex flex-col items-center mt-10 pt-7">
- <h1 class="pt-7 pb-8 text-2xl">Laster inn...</h1>
- <img src="../assets/Loading/Loading.gif" alt="Loading" class="w-1/4 h-auto md:w-1/6"/>
- </div>
- <div v-else class="align-middle grid grid-cols-7 grid-rows-3 w-full md:w-3/4 " >
- <div v-for = "i in 21" :key="i"
- :class="isDiagonal(i) ? 'bg-primary-dark' : 'invisible'"
- class="m-0 p-0 border-none appearance-none bg-transparent"
- @click="clickButton(i)"
- >
- <Popover>
- <PopoverTrigger asChild>
- <div class="relative">
- <img v-if="clickedButtons[i -1] && i === 8" src="../assets/savingPath/ClickedStart.png" alt="Start"/>
- <img v-else-if="i === 14" src="../assets/savingPath/Chest.gif" alt="Kiste" :class="{'grayscale': moneyCollected < coinThresholds[i], 'filter-none': moneyCollected >= coinThresholds[i]}"/>
- <img v-else-if="!clickedButtons[i -1] && i === 8" src="../assets/savingPath/Start.png" alt="Start" :class="{'animate-pulse': coinThresholds[i] === highestUnlockedThreshold}"/>
- <img v-else-if="clickedButtons[i -1] && moneyCollected < coinThresholds[i] && i !== 14" src="../assets/savingPath/ClickedCoin.png" class="grayscale" alt="Mynt"/>
- <img v-else-if="clickedButtons[i -1] && moneyCollected >= coinThresholds[i]" src="../assets/savingPath/ClickedCoin.png" alt="Mynt"/>
- <img v-else-if="moneyCollected >= coinThresholds[i] && !clickedButtons[i - 1]" src="../assets/savingPath/Coin.png" class="filter-none" alt="Mynt" :class="{'animate-pulse': coinThresholds[i] === highestUnlockedThreshold}"/>
- <img v-else-if="moneyCollected < coinThresholds[i] && !clickedButtons[i - 1]" src="../assets/savingPath/Coin.png" class="grayscale" alt="Mynt"/>
- <img src="../assets/Avatar/Boy2Avatar.png" v-if="coinThresholds[i] === highestUnlockedThreshold" class="absolute col-auto top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce w-3/4 md:1/2" alt="Pil"/>
- <div class="flex items-center justify-center">
- <p class="text-stroke"><strong>{{coinThresholds[i]}},-</strong></p>
- </div>
- </div>
- </PopoverTrigger>
- <PopoverContent class="p-0 rounded-2xl bg-white">
- <Sparti :theme="theme">
- <span class="overflow-ellipsis" v-html="generateMessage(i)"></span>
- </Sparti>
- </PopoverContent>
- </Popover>
- </div>
- </div>
-</template>
-<style scoped>
-
-@keyframes bounce {
- 0%, 100% {
- transform: translateX(-50%) translateY(-50%);
- }
- 50% {
- transform: translateX(-50%) translateY(calc(-50% - 20px));
- }
-}
-
-.animate-bounce {
- animation: bounce 2s ease-in-out infinite;
-}
-
-@media (max-width: 768px) {
- .text-stroke {
- @apply text-darkest font-gluten text-[3vw] font-black leading-none tracking-tight pt-2 p-6 pb-1;
- }
-}
-
-@media (min-width: 769px) {
- .text-stroke {
- @apply text-darkest font-gluten text-2xl font-black leading-none tracking-tight pt-2 p-6 pb-1;
- }
-}
-</style>
-
diff --git a/src/components/SavingPath.vue b/src/components/SavingPath.vue
index e21a454c906c5d91c875d6c167ba079a00901fcc..1336a84a16ec3a06207eae4c43a41f7e1c7a3a73 100644
--- a/src/components/SavingPath.vue
+++ b/src/components/SavingPath.vue
@@ -1,105 +1,250 @@
<script setup>
-import {Card, CardContent, CardHeader} from "@/components/ui/card/index.js";
-import {reactive, watchEffect} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover/index.js";
+import Sparti from "@/components/Sparti.vue";
+import {useThemeStore} from "@/stores/theme.js";
+import {useSavingGoalsStore} from "@/stores/savingGoals.js";
+import {useUserStore} from "@/stores/user.js";
/**
- * The state object with the goal and current values
+ * Define the props for the component
*/
-let state = reactive({
- goal: 100,
- current: 60,
+const props = defineProps({
+ savingGoal: {
+ type: Object,
+ required: true
+ }
+})
+
+/**
+ * The store for the saving goals
+ */
+const savingGoalStore = useSavingGoalsStore()
+
+
+const userStore = useUserStore()
+
+
+
+
+/**
+ * Money collected for the saving goal
+ */
+const moneyCollected = computed(() => savingGoalStore.getTotalSavedByGoal(props.savingGoal.savingGoalId))
+
+/**
+ * Loading state
+ */
+const loading = ref(false);
+
+/**
+ * Fetches the total saved for the saving goal when the component is mounted and sets the loading state to false
+ */
+onMounted(async () => {
+ await savingGoalStore.checkAndFetchTotalSaved(props.savingGoal.savingGoalId);
+ loading.value = false;
});
+
/**
- * The nodes object with the calculated values
+ * The store for the theme
*/
-let nodes = reactive({});
+const themeStore = useThemeStore()
/**
- * Watch the state object and assigns the nodes with the calculated values
+ * The current theme
*/
-watchEffect(() => {
- // Clear the nodes object
- for (let prop in nodes) {
- if (nodes.hasOwnProperty(prop)) {
- delete nodes[prop];
- }
- }
+const theme = computed(() => themeStore.theme)
+
+
+/**
+ * Check if the index is a diagonal
+ */
+const isDiagonal = (index) => {
+ const totalColumns = 9;
+ const row = Math.floor((index - 1) / totalColumns);
+ const col = (index - 1) % totalColumns;
+
+ const diagonalCoins = [
+ [3, 7],
+ [0, 2, 4, 6],
+ [1, 5]
+ ];
+ return diagonalCoins[row].includes(col);
+};
+
+/**
+ * Keeps track of the clicked buttons
+ */
+const clickedButtons = ref(Array(21).fill(false));
+
+
+/**
+ * The goal for the saving path
+ */
+const goal = computed(() => props.savingGoal.goal);
+
+/**
+ * The steps for the saving path
+ */
+const steps = [16, 10, 4, 12, 20, 14]
+
+/**
+ * The increment for each step
+ */
+const increment = goal.value / steps.length;
+
+
+/**
+ * The coin thresholds
+ */
+const coinThresholds = {
+ 8: 0,
+};
- Object.assign(nodes, {
- 1: calculatePoint(1),
- 2: '',
- 3: calculatePoint(2),
- 4: '',
- 5: calculatePoint(3),
- 6: '',
- 7: calculatePoint(4),
- 8: '',
- 9: calculatePoint(5),
- });
+/**
+ * The highest coin threshold
+ */
+coinThresholds[14] = goal.value;
+
+/**
+ * Generate the coin thresholds
+ */
+steps.forEach((step, index) => {
+ coinThresholds[step] = Math.round((index + 1) * increment);
});
/**
- * Calculate the point for the given number
- * @param n The number
- * @returns {number} The calculated point
+ * Holds the highest unlocked threshold
*/
-function calculatePoint(n) {
- return (state.goal/5) * n;
-}
+const highestUnlockedThreshold = computed( () => {
+ return Math.max(
+ ...Object.values(coinThresholds).filter(threshold => threshold <= moneyCollected.value)
+ );
+});
+
/**
- * Gets the colour for the given part of the list
- * @param n The number
- * @returns {string} The colour
+ * Variable that indicated if the popover is opened
*/
-function getColour(n) {
- let keys = Object.keys(nodes);
- let currentIndex = keys.indexOf(n.toString());
- let nextKey = keys[currentIndex + 1];
- let nextNode = nodes[nextKey];
+const openedPopover = ref(null);
- if (state.current >= state.goal) {
- return "bg-primary-dark";
- }
- if (n % 2 !== 0) {
- if (state.current >= nodes[n]) {
- return "bg-primary-dark";
- } else {
- return "bg-white";
- }
- } else {
- if (nextNode !== undefined && state.current >= nextNode) {
- return "bg-primary-dark";
+/**
+ * Clicks the button
+ */
+const clickButton = (index) => {
+ clickedButtons.value[index - 1] = true;
+ setTimeout(() => {
+ clickedButtons.value[index - 1] = false;
+ }, 200);
+ openedPopover.value = index;
+};
+
+/**
+ * Generates the message for the popover
+ */
+const generateMessage = (i) => {
+ const steps = [8, 16, 10, 4, 12, 20, 14]
+ const messages = [
+ `Velkommen til sparestien! Ditt første mål er å spare <strong>${Math.round(coinThresholds[steps[1]])} kr</strong>. Sett i gang ved å ta imot en utfording!`,
+ `Neste steg venter. Spar <strong>${Math.round(coinThresholds[steps[1]]-moneyCollected.value)}</strong> kr til for å nå <strong>steg 2</strong>.`,
+ `<strong>Steg 3</strong> er neste milepæl. Spar <strong>${Math.round(coinThresholds[steps[2]]-moneyCollected.value)} kr</strong> til for å nå det.`,
+ `Du er på god vei! Spar <strong>${Math.round(coinThresholds[steps[3]]-moneyCollected.value)} kr</strong> til for å nå <strong>steg 4</strong>.`,
+ `Godt jobbet! Spar <strong>${Math.round(coinThresholds[steps[4]]-moneyCollected.value)} kr</strong> til for å nå <strong>steg 5</strong>.`,
+ `Nærmer seg slutten! Spar <strong>${Math.round(coinThresholds[steps[5]]-moneyCollected.value)} kr</strong> til for å nå <strong>steg 6</strong>.`,
+ `Ditt siste mål: Spar <strong>${Math.round(coinThresholds[steps[6]]-moneyCollected.value)} kr</strong> til for å fullføre sparestien.`
+ ];
+
+ const congratulations = [
+ "Godt jobbet!",
+ "Utmerket!",
+ "Flott arbeid!",
+ "SÃ¥ flink du er!",
+ "Stå på!"
+ ];
+ const step = steps.indexOf(i);
+
+ if (step === 0) {
+ return messages[0];
+ } else if (coinThresholds[steps[step-1]] === highestUnlockedThreshold.value) {
+ return messages[step];
+ } else if(moneyCollected.value < coinThresholds[steps[step]] && step===6) {
+ return `Spar <strong>${coinThresholds[steps[step]]} kr</strong> for å fullføre sparestien.`;
+ } else if (moneyCollected.value < coinThresholds[steps[step]]) {
+ return `Spar <strong>${coinThresholds[steps[step]]} kr</strong> for å nå steg ${step+1}.`
+ } else if (moneyCollected.value >= coinThresholds[i]) {
+ if (step < 6) {
+ return `Gratulerer! Du har nådd <strong>steg ${step + 1}</strong> og spart <strong>${coinThresholds[i]} kr</strong>. ${congratulations[step-1]}`;
} else {
- return "bg-white"
+ return `Fantastisk! Du har fullført sparestien og spart totalt <strong>${moneyCollected.value} kr</strong> !`;
}
}
-}
-
+};
</script>
<template>
- <Card class= "h-25 w-65 ">
- <CardHeader>
- <div>
- <ul class="flex flex-col md:justify-between md:flex-row">
- <li v-for="(value, n) in nodes" :key="n" class="flex justify-center items-center"
- :class="[n % 2 === 0 ? 'transition-all ease-in h-12 w-0.5 ml-7 md:h-0.5 md:w-12 md:mt-7 md:ml-0' :
- 'h-14 w-14 rounded-full transition-all ease-in', getColour(n)]">
- {{ n % 2 !== 0 ? value + 'kr' : '' }}
- </li>
- </ul>
- </div>
- </CardHeader>
- <CardContent>
- </CardContent>
-
- </Card>
+ <div v-if="loading" class="px-2.5 flex flex-col items-center mt-10 pt-7">
+ <h1 class="pt-7 pb-8 text-2xl">Laster inn...</h1>
+ <img src="../assets/Loading/Loading.gif" alt="Loading" class="w-1/4 h-auto md:w-1/6"/>
+ </div>
+ <div v-else class="align-middle grid grid-cols-7 grid-rows-3 w-full md:w-3/4 " >
+ <div v-for = "i in 21" :key="i"
+ :class="isDiagonal(i) ? 'bg-primary-dark' : 'invisible'"
+ class="m-0 p-0 border-none appearance-none bg-transparent"
+ @click="clickButton(i)"
+ >
+ <Popover>
+ <PopoverTrigger asChild>
+ <div class="relative">
+ <img v-if="clickedButtons[i -1] && i === 8" src="../assets/savingPath/ClickedStart.png" alt="Start"/>
+ <img v-else-if="i === 14" src="../assets/savingPath/Chest.gif" alt="Kiste" :class="{'grayscale': moneyCollected < coinThresholds[i], 'filter-none': moneyCollected >= coinThresholds[i]}"/>
+ <img v-else-if="!clickedButtons[i -1] && i === 8" src="../assets/savingPath/Start.png" alt="Start" :class="{'animate-pulse': coinThresholds[i] === highestUnlockedThreshold}"/>
+ <img v-else-if="clickedButtons[i -1] && moneyCollected < coinThresholds[i] && i !== 14" src="../assets/savingPath/ClickedCoin.png" class="grayscale" alt="Mynt"/>
+ <img v-else-if="clickedButtons[i -1] && moneyCollected >= coinThresholds[i]" src="../assets/savingPath/ClickedCoin.png" alt="Mynt"/>
+ <img v-else-if="moneyCollected >= coinThresholds[i] && !clickedButtons[i - 1]" src="../assets/savingPath/Coin.png" class="filter-none" alt="Mynt" :class="{'animate-pulse': coinThresholds[i] === highestUnlockedThreshold}"/>
+ <img v-else-if="moneyCollected < coinThresholds[i] && !clickedButtons[i - 1]" src="../assets/savingPath/Coin.png" class="grayscale" alt="Mynt"/>
+ <img :src="userStore.user.profileAvatar" v-if="coinThresholds[i] === highestUnlockedThreshold" class="absolute col-auto top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce w-3/4 md:1/2" alt="Pil"/>
+ <div class="flex items-center justify-center">
+ <p class="text-stroke"><strong>{{coinThresholds[i]}},-</strong></p>
+ </div>
+ </div>
+ </PopoverTrigger>
+ <PopoverContent class="p-0 rounded-2xl bg-white">
+ <Sparti :theme="theme">
+ <span class="overflow-ellipsis" v-html="generateMessage(i)"></span>
+ </Sparti>
+ </PopoverContent>
+ </Popover>
+ </div>
+ </div>
</template>
-
<style scoped>
-</style>
\ No newline at end of file
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateX(-50%) translateY(-50%);
+ }
+ 50% {
+ transform: translateX(-50%) translateY(calc(-50% - 20px));
+ }
+}
+
+.animate-bounce {
+ animation: bounce 2s ease-in-out infinite;
+}
+
+@media (max-width: 768px) {
+ .text-stroke {
+ @apply text-darkest font-gluten text-[3vw] font-black leading-none tracking-tight pt-2 p-6 pb-1;
+ }
+}
+
+@media (min-width: 769px) {
+ .text-stroke {
+ @apply text-darkest font-gluten text-2xl font-black leading-none tracking-tight pt-2 p-6 pb-1;
+ }
+}
+</style>
+
diff --git a/src/components/__tests__/NewSavingPath.spec.js b/src/components/__tests__/NewSavingPath.spec.js
deleted file mode 100644
index cf2c6ac1e4de3f2831caf6a4f3f45e70c1ce1455..0000000000000000000000000000000000000000
--- a/src/components/__tests__/NewSavingPath.spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import NewSavingPath from "@/components/NewSavingPath.vue";
-import {createPinia, setActivePinia} from "pinia";
-import {describe, beforeEach, it, expect} from "vitest";
-import { mount } from '@vue/test-utils'
-import {ref} from "vue";
-
-
-describe('Saving Path: Component testing', () => {
- let wrapper;
-
- const savingGoalMock = {
- savingGoalId: 1,
- title: "Test goal",
- goal: 1000,
- deadline: "2024-04-22T00:00:00.000+00:00",
- status: "ACTIVE",
- };
-
- beforeEach(() => {
- setActivePinia(createPinia());
- wrapper = mount(NewSavingPath, {
- global: {
- stubs: ['Popover', 'PopoverTrigger', 'PopoverContent']
- },
- props: {
- savingGoal: savingGoalMock
- }
- });
- wrapper.vm.coinThresholds = {
- 14: 1000
- };
-
- })
-
- it('renders the component', () => {
- expect(wrapper.exists()).toBe(true)
- })
-
-
- it('should correctly identify diagonal indices', () => {
- expect(wrapper.vm.isDiagonal(8)).toBe(true);
- expect(wrapper.vm.isDiagonal(16)).toBe(true);
- expect(wrapper.vm.isDiagonal(7)).toBe(false);
- expect(wrapper.vm.isDiagonal(21)).toBe(false);
- });
-
- it('should update clickedButtons and openedPopover when a button is clicked', async () => {
- wrapper.vm.clickButton(5);
- await wrapper.vm.$nextTick();
-
- expect(wrapper.vm.clickedButtons[4]).toBe(true);
- expect(wrapper.vm.openedPopover).toBe(5);
- });
-
-});
\ No newline at end of file
diff --git a/src/components/__tests__/SavingPath.spec.js b/src/components/__tests__/SavingPath.spec.js
index cd602c8e67c9fa5bb8e22caea8e252d15bea9eec..cddaeaf7b438c31bf5a33062b08acd75c6f670cc 100644
--- a/src/components/__tests__/SavingPath.spec.js
+++ b/src/components/__tests__/SavingPath.spec.js
@@ -1,25 +1,55 @@
+import NewSavingPath from "@/components/SavingPath.vue";
+import {createPinia, setActivePinia} from "pinia";
+import {describe, beforeEach, it, expect} from "vitest";
import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach } from 'vitest'
-import SavingPath from '@/components/SavingPath.vue'
-import {Card} from "@/components/ui/card/index.js";
+import {ref} from "vue";
+
describe('Saving Path: Component testing', () => {
let wrapper;
+
+ const savingGoalMock = {
+ savingGoalId: 1,
+ title: "Test goal",
+ goal: 1000,
+ deadline: "2024-04-22T00:00:00.000+00:00",
+ status: "ACTIVE",
+ };
+
beforeEach(() => {
- wrapper = mount(SavingPath)
+ setActivePinia(createPinia());
+ wrapper = mount(NewSavingPath, {
+ global: {
+ stubs: ['Popover', 'PopoverTrigger', 'PopoverContent']
+ },
+ props: {
+ savingGoal: savingGoalMock
+ }
+ });
+ wrapper.vm.coinThresholds = {
+ 14: 1000
+ };
+
})
it('renders the component', () => {
expect(wrapper.exists()).toBe(true)
})
- it('renders card component', () => {
- const card = wrapper.findComponent(Card)
- expect(card.exists()).toBe(true)
- })
- it('renders nine list items', () => {
- const listItems = wrapper.findAll('li')
- expect(listItems.length).toBe(9)
- })
-})
\ No newline at end of file
+ it('should correctly identify diagonal indices', () => {
+ expect(wrapper.vm.isDiagonal(8)).toBe(true);
+ expect(wrapper.vm.isDiagonal(16)).toBe(true);
+ expect(wrapper.vm.isDiagonal(7)).toBe(false);
+ expect(wrapper.vm.isDiagonal(21)).toBe(false);
+ });
+
+ it('should update clickedButtons and openedPopover when a button is clicked', async () => {
+ wrapper.vm.clickButton(5);
+ await wrapper.vm.$nextTick();
+
+ expect(wrapper.vm.clickedButtons[4]).toBe(true);
+ expect(wrapper.vm.openedPopover).toBe(5);
+ });
+
+});
\ No newline at end of file
diff --git a/src/views/SavingPathView.vue b/src/views/SavingPathView.vue
index a31e9fc8abd5aea0be5d2183afb3e002a6a1eacc..2c4cf694628bb5934e23f5385129bbf362335b54 100644
--- a/src/views/SavingPathView.vue
+++ b/src/views/SavingPathView.vue
@@ -20,7 +20,7 @@ import {
import { useSavingGoalsStore } from "@/stores/savingGoals.js";
import { useSavingChallengeStore } from "@/stores/savingChallenge.js";
import MainLayout from "@/components/MainLayout.vue";
-import NewSavingPath from "@/components/NewSavingPath.vue";
+import SavingPath from "@/components/SavingPath.vue";
import {
Carousel,
CarouselContent,
@@ -250,7 +250,7 @@ const formattedDeadline = (deadline) => {
<p class="text-lg w-full"><strong>Innen: </strong>{{ formattedDeadline(goal.deadline) }}</p>
<p class="text-lg w-full"><strong>MÃ¥l: </strong>{{goal.goal}},-</p>
<p class="text-lg md:mb-0 mb-10 w-full"><strong>Status: {{getStatus(goal.status)}}</strong></p>
- <NewSavingPath :saving-goal="goal" class="justify-center"></NewSavingPath>
+ <SavingPath :saving-goal="goal" class="justify-center"></SavingPath>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />