Merge branch 'master' into 709-6-Toggle-In-TopMenu

frontend/package.json

@@ -94,6 +94,7 @@
     "vite-svg-loader": "^5.1.0",
     "vue": "3.4.27",
     "vue-i18n": "^9.13.1",
+    "vue3-toastify": "^0.2.1",
     "vuetify": "^3.5.17"
   },
   "devDependencies": {

frontend/renderer/app.ts

@@ -2,16 +2,22 @@ import { DefaultApolloClient } from '@vue/apollo-composable'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { PageContext } from 'vike/types'
 import { createSSRApp, defineComponent, h, markRaw, reactive, Component, provide } from 'vue'
+import Vue3Toasity from 'vue3-toastify'
+// eslint-disable-next-line import/no-unassigned-import
+import 'vue3-toastify/dist/index.css'
 
 import PageShell from '#components/PageShell.vue'
 import { setPageContext } from '#context/usePageContext'
 import { createApolloClient } from '#plugins/apollo'
+import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import i18n from '#plugins/i18n'
 import pinia from '#plugins/pinia'
 import CreateVuetify from '#plugins/vuetify'
 import AuthService from '#src/services/AuthService'
 import { useAuthStore } from '#stores/authStore'
 
+import type { ToastContainerOptions } from 'vue3-toastify'
+
 const vuetify = CreateVuetify(i18n)
 
 function createApp(pageContext: PageContext, isClient = true) {
@@ -52,6 +58,14 @@ function createApp(pageContext: PageContext, isClient = true) {
   app.use(pinia)
   app.use(i18n)
   app.use(vuetify)
+  app.use(Vue3Toasity, {
+    autoClose: 3000,
+    style: {
+      opacity: '1',
+      userSelect: 'initial',
+    },
+  } as ToastContainerOptions)
+  app.use(GlobalErrorHandler)
 
   const auth = useAuthStore()
 

frontend/renderer/plugins/globalErrorHandler.spec.ts

@@ -0,0 +1,35 @@
+import { vi, describe, it, expect } from 'vitest'
+import { toast } from 'vue3-toastify'
+
+import globalErrorHandler from './globalErrorHandler'
+
+// vi.mock('vue3-toastify', async (importOriginal) => {
+//   const mod = await importOriginal<typeof import('vue3-toastify')>()
+//   return {
+//     ...mod,
+//     error: vi.fn(),
+//     warning: vi.fn(),
+//   }
+// })
+
+describe('GlobalErrorHandler', () => {
+  describe('Error', () => {
+    const errorSpy = vi.spyOn(toast, 'error')
+
+    it('toasts error message', () => {
+      globalErrorHandler.error('someError')
+
+      expect(errorSpy).toBeCalledWith('someError')
+    })
+  })
+
+  describe('Warning', () => {
+    const warningSpy = vi.spyOn(toast, 'warning')
+
+    it('toasts warning message', () => {
+      globalErrorHandler.warning('someWarning')
+
+      expect(warningSpy).toBeCalledWith('someWarning')
+    })
+  })
+})

frontend/renderer/plugins/globalErrorHandler.ts

@@ -0,0 +1,20 @@
+import { App } from 'vue'
+import { toast } from 'vue3-toastify'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const handleError = (message: string, data?: unknown) => {
+  toast.error(message)
+}
+const handleWarning = (message: string) => {
+  toast.warning(message)
+}
+
+export default {
+  install: (app: App) => {
+    app.config.errorHandler = (error, vm, info) => {
+      handleError(`Unhandled error occurred: ${info}`, error)
+    }
+  },
+  error: handleError,
+  warning: handleWarning,
+}

frontend/scripts/tests/plugin.globalErrorHandler.ts

@@ -0,0 +1,9 @@
+import { config } from '@vue/test-utils'
+import { vi } from 'vitest'
+
+import globalErrorHandler from '#plugins/globalErrorHandler'
+
+export const errorHandlerSpy = vi.spyOn(globalErrorHandler, 'error')
+export const warningHandlerSpy = vi.spyOn(globalErrorHandler, 'warning')
+
+config.global.plugins.push(globalErrorHandler)

frontend/src/components/embedded-room/useMyRoom.test.ts → frontend/src/components/embedded-room/useMyRoom.spec.ts

@@ -4,6 +4,7 @@ import { defineComponent } from 'vue'
 
 import { joinMyRoomQuery } from '#queries/joinMyRoomQuery'
 import { mockClient } from '#tests/mock.apolloClient'
+import { errorHandlerSpy } from '#tests/plugin.globalErrorHandler'
 
 import useMyRoom from './useMyRoom'
 
@@ -44,19 +45,16 @@ describe('useMyRoom', () => {
   })
 
   describe('with apollo error', () => {
-    const errorMessage = 'Aua!'
-
     beforeEach(() => {
       wrapper.unmount()
       vi.clearAllMocks()
-      joinMyRoomQueryMock.mockRejectedValue({ message: errorMessage, data: undefined })
+      joinMyRoomQueryMock.mockRejectedValue({ message: 'Aua!', data: undefined })
       wrapper = Wrapper()
     })
 
     it('logs error message', async () => {
-      const consoleSpy = vi.spyOn(global.console, 'log')
       await flushPromises()
-      expect(consoleSpy).toBeCalledWith(errorMessage)
+      expect(errorHandlerSpy).toBeCalledWith('Aua!')
     })
   })
 })

frontend/src/components/embedded-room/useMyRoom.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@vue/apollo-composable'
 import { watch, ref } from 'vue'
 
+import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import { JoinMyRoomQueryResult, joinMyRoomQuery } from '#queries/joinMyRoomQuery'
 
 export default function useMyRoom() {
@@ -20,8 +21,7 @@ export default function useMyRoom() {
 
   watch(joinMyRoomQueryError, () => {
     if (joinMyRoomQueryError.value) {
-      // eslint-disable-next-line no-console
-      console.log(joinMyRoomQueryError.value.message)
+      GlobalErrorHandler.error(joinMyRoomQueryError.value.message)
     }
   })
 

frontend/src/components/menu/BottomMenu.test.ts

@@ -5,6 +5,7 @@ import { VApp } from 'vuetify/components'
 
 import { useAuthStore } from '#stores/authStore.js'
 import { authService } from '#tests/mock.authService.js'
+import { errorHandlerSpy } from '#tests/plugin.globalErrorHandler'
 
 import BottomMenu from './BottomMenu.vue'
 import UserDropdown from './UserDropdown.vue'
@@ -72,8 +73,6 @@ describe('BottomMenu', () => {
     })
 
     describe('with error', () => {
-      const consoleSpy = vi.spyOn(console, 'log')
-
       beforeEach(async () => {
         authServiceSpy.mockRejectedValue('Error!')
         await wrapper.find('button.user-info').trigger('click')
@@ -82,7 +81,7 @@ describe('BottomMenu', () => {
       })
 
       it('logs the error', () => {
-        expect(consoleSpy).toBeCalledWith('auth error', 'Error!')
+        expect(errorHandlerSpy).toBeCalledWith('auth error', 'Error!')
       })
     })
   })

frontend/src/components/menu/TopMenu.test.ts

@@ -6,6 +6,7 @@ import { VApp } from 'vuetify/components'
 import { AUTH } from '#src/env'
 import { useAuthStore } from '#stores/authStore'
 import { authService } from '#tests/mock.authService'
+import { errorHandlerSpy } from '#tests/plugin.globalErrorHandler'
 
 import TopMenu from './TopMenu.vue'
 import UserDropdown from './UserDropdown.vue'
@@ -74,8 +75,6 @@ describe('TopMenu', () => {
     })
 
     describe('with error', () => {
-      const consoleSpy = vi.spyOn(console, 'log')
-
       beforeEach(async () => {
         authServiceSpy.mockRejectedValue('Error!')
         await wrapper.find('button.user-info').trigger('click')
@@ -84,7 +83,7 @@ describe('TopMenu', () => {
       })
 
       it('logs the error', () => {
-        expect(consoleSpy).toBeCalledWith('auth error', 'Error!')
+        expect(errorHandlerSpy).toBeCalledWith('auth error', 'Error!')
       })
     })
   })

frontend/src/components/menu/UserDropdown.vue

@@ -18,6 +18,7 @@
 import { inject } from 'vue'
 
 import MainButton from '#components/buttons/MainButton.vue'
+import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import { AUTH } from '#src/env'
 import AuthService from '#src/services/AuthService'
 import { useAuthStore } from '#stores/authStore'
@@ -30,8 +31,7 @@ async function signOut() {
   try {
     await authService?.signOut()
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.log('auth error', error)
+    GlobalErrorHandler.error('auth error', error)
   }
 }
 

frontend/src/pages/auth/+Page.vue

@@ -9,6 +9,7 @@ import { navigate } from 'vike/client/router'
 import { inject, onBeforeMount } from 'vue'
 
 import DefaultLayout from '#layouts/DefaultLayout.vue'
+import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import AuthService from '#src/services/AuthService'
 
 const authService = inject<AuthService>('authService')
@@ -21,8 +22,7 @@ onBeforeMount(async () => {
     }
     navigate('/')
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.log('auth error', error)
+    GlobalErrorHandler.error('auth error', error)
   }
 })
 </script>

frontend/src/pages/auth/Page.test.ts

@@ -6,6 +6,7 @@ import { VApp } from 'vuetify/components'
 
 import i18n from '#plugins/i18n'
 import { authService } from '#tests/mock.authService'
+import { errorHandlerSpy } from '#tests/plugin.globalErrorHandler'
 
 import AuthPage from './+Page.vue'
 import { title } from './+title'
@@ -82,16 +83,14 @@ describe('AuthPage', () => {
   })
 
   describe('signin callback with error', () => {
-    const consoleSpy = vi.spyOn(global.console, 'log')
-
     beforeEach(() => {
       vi.clearAllMocks()
       authServiceSpy.mockRejectedValue('Ouch!')
       wrapper = Wrapper()
     })
 
     it('logs the error on console', () => {
-      expect(consoleSpy).toBeCalledWith('auth error', 'Ouch!')
+      expect(errorHandlerSpy).toBeCalledWith('auth error', 'Ouch!')
     })
   })
 })

