From 9afbf560a08190df3f777f9f625e2d96d52ee662 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Mon, 11 Nov 2024 17:43:03 +0100
Subject: [PATCH] fix frontend tests

---
 .../components/SessionLogoutTimeout.spec.js   | 30 +++++++++++--------
 .../src/components/SessionLogoutTimeout.vue   |  8 ++---
 .../UserSettings/UserNamingFormat.spec.js     |  2 +-
 .../UserSettings/UserNewsletter.spec.js       |  1 +
 .../UserSettings/UserNewsletter.vue           |  2 +-
 frontend/src/pages/Circles.spec.js            |  2 +-
 frontend/vitest.config.js                     |  6 ++--
 7 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/SessionLogoutTimeout.spec.js b/frontend/src/components/SessionLogoutTimeout.spec.js
index 07d47f9be..fae087ba0 100644
--- a/frontend/src/components/SessionLogoutTimeout.spec.js
+++ b/frontend/src/components/SessionLogoutTimeout.spec.js
@@ -4,7 +4,6 @@ import { nextTick, ref } from 'vue'
 import SessionLogoutTimeout from './SessionLogoutTimeout.vue'
 import { useLazyQuery } from '@vue/apollo-composable'
 import { useStore } from 'vuex'
-import { useModal } from 'bootstrap-vue-next'
 
 // Mock external dependencies
 vi.mock('vuex', () => ({
@@ -21,16 +20,21 @@ vi.mock('@vue/apollo-composable', () => ({
 
 // Mock bootstrap-vue-next
 const mockHide = vi.fn()
+
 vi.mock('bootstrap-vue-next', () => ({
   useModal: vi.fn(() => ({
     hide: mockHide,
   })),
-  BModal: { template: '<div><slot></slot><slot name="modal-footer"></slot></div>' },
-  BCard: { template: '<div><slot></slot></div>' },
-  BCardText: { template: '<div><slot></slot></div>' },
-  BRow: { template: '<div><slot></slot></div>' },
-  BCol: { template: '<div><slot></slot></div>' },
-  BButton: { template: '<button><slot></slot></button>' },
+  BModal: {
+    name: 'BModal',
+    props: ['modelValue'],
+    template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
+  },
+  BCard: { name: 'BCard', template: '<div><slot></slot></div>' },
+  BCardText: { name: 'BCardText', template: '<div><slot></slot></div>' },
+  BRow: { name: 'BRow', template: '<div><slot></slot></div>' },
+  BCol: { name: 'BCol', template: '<div><slot></slot></div>' },
+  BButton: { name: 'BButton', template: '<button><slot></slot></button>' },
 }))
 
 const setTokenTime = (seconds) => {
@@ -84,10 +88,9 @@ describe('SessionLogoutTimeout', () => {
     })
 
     it('does not show modal when remaining time is more than 75 seconds', async () => {
-      wrapper = createWrapper(setTokenTime(76))
-      await nextTick()
-
-      vi.runOnlyPendingTimers()
+      // 76 don't work, because value will be rounded down with floor, so with running the code time were passing,
+      // and 76 will be rounded down to 75
+      wrapper = createWrapper(setTokenTime(77))
       await nextTick()
 
       const modal = wrapper.findComponent({ name: 'BModal' })
@@ -95,7 +98,7 @@ describe('SessionLogoutTimeout', () => {
     })
 
     it('emits logout when time expires', async () => {
-      wrapper = createWrapper(setTokenTime(1))
+      wrapper = createWrapper(setTokenTime(2))
       await nextTick()
 
       vi.runAllTimers()
@@ -162,7 +165,8 @@ describe('SessionLogoutTimeout', () => {
       await nextTick()
 
       const warningText = wrapper.find('.text-warning')
-      expect(warningText.text()).toContain('65')
+      // second will be rounded with floor
+      expect(warningText.text()).toContain('64')
     })
 
     it('shows 00 when time is expired', async () => {
diff --git a/frontend/src/components/SessionLogoutTimeout.vue b/frontend/src/components/SessionLogoutTimeout.vue
index 997a2f2d8..0822ccc0a 100644
--- a/frontend/src/components/SessionLogoutTimeout.vue
+++ b/frontend/src/components/SessionLogoutTimeout.vue
@@ -43,11 +43,11 @@
 </template>
 
 <script setup>
-import { ref, computed, onBeforeUnmount, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import { useLazyQuery } from '@vue/apollo-composable'
 import { verifyLogin } from '@/graphql/queries'
-import { useModal } from 'bootstrap-vue-next'
+import { BButton, BCard, BCardText, BCol, BModal, BRow, useModal } from 'bootstrap-vue-next'
 
 const store = useStore()
 const emit = defineEmits(['logout'])
@@ -82,9 +82,7 @@ const calculateRemainingTime = () => {
 
 const formatTime = (seconds) => {
   if (seconds <= 0) return '00'
-
-  const remainingSeconds = seconds % 60
-  return `${remainingSeconds.toString().padStart(2, '0')}`
+  return `${seconds.toString().padStart(2, '0')}`
 }
 
 onMounted(() => {
diff --git a/frontend/src/components/UserSettings/UserNamingFormat.spec.js b/frontend/src/components/UserSettings/UserNamingFormat.spec.js
index de163c72c..58a025e34 100644
--- a/frontend/src/components/UserSettings/UserNamingFormat.spec.js
+++ b/frontend/src/components/UserSettings/UserNamingFormat.spec.js
@@ -79,7 +79,7 @@ describe('UserNamingFormat', () => {
     await dropdownItems[3].trigger('click')
 
     expect(mockUpdateUserData).toHaveBeenCalledWith({
-      variables: { gmsPublishName: 'PUBLISH_NAME_FIRST_INITIAL' },
+      gmsPublishName: 'PUBLISH_NAME_FIRST_INITIAL',
     })
     expect(mockToastSuccess).toHaveBeenCalledWith('success message')
     expect(mockStore.commit).toHaveBeenCalledWith('gmsPublishName', 'PUBLISH_NAME_FIRST_INITIAL')
diff --git a/frontend/src/components/UserSettings/UserNewsletter.spec.js b/frontend/src/components/UserSettings/UserNewsletter.spec.js
index 4493f5796..e40ee6e8c 100644
--- a/frontend/src/components/UserSettings/UserNewsletter.spec.js
+++ b/frontend/src/components/UserSettings/UserNewsletter.spec.js
@@ -28,6 +28,7 @@ vi.mock('@vue/apollo-composable', () => ({
     } else if (mutation === unsubscribeNewsletter) {
       return { mutate: mockUnsubscribeMutate }
     }
+    throw new Error(`Unrecognized mutation: ${mutation}`)
   }),
 }))
 
diff --git a/frontend/src/components/UserSettings/UserNewsletter.vue b/frontend/src/components/UserSettings/UserNewsletter.vue
index 4eba06fc5..db5539171 100644
--- a/frontend/src/components/UserSettings/UserNewsletter.vue
+++ b/frontend/src/components/UserSettings/UserNewsletter.vue
@@ -29,7 +29,7 @@ const { mutate: newsletterSubscribe } = useMutation(subscribeNewsletter)
 const { mutate: newsletterUnsubscribe } = useMutation(unsubscribeNewsletter)
 
 watch(localNewsletterState, async (newValue, oldValue) => {
-  if (newValue && newValue !== oldValue) {
+  if (newValue !== undefined && newValue !== null && newValue !== oldValue) {
     await onSubmit()
   }
 })
diff --git a/frontend/src/pages/Circles.spec.js b/frontend/src/pages/Circles.spec.js
index 66eb3fcf1..8f22573f4 100644
--- a/frontend/src/pages/Circles.spec.js
+++ b/frontend/src/pages/Circles.spec.js
@@ -76,7 +76,7 @@ describe('Circles', () => {
       null,
       expect.objectContaining({
         fetchPolicy: 'network-only',
-        enabled: false,
+        enabled: true,
       }),
     )
     expect(mockRefetch).toHaveBeenCalled()
diff --git a/frontend/vitest.config.js b/frontend/vitest.config.js
index 26e95d0b6..8f61cd0a1 100644
--- a/frontend/vitest.config.js
+++ b/frontend/vitest.config.js
@@ -22,8 +22,10 @@ export default defineConfig({
     transformMode: {
       web: [/\.[jt]sx$/],
     },
-    deps: {
-      inline: [/vee-validate/, 'vitest-canvas-mock'],
+    server: {
+      deps: {
+        inline: [/vee-validate/, 'vitest-canvas-mock'],
+      },
     },
     alias: {
       '@': path.resolve(__dirname, './src'),