fix tests

frontend/src/components/GddTransactionList.spec.js

@@ -95,6 +95,9 @@ describe('GddTransactionList', () => {
     })
 
     describe('timestamp property', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({ timestamp: new Date().getTime() })
+      })
       it('emits update-transactions when timestamp changes', async () => {
         await wrapper.setProps({ timestamp: 0 })
         expect(wrapper.emitted('update-transactions')).toBeTruthy()

frontend/src/layouts/DashboardLayout.spec.js

@@ -5,6 +5,7 @@ import DashboardLayout from './DashboardLayout'
 import { createStore } from 'vuex'
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from '@/routes/routes'
+import { useQuery } from '@vue/apollo-composable'
 
 const toastErrorSpy = vi.fn()
 
@@ -14,18 +15,32 @@ vi.mock('@/composables/useToast', () => ({
   }),
 }))
 
-const mockQueryFn = vi.fn()
 const mockRefetchFn = vi.fn()
 const mockMutateFn = vi.fn()
+let onErrorHandler
 const mockQueryResult = ref(null)
+const data = ref({})
+const loading = ref(false)
 
 vi.mock('@vue/apollo-composable', () => ({
-  useLazyQuery: vi.fn(() => ({
-    load: mockQueryFn,
+  useQuery: vi.fn(() => ({
+    data,
     refetch: mockRefetchFn,
     result: mockQueryResult,
     onResult: vi.fn(),
-    onError: vi.fn(),
+    onError: (handler) => {
+      onErrorHandler = handler
+    },
+    loading,
+  })),
+  useLazyQuery: vi.fn(() => ({
+    refetch: mockRefetchFn,
+    result: mockQueryResult,
+    onResult: vi.fn(),
+    onError: (handler) => {
+      onErrorHandler = handler
+    },
+    loading,
   })),
   useMutation: vi.fn(() => ({
     mutate: mockMutateFn,
@@ -103,7 +118,7 @@ describe('DashboardLayout', () => {
 
   beforeEach(() => {
     vi.useFakeTimers()
-    mockQueryFn.mockResolvedValue({
+    data.value = {
       communityStatistics: {
         totalUsers: 3113,
         activeUsers: 1057,
@@ -113,7 +128,7 @@ describe('DashboardLayout', () => {
         totalGradidoAvailable: '2513565.869444365732411569',
         totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
       },
-    })
+    }
     wrapper = createWrapper()
   })
 
@@ -127,6 +142,9 @@ describe('DashboardLayout', () => {
   })
 
   describe('at first', () => {
+    beforeEach(() => {
+      data.value = null
+    })
     it('renders a component Skeleton', () => {
       expect(wrapper.findComponent({ name: 'SkeletonOverview' }).exists()).toBe(true)
     })
@@ -135,12 +153,13 @@ describe('DashboardLayout', () => {
   describe('after a timeout', () => {
     beforeEach(async () => {
       vi.advanceTimersByTime(1500)
+      loading.value = false
       await nextTick()
     })
 
     describe('update transactions', () => {
       beforeEach(async () => {
-        mockQueryResult.value = {
+        data.value = {
           transactionList: {
             balance: {
               balanceGDT: '100',
@@ -152,14 +171,12 @@ describe('DashboardLayout', () => {
           },
         }
 
-        mockQueryFn.mockResolvedValue(mockQueryResult.value)
-
         await wrapper.vm.updateTransactions({ currentPage: 2, pageSize: 5 })
         await nextTick() // Ensure all promises are resolved
       })
 
       it('load call to the API', () => {
-        expect(mockQueryFn).toHaveBeenCalled()
+        expect(useQuery).toHaveBeenCalled()
       })
 
       it('updates balance', () => {
@@ -190,10 +207,10 @@ describe('DashboardLayout', () => {
 
     describe('update transactions returns error', () => {
       beforeEach(async () => {
-        mockQueryFn.mockRejectedValue(new Error('Ouch!'))
         await wrapper
           .findComponent({ ref: 'router-view' })
           .vm.$emit('update-transactions', { currentPage: 2, pageSize: 5 })
+        loading.value = true
         await nextTick()
       })
 
@@ -202,6 +219,7 @@ describe('DashboardLayout', () => {
       })
 
       it('toasts the error message', () => {
+        onErrorHandler({ message: 'Ouch!' })
         expect(toastErrorSpy).toHaveBeenCalledWith('Ouch!')
       })
     })

frontend/src/layouts/DashboardLayout.vue

@@ -187,7 +187,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { useQuery, useMutation } from '@vue/apollo-composable'
@@ -231,7 +231,7 @@ const pending = computed(() => {
 })
 
 const totalUsers = computed(() => {
-  return transactionQueryData?.value?.communityStatistics?.totalUsers || 0
+  return transactionQueryData?.value?.communityStatistics?.totalUsers || null
 })
 const transactions = computed(() => {
   return transactionQueryData?.value?.transactionList?.transactions || []