Replace single image unit tests with Playwright e2e

frontend/test/playwright/e2e/audio-detail.spec.ts

@@ -32,37 +32,61 @@ test("shows the data that is only available in single result, not search respons
   ).toBeVisible()
 })
 
-test("sends a custom event on play", async ({ page, context }) => {
-  const analyticsEvents = collectAnalyticsEvents(context)
-
-  await goToCustomAudioPage(page)
-  await page.getByRole("button", { name: "Play" }).first().click()
-  const audioInteractionEvent = analyticsEvents.find(
-    (event) => event.n === "AUDIO_INTERACTION"
-  )
-
-  expectEventPayloadToMatch(audioInteractionEvent, {
+test.describe("analytics", () => {
+  const audioObject = {
     id: "7e063ee6-343f-48e4-a4a5-f436393730f6",
-    event: "play",
     provider: "jamendo",
-    component: "AudioDetailPage",
+  }
+  test("sends GET_MEDIA event on CTA button click", async ({
+    context,
+    page,
+  }) => {
+    const analyticsEvents = collectAnalyticsEvents(context)
+
+    await goToCustomAudioPage(page)
+
+    await page.getByRole("link", { name: /get this audio/i }).click()
+
+    const getMediaEvent = analyticsEvents.find(
+      (event) => event.n === "GET_MEDIA"
+    )
+
+    expectEventPayloadToMatch(getMediaEvent, {
+      ...audioObject,
+      mediaType: "audio",
+    })
   })
-})
 
-test("sends a custom event on seek", async ({ page, context }) => {
-  const analyticsEvents = collectAnalyticsEvents(context)
+  test("sends AUDIO_INTERACTION event on play", async ({ page, context }) => {
+    const analyticsEvents = collectAnalyticsEvents(context)
 
-  await goToCustomAudioPage(page)
-  await page.mouse.click(200, 200)
-  const audioInteractionEvent = analyticsEvents.find(
-    (event) => event.n === "AUDIO_INTERACTION"
-  )
+    await goToCustomAudioPage(page)
+    await page.getByRole("button", { name: "Play" }).first().click()
+    const audioInteractionEvent = analyticsEvents.find(
+      (event) => event.n === "AUDIO_INTERACTION"
+    )
 
-  expectEventPayloadToMatch(audioInteractionEvent, {
-    id: "7e063ee6-343f-48e4-a4a5-f436393730f6",
-    event: "seek",
-    provider: "jamendo",
-    component: "AudioDetailPage",
+    expectEventPayloadToMatch(audioInteractionEvent, {
+      ...audioObject,
+      event: "play",
+      component: "AudioDetailPage",
+    })
+  })
+
+  test("sends AUDIO_INTERACTION event on seek", async ({ page, context }) => {
+    const analyticsEvents = collectAnalyticsEvents(context)
+
+    await goToCustomAudioPage(page)
+    await page.mouse.click(200, 200)
+    const audioInteractionEvent = analyticsEvents.find(
+      (event) => event.n === "AUDIO_INTERACTION"
+    )
+
+    expectEventPayloadToMatch(audioInteractionEvent, {
+      ...audioObject,
+      event: "seek",
+      component: "AudioDetailPage",
+    })
   })
 })
 

frontend/test/playwright/e2e/image-detail.spec.ts

@@ -2,6 +2,10 @@ import { test, expect, Page } from "@playwright/test"
 
 import { mockProviderApis } from "~~/test/playwright/utils/route"
 import { t } from "~~/test/playwright/utils/navigation"
+import {
+  collectAnalyticsEvents,
+  expectEventPayloadToMatch,
+} from "~~/test/playwright/utils/analytics"
 
 const goToCustomImagePage = async (page: Page) => {
   // Test in a custom image detail page, it should apply the same for any image.
@@ -58,3 +62,46 @@ test("shows the 404 error page when no id", async ({ page }) => {
   await page.goto("image/")
   await showsErrorPage(page)
 })
+
+test.describe("analytics", () => {
+  test("sends GET_MEDIA event on CTA button click", async ({
+    context,
+    page,
+  }) => {
+    const analyticsEvents = collectAnalyticsEvents(context)
+
+    await goToCustomImagePage(page)
+
+    await page.getByRole("link", { name: /get this image/i }).click()
+
+    const getMediaEvent = analyticsEvents.find(
+      (event) => event.n === "GET_MEDIA"
+    )
+
+    expectEventPayloadToMatch(getMediaEvent, {
+      id: "e9d97a98-621b-4ec2-bf70-f47a74380452",
+      provider: "flickr",
+      mediaType: "image",
+    })
+  })
+
+  test("sends RIGHT_CLICK_IMAGE event on right-click", async ({
+    context,
+    page,
+  }) => {
+    const analyticsEvents = collectAnalyticsEvents(context)
+
+    await goToCustomImagePage(page)
+
+    const img = await page.getByRole("img").first()
+    await img.click({ button: "right" })
+
+    const rightClickImageEvent = analyticsEvents.find(
+      (event) => event.n === "RIGHT_CLICK_IMAGE"
+    )
+
+    expectEventPayloadToMatch(rightClickImageEvent, {
+      id: "e9d97a98-621b-4ec2-bf70-f47a74380452",
+    })
+  })
+})

frontend/test/unit/test-utils/pinia.js

@@ -21,6 +21,7 @@ export const createPinia = () =>
           name: "Spanish",
         },
       },
+      error: jest.fn(),
       localePath: jest.fn(),
     },
   }))