frontend/src/pages/room/Page.test.ts

@@ -5,6 +5,7 @@ import { VApp } from 'vuetify/components'
 
 import { joinMyRoomQuery } from '#queries/joinMyRoomQuery'
 import { mockClient } from '#tests/mock.apolloClient'
+import { errorHandlerSpy } from '#tests/plugin.globalErrorHandler'
 
 import RoomPage from './+Page.vue'
 import { title } from './+title'
@@ -52,18 +53,15 @@ describe('Room Page', () => {
   })
 
   describe('with apollo error', () => {
-    const errorMessage = 'Aua!'
-
     beforeEach(() => {
       vi.clearAllMocks()
-      joinMyRoomQueryMock.mockRejectedValue({ message: errorMessage, data: undefined })
+      joinMyRoomQueryMock.mockRejectedValue({ message: 'Aua!', data: undefined })
       wrapper = Wrapper()
     })
 
     it('logs error message', async () => {
-      const consoleSpy = vi.spyOn(global.console, 'log')
       await flushPromises()
-      expect(consoleSpy).toBeCalledWith(errorMessage)
+      expect(errorHandlerSpy).toBeCalledWith('Aua!')
     })
   })
 })

frontend/src/pages/signin/+Page.vue

@@ -6,6 +6,7 @@
 import { navigate } from 'vike/client/router'
 import { inject, onBeforeMount } from 'vue'
 
