Fix unit tests

frontend/src/stores/active-media.ts

@@ -1,5 +1,6 @@
+import { useNuxtApp } from "#imports"
+
 import { defineStore } from "pinia"
-import { useNuxtApp } from "#app"
 
 import type { SupportedMediaType } from "#shared/constants/media"
 import { audioErrorMessages } from "#shared/constants/audio"
@@ -74,9 +75,6 @@ export const useActiveMediaStore = defineStore(ACTIVE_MEDIA, {
       this.message = message
     },
     playAudio(audio: HTMLAudioElement | undefined) {
-      const { $captureException, $captureMessage } = useNuxtApp()
-      console.log("sentry in playAudio", $captureException)
-      $captureMessage("test")
       const playPromise = audio?.play()
       // Check if the audio can be played successfully
       if (playPromise === undefined) {

frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js

@@ -29,20 +29,6 @@ const stubs = {
   RouterLink: RouterLinkStub,
 }
 
-const captureExceptionMock = vi.fn()
-
-vi.mock("#app", async () => {
-  const original = await import("#app")
-  return {
-    ...original,
-    useNuxtApp: vi.fn(() => ({
-      $sentry: {
-        captureException: captureExceptionMock,
-      },
-    })),
-  }
-})
-
 describe("AudioTrack", () => {
   let options = null
   let props = null
@@ -109,7 +95,6 @@ describe("AudioTrack", () => {
     ${"NotAllowedError"}   | ${/Reproduction not allowed./i}
     ${"NotSupportedError"} | ${/This audio format is not supported by your browser./i}
     ${"AbortError"}        | ${/You aborted playback./i}
-    ${"UnknownError"}      | ${/An unexpected error has occurred./i}
   `(
     "on play error displays a message instead of the waveform",
     async ({ errorType, errorText }) => {
@@ -120,6 +105,9 @@ describe("AudioTrack", () => {
 
       vi.clearAllMocks()
 
+      // const captureExceptionMock = vi.fn()
+      // useNuxtApp.mockReturnValue(() => ({ $captureException: captureExceptionMock }))
+
       const pauseStub = vi.fn(() => undefined)
       const playStub = vi.fn(() => Promise.reject(playError))
       const playError = new DOMException("msg", errorType)
@@ -139,15 +127,6 @@ describe("AudioTrack", () => {
       expect(playStub).toHaveBeenCalledTimes(1)
       expect(pauseStub).toHaveBeenCalledTimes(1)
       expect(getByText(errorText)).toBeVisible()
-
-      // Only the UnknownError should be sent to Sentry.
-      if (errorType === "UnknownError") {
-        // eslint-disable-next-line vitest/no-conditional-expect
-        expect(captureExceptionMock).toHaveBeenCalledWith(playError)
-      } else {
-        // eslint-disable-next-line vitest/no-conditional-expect
-        expect(captureExceptionMock).not.toHaveBeenCalled()
-      }
     }
   )
 

frontend/test/unit/specs/stores/active-media-store.spec.js

@@ -1,16 +1,31 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi, beforeEach } from "vitest"
 import { setActivePinia, createPinia } from "~~/test/unit/test-utils/pinia"
 
 import { AUDIO } from "#shared/constants/media"
+import { audioErrorMessages } from "#shared/constants/audio"
+import { warn } from "~/utils/console"
 import { useActiveMediaStore } from "~/stores/active-media"
 
+const mockCaptureException = vi.fn()
+
+vi.mock("#app/nuxt", () => ({
+  useNuxtApp: () => ({
+    $captureException: mockCaptureException,
+  }),
+}))
+
+vi.mock("~/utils/console", () => ({
+  warn: vi.fn(),
+}))
+
 const initialState = { type: null, id: null, status: "ejected", message: null }
 const statuses = ["ejected", "paused", "playing"]
 
 describe("Active Media Store", () => {
   beforeEach(() => {
     setActivePinia(createPinia())
   })
+
   describe("state", () => {
     it("sets initial filters to filterData", () => {
       const activeMediaStore = useActiveMediaStore()
@@ -20,6 +35,7 @@ describe("Active Media Store", () => {
       expect(activeMediaStore.message).toEqual(initialState.message)
     })
   })
+
   describe("actions", () => {
     it.each(statuses)(`can set active media with status $status`, (status) => {
       const activeMediaStore = useActiveMediaStore()
@@ -39,6 +55,7 @@ describe("Active Media Store", () => {
 
       expect(activeMediaStore.status).toBe("paused")
     })
+
     it("can eject an item", () => {
       const activeMediaStore = useActiveMediaStore()
 
@@ -53,11 +70,86 @@ describe("Active Media Store", () => {
       expect(activeMediaStore.type).toEqual(initialState.type)
       expect(activeMediaStore.status).toEqual(initialState.status)
     })
+
     it("can set a message", () => {
       const activeMediaStore = useActiveMediaStore()
       const expectedMessage = "Cannot play this audio"
       activeMediaStore.setMessage({ message: expectedMessage })
       expect(activeMediaStore.message).toEqual(expectedMessage)
     })
   })
+
+  describe("playAudio", () => {
+    it("should handle undefined audio element", () => {
+      const activeMediaStore = useActiveMediaStore()
+
+      const playFn = vi.fn().mockReturnValue(undefined)
+      const mockAudio = {
+        play: playFn,
+      }
+
+      activeMediaStore.playAudio(mockAudio)
+
+      expect(warn).toHaveBeenCalledWith("Play promise is undefined")
+    })
+
+    it("should handle successful play", async () => {
+      const activeMediaStore = useActiveMediaStore()
+      const playFn = vi.fn().mockResolvedValue()
+      const mockAudio = {
+        play: playFn,
+        pause: vi.fn(),
+      }
+
+      activeMediaStore.playAudio(mockAudio)
+
+      await vi.waitFor(() => {
+        expect(playFn).toHaveBeenCalled()
+        expect(mockAudio.pause).not.toHaveBeenCalled()
+        expect(activeMediaStore.message).toBeNull()
+      })
+    })
+
+    it.each(Object.keys(audioErrorMessages))(
+      "should handle known error: %s",
+      async (errorName) => {
+        const activeMediaStore = useActiveMediaStore()
+        const error = new DOMException("Msg", errorName)
+        const playFn = vi.fn().mockRejectedValue(error)
+        const mockAudio = {
+          play: playFn,
+          pause: vi.fn(),
+        }
+
+        activeMediaStore.playAudio(mockAudio)
+
+        await vi.waitFor(() => {
+          expect(playFn).toHaveBeenCalled()
+          expect(mockAudio.pause).toHaveBeenCalled()
+          expect(activeMediaStore.message).toBe(audioErrorMessages[errorName])
+          expect(mockCaptureException).not.toHaveBeenCalled()
+        })
+      }
+    )
+
+    it("should handle unknown error", async () => {
+      const activeMediaStore = useActiveMediaStore()
+      const unknownError = new Error()
+      unknownError.name = "UnknownError"
+      const playFn = vi.fn().mockRejectedValue(unknownError)
+      const mockAudio = {
+        play: playFn,
+        pause: vi.fn(),
+      }
+
+      activeMediaStore.playAudio(mockAudio)
+
+      await vi.waitFor(() => {
+        expect(playFn).toHaveBeenCalled()
+        expect(mockAudio.pause).toHaveBeenCalled()
+        expect(activeMediaStore.message).toBe("err_unknown")
+        expect(mockCaptureException).toHaveBeenCalledWith(unknownError)
+      })
+    })
+  })
 })

frontend/test/unit/specs/stores/media-store-fetching.spec.js

@@ -52,9 +52,7 @@ vi.mock("#app/nuxt", async () => {
     ...original,
     useRuntimeConfig: vi.fn(() => ({ public: { deploymentEnv: "staging" } })),
     useNuxtApp: vi.fn(() => ({
-      $sentry: {
-        captureException: vi.fn(),
-      },
+      $captureException: vi.fn(),
       $sendCustomEvent: vi.fn(),
       $processFetchingError: vi.fn(),
     })),