Updated TotalSavings test to not require backend running

src/components/HomeComponents/TotalSavings.vue

 <script setup lang="ts">
 
-import {getUserTotalSavings} from '@/utils/HomePageUtils'
-import { ref } from 'vue'
+import { defineProps } from 'vue'
 
-const saved = ref(0)
+const props = defineProps({
+  totalSaved: Number
+});
 
-async function userSavings(){
-  saved.value = await getUserTotalSavings()
-}
-
-userSavings()
 
 </script>
 
@@ -18,7 +14,7 @@ userSavings()
     <img src="../../assets/png/pig_394778.png" alt = "logo" id = "logo"/>
     <div id = SavingsText>
       <h3 id = SavedInfo>Du har spart totalt: </h3>
-      <h3 id = Saved>{{ saved }} nok</h3>
+      <h3 id = Saved>{{ props.totalSaved }} nok</h3>
     </div>
   </div>
 </template>

src/components/__tests__/TotalSavings.spec.ts

-// Import the necessary packages
 import { mount } from '@vue/test-utils'
 import TotalSavings from '@/components/HomeComponents/TotalSavings.vue'
 import { describe, it, expect } from 'vitest'
-import { createPinia } from 'pinia'
-
-describe('YourComponent', () => {
-  it('renders correctly with default value', async () => {
-
-    const pinia = createPinia()
 
+describe('TotalSavings', () => {
+  it('renders total saved amount correctly', () => {
+    const totalSaved = 1000
     const wrapper = mount(TotalSavings, {
-      global:{
-        plugins:[pinia]
+      props: {
+        totalSaved
       }
     })
 
-    // Assert that the component renders correctly
-    expect(wrapper.exists()).toBe(true)
+    const savedAmount = wrapper.find('#Saved')
 
-    // Assert that the rendered value matches the given value
-    expect(wrapper.find('#Saved').text()).toBe(`0 nok`)
+    expect(savedAmount.text()).toBe(`${totalSaved} nok`)
   })
+
 })

src/views/HomePage/HomeView.vue

@@ -6,6 +6,7 @@ import { getActiveChallenges } from '@/utils/challengeutils'
 import ActiveMilestonesList from '@/components/milestone/ActiveMilestonesList.vue'
 import TotalSavings from '@/components/HomeComponents/TotalSavings.vue'
 import { ref } from 'vue'
+import { getUserTotalSavings } from '@/utils/HomePageUtils'
 
 console.log(getAllMilestones(useTokenStore().getJwtToken));
 console.log(getActiveChallenges(useTokenStore().getJwtToken, 0, 5))
@@ -31,12 +32,21 @@ function showChallengesView(){
 }
 
 checkScreenWidth()
+
+
+const saved = ref(0)
+
+async function userSavings(){
+  saved.value = await getUserTotalSavings()
+}
+
+userSavings()
 </script>
 
 <template>
   <div id = TopInfo>
     <h2 id ="Welcome">Velkommen!</h2>
-    <TotalSavings id = TotalSavings />
+    <TotalSavings id = TotalSavings :total-saved="saved"/>
   </div>
   <div id = MobileButtons>
     <button class = mobileButton @click="showMilestonesView()">Sparemål</button>