+import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import AuthService from '#src/services/AuthService'
 import { useAuthStore } from '#stores/authStore'
 
@@ -26,8 +27,7 @@ onBeforeMount(async () => {
     await authService?.signIn()
     navigate('/')
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.log('auth error', error)
+    GlobalErrorHandler.error('auth error', error)
   }
 })
 </script>

frontend/src/pages/signin/Page.test.ts

@@ -7,6 +7,7 @@ import { VApp } from 'vuetify/components'
 import i18n from '#plugins/i18n'
 import { useAuthStore } from '#stores/authStore'
 import { authService } from '#tests/mock.authService'
+import { errorHandlerSpy } from '#tests/plugin.globalErrorHandler'
 
 import SigninPage from './+Page.vue'
 import { title } from './+title'
@@ -46,16 +47,14 @@ describe('SigninPage', () => {
     })
 
     describe('signin with error', () => {
-      const consoleSpy = vi.spyOn(global.console, 'log')
-
       beforeEach(() => {
         vi.clearAllMocks()
         authServiceSpy.mockRejectedValue('Ouch!')
         Wrapper()
       })
 
       it('logs the error on console', () => {
-        expect(consoleSpy).toBeCalledWith('auth error', 'Ouch!')
+        expect(errorHandlerSpy).toBeCalledWith('auth error', 'Ouch!')
       })
     })
   })