fix frontend tests

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 () => {

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(() => {

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')

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}`)
   }),
 }))
 

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()
   }
 })

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()

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'),