Make analytics tests stricter; replace collectionValue with query (#5267

)

frontend/shared/types/analytics.ts

@@ -28,17 +28,21 @@ export type AudioComponent =
  */
 export type SearchParamsForEvent = {
   kind: "search" | "collection"
+  /** The search type of the current results page */
   searchType: SupportedSearchType
+  /** The search term, or a string representing a unique identifier for the collection */
   query: string
-
-  /**
-   * Common properties related to searches on collection pages, added in the
-   * "Additional Search Views" project.
-   */
   /** If a collection page, the type of collection */
   collectionType: Collection | "null"
-  /** A string representing a unique identifier for the collection */
-  collectionValue: string | "null"
+}
+
+/**
+ * Common properties for search result events, used to link the result to
+ * assess relevancy.
+ */
+export type SearchResultParams = {
+  /** The unique ID of the media */
+  id: string
 }
 
 /**
@@ -75,7 +79,7 @@ export type Events = {
    *   - How many results do most searches yield?
    */
   GET_SEARCH_RESULTS: {
-    /** the media type being searched */
+    /** the media type of the results. Is different from `searchType` when searchType is "all media" */
     mediaType: SupportedMediaType
     /** The search term */
     query: string
@@ -108,9 +112,7 @@ export type Events = {
    *   - Do users right-click images often? Does this suggest downloading them directly,
    *     when not paired with a `GET_MEDIA` event?
    */
-  RIGHT_CLICK_IMAGE: {
-    id: string
-  }
+  RIGHT_CLICK_IMAGE: SearchResultParams
   /**
    * Click on the 'back to search' link on a single result
    *
@@ -155,9 +157,7 @@ export type Events = {
    * Questions:
    *   - How often do users go to the source after viewing a result?
    */
-  GET_MEDIA: {
-    /** the unique ID of the media */
-    id: string
+  GET_MEDIA: SearchResultParams & {
     /** The slug (not the prettified name) of the provider */
     provider: string
     /** The media type being searched */
@@ -169,9 +169,7 @@ export type Events = {
    *   - How often do users use our attribution tool?
    *   - Which format is the most popular?
    */
-  COPY_ATTRIBUTION: {
-    /** The unique ID of the media */
-    id: string
+  COPY_ATTRIBUTION: SearchResultParams & {
     /** The format of the copied attribution */
     format: "plain" | "rich" | "html" | "xml"
     /** The media type being searched */
@@ -296,22 +294,23 @@ export type Events = {
    *   - How often do searches lead to clicking a result?
    *   - Are there popular searches that do not result in result selection?
    */
-  SELECT_SEARCH_RESULT: Omit<SearchParamsForEvent, "searchType" | "kind"> & {
-    /** The unique ID of the media */
-    id: string
-    /** If the result is a related result, provide the ID of the 'original' result */
-    relatedTo: string | "null"
-    /** Kind of the result selected: search/related/collection */
-    kind: ResultKind
-    /** The media type being searched */
-    mediaType: SearchType
-    /** The slug (not the prettified name) of the provider */
-    provider: string
-    /** the reasons for why this result is considered sensitive */
-    sensitivities: string
-    /** whether the result was blurred or visible when selected by the user */
-    isBlurred: boolean | "null"
-  }
+  SELECT_SEARCH_RESULT: SearchResultParams &
+    Pick<SearchParamsForEvent, "collectionType"> & {
+      /** If the result is a related result, provide the ID of the 'original' result */
+      relatedTo: string | "null"
+      /** Kind of the result selected: search/related/collection */
+      kind: ResultKind
+      /** The media type of the selected result */
+      mediaType: SupportedMediaType
+      /** The search type of the current results page */
+      searchType: SupportedSearchType
+      /** The slug (not the prettified name) of the provider */
+      provider: string
+      /** the reasons for why this result is considered sensitive */
+      sensitivities: string
+      /** whether the result was blurred or visible when selected by the user */
+      isBlurred: boolean | "null"
+    }
   /**
    * Description: When a user opens the external sources popover.
    * Questions:
@@ -337,8 +336,7 @@ export type Events = {
    *     from anyway?
    */
   LOAD_MORE_RESULTS: {
-    /** The current page of results the user is on,
-     * *before* loading more results.. */
+    /** The current page of results the user is on, *before* loading more results. */
     resultPage: number
   } & SearchParamsForEvent
   /**

frontend/src/components/VImageCell/VImageCell.vue

@@ -111,18 +111,17 @@ const sendSelectSearchResultEvent = (event: MouseEvent) => {
     return
   }
 
+  const { searchType, collectionType } = searchStore.searchParamsForEvent
   $sendCustomEvent("SELECT_SEARCH_RESULT", {
+    searchType,
+    collectionType,
     id: props.image.id,
     kind: props.kind,
     mediaType: IMAGE,
     provider: props.image.provider,
-    query: props.searchTerm || "",
     relatedTo: props.relatedTo ?? "null",
     sensitivities: props.image.sensitivity?.join(",") ?? "",
     isBlurred: shouldBlur.value ?? "null",
-    collectionType:
-      searchStore.strategy !== "default" ? searchStore.strategy : "null",
-    collectionValue: searchStore.collectionValue ?? "null",
   })
 }
 

frontend/src/components/VMediaInfo/VLicenseTabPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useNuxtApp } from "#imports"
 
-import type { MediaType } from "#shared/constants/media"
+import type { SupportedMediaType } from "#shared/constants/media"
 
 import VCopyButton from "~/components/VCopyButton.vue"
 import VTabPanel from "~/components/VTabs/VTabPanel.vue"
@@ -20,7 +20,7 @@ const props = defineProps<{
    * The media type of the media for which the attribution is generated.
    * Used for analytics.
    */
-  mediaType: MediaType
+  mediaType: SupportedMediaType
 }>()
 
 const { $sendCustomEvent } = useNuxtApp()

frontend/src/components/VSearchResultsGrid/VAudioResult.vue

@@ -43,18 +43,17 @@ const sendSelectSearchResultEvent = (
     return
   }
   useAudioSnackbar().hide()
+  const { searchType, collectionType } = searchStore.searchParamsForEvent
   $sendCustomEvent("SELECT_SEARCH_RESULT", {
+    searchType,
+    collectionType,
     id: audio.id,
     kind: props.kind,
     mediaType: AUDIO,
-    query: props.searchTerm,
     provider: audio.provider,
     relatedTo: props.relatedTo ?? "null",
     sensitivities: audio.sensitivity?.join(",") ?? "",
     isBlurred: shouldBlur.value ?? "null",
-    collectionType:
-      searchStore.strategy !== "default" ? searchStore.strategy : "null",
-    collectionValue: searchStore.collectionValue ?? "null",
   })
 }
 const sendInteractionEvent = (

frontend/src/stores/search.ts

@@ -239,12 +239,14 @@ export const useSearchStore = defineStore("search", {
     searchParamsForEvent(): SearchParamsForEvent {
       return {
         kind: this.strategy === "default" ? "search" : "collection",
-        query: this.searchTerm,
+        query:
+          this.strategy === "default"
+            ? this.searchTerm
+            : (this.collectionValue ?? ""),
         searchType: isSearchTypeSupported(this.searchType)
           ? this.searchType
           : ALL_MEDIA,
         collectionType: this.collectionParams?.collection ?? "null",
-        collectionValue: this.collectionValue ?? "null",
       }
     },
   },

frontend/test/playwright/e2e/all-results-analytics.spec.ts

@@ -12,18 +12,28 @@ import {
 } from "~~/test/playwright/utils/analytics"
 import { t } from "~~/test/playwright/utils/i18n"
 
-import { AUDIO, IMAGE } from "#shared/constants/media"
+import { ALL_MEDIA, AUDIO, IMAGE } from "#shared/constants/media"
+import type { Events } from "#shared/types/analytics"
 
 test.describe.configure({ mode: "parallel" })
 
-const defaultPayload = {
-  query: "birds",
+const searchResultPayload = {
   kind: "search",
-  relatedTo: "null",
   collectionType: "null",
-  collectionValue: "null",
-  sensitivities: "",
+  searchType: ALL_MEDIA,
+} as const
+
+const defaultPayload = {
+  ...searchResultPayload,
   isBlurred: false,
+  relatedTo: "null",
+  sensitivities: "",
+} as const
+
+const audioResult = {
+  mediaType: AUDIO,
+  id: "2e38ac1e-830c-4e9c-b13d-2c9a1ad53f95",
+  provider: "jamendo",
 } as const
 
 test.describe("all results grid analytics test", () => {
@@ -42,15 +52,14 @@ test.describe("all results grid analytics test", () => {
     const selectSearchResultEvent = analyticsEvents.find(
       (event) => event.n === "SELECT_SEARCH_RESULT"
     )
-    expectEventPayloadToMatch(selectSearchResultEvent, {
+    const expectedPayload: Events["SELECT_SEARCH_RESULT"] = {
       ...defaultPayload,
-      mediaType: AUDIO,
-      id: "2e38ac1e-830c-4e9c-b13d-2c9a1ad53f95",
-      provider: "jamendo",
-    })
+      ...audioResult,
+    }
+    expectEventPayloadToMatch(selectSearchResultEvent, expectedPayload)
   })
 
-  test("should send SELECT_SEARCH_RESULT event when image result is selected", async ({
+  test("sends SELECT_SEARCH_RESULT event when image result is selected", async ({
     context,
     page,
   }) => {
@@ -60,12 +69,14 @@ test.describe("all results grid analytics test", () => {
     const selectSearchResultEvent = analyticsEvents.find(
       (event) => event.n === "SELECT_SEARCH_RESULT"
     )
-
-    expectEventPayloadToMatch(selectSearchResultEvent, {
+    const expectedPayload: Events["SELECT_SEARCH_RESULT"] = {
+      ...defaultPayload,
       id: "da5cb478-c093-4d62-b721-cda18797e3fb",
       mediaType: IMAGE,
       provider: "flickr",
-    })
+    }
+
+    expectEventPayloadToMatch(selectSearchResultEvent, expectedPayload)
   })
 
   test("sends AUDIO_INTERACTION event when audio is interacted", async ({
@@ -83,13 +94,13 @@ test.describe("all results grid analytics test", () => {
     const audioInteractionEvent = analyticsEvents.find(
       (event) => event.n === "AUDIO_INTERACTION"
     )
-
-    expectEventPayloadToMatch(audioInteractionEvent, {
-      id: "2e38ac1e-830c-4e9c-b13d-2c9a1ad53f95",
+    const expectedPayload: Events["AUDIO_INTERACTION"] = {
+      id: audioResult.id,
+      provider: audioResult.provider,
       event: "play",
-      provider: "jamendo",
       component: "VAllResultsGrid",
-    })
+    }
+    expectEventPayloadToMatch(audioInteractionEvent, expectedPayload)
   })
 
   test("sends CHANGE_CONTENT_TYPE event when content type is changed", async ({
@@ -109,11 +120,11 @@ test.describe("all results grid analytics test", () => {
     const changeContentTypeEvent = events.find(
       (event) => event.n === "CHANGE_CONTENT_TYPE"
     )
-
-    expectEventPayloadToMatch(changeContentTypeEvent, {
+    const expectedPayload: Events["CHANGE_CONTENT_TYPE"] = {
       component: "VContentLink",
       next: "image",
       previous: "all",
-    })
+    }
+    expectEventPayloadToMatch(changeContentTypeEvent, expectedPayload)
   })
 })

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

@@ -11,6 +11,8 @@ import {
 import { t } from "~~/test/playwright/utils/i18n"
 import { getH1 } from "~~/test/playwright/utils/components"
 
+import type { Events } from "#shared/types/analytics"
+
 const audioObject = {
   id: "1cb1af19-7232-40c2-b9ea-8d6c47e677f9",
   provider: "wikimedia_audio",
@@ -51,10 +53,11 @@ test("sends GET_MEDIA event on CTA button click", async ({ context, page }) => {
 
   const getMediaEvent = analyticsEvents.find((event) => event.n === "GET_MEDIA")
 
-  expectEventPayloadToMatch(getMediaEvent, {
+  const expectedPayload: Events["GET_MEDIA"] = {
     ...audioObject,
     mediaType: "audio",
-  })
+  }
+  expectEventPayloadToMatch(getMediaEvent, expectedPayload)
 })
 
 test("sends AUDIO_INTERACTION event on play", async ({ page, context }) => {
@@ -68,11 +71,12 @@ test("sends AUDIO_INTERACTION event on play", async ({ page, context }) => {
     (event) => event.n === "AUDIO_INTERACTION"
   )
 
-  expectEventPayloadToMatch(audioInteractionEvent, {
+  const expectedPayload: Events["AUDIO_INTERACTION"] = {
     ...audioObject,
     event: "play",
     component: "AudioDetailPage",
-  })
+  }
+  expectEventPayloadToMatch(audioInteractionEvent, expectedPayload)
 })
 
 test("sends AUDIO_INTERACTION event on seek", async ({ page, context }) => {
@@ -86,11 +90,12 @@ test("sends AUDIO_INTERACTION event on seek", async ({ page, context }) => {
     (event) => event.n === "AUDIO_INTERACTION"
   )
 
-  expectEventPayloadToMatch(audioInteractionEvent, {
+  const expectedPayload: Events["AUDIO_INTERACTION"] = {
     ...audioObject,
     event: "seek",
     component: "AudioDetailPage",
-  })
+  }
+  expectEventPayloadToMatch(audioInteractionEvent, expectedPayload)
 })
 
 test("shows the 404 error page when no valid id", async ({ page }) => {
@@ -126,16 +131,16 @@ test("sends SELECT_SEARCH_RESULT event on related audio click", async ({
     (event) => event.n === "SELECT_SEARCH_RESULT"
   )
 
-  expectEventPayloadToMatch(selectSearchResultEvent, {
+  const expectedPayload: Events["SELECT_SEARCH_RESULT"] = {
     id: "0b94484c-d7d1-43f2-8710-69399b6a0310",
     relatedTo: audioObject.id,
     kind: "related",
     mediaType: "audio",
     provider: "wikimedia_audio",
-    query: "",
+    searchType: "all",
     sensitivities: "",
     isBlurred: false,
     collectionType: "null",
-    collectionValue: "null",
-  })
+  }
+  expectEventPayloadToMatch(selectSearchResultEvent, expectedPayload)
 })