Add OPEN_PAGES_MENU event (#2398)

Co-authored-by: Olga Bulat <[email protected]>

frontend/src/components/VHeader/VHeaderInternal.vue

@@ -87,6 +87,7 @@ import { computed, defineComponent, ref, watch } from "vue"
 import { useRoute } from "@nuxtjs/composition-api"
 
 import { useDialogControl } from "~/composables/use-dialog-control"
+import { useAnalytics } from "~/composables/use-analytics"
 import usePages from "~/composables/use-pages"
 
 import { useUiStore } from "~/stores/ui"
@@ -119,6 +120,8 @@ export default defineComponent({
 
     const route = useRoute()
 
+    const { sendCustomEvent } = useAnalytics()
+
     const { all: allPages, current: currentPage } = usePages()
 
     const isModalVisible = ref(false)
@@ -148,6 +151,13 @@ export default defineComponent({
       deactivateFocusTrap,
     })
 
+    const eventedOnTriggerClick = () => {
+      if (!isModalVisible.value) {
+        sendCustomEvent("OPEN_PAGES_MENU", {})
+      }
+      return onTriggerClick()
+    }
+
     // When clicking on an internal link in the modal, close the modal
     watch(route, () => {
       if (isModalVisible.value) {
@@ -167,7 +177,7 @@ export default defineComponent({
       closePageMenu,
       openPageMenu,
       isSm,
-      onTriggerClick,
+      onTriggerClick: eventedOnTriggerClick,
       triggerA11yProps,
       triggerElement,
     }

frontend/src/types/analytics.ts

@@ -45,6 +45,13 @@ export type Events = {
     /** The unique ID of the media */
     id: string
   }
+  /**
+   * Description: The user opens the menu which lists pages.
+   * Questions:
+   *   - How often is this menu used?
+   *   - Is this menu visible enough?
+   */
+  OPEN_PAGES_MENU: Record<string, never>
   /**
    * Description: The user right clicks a single image result, most likely to download it.
    * Questions:

frontend/test/unit/specs/components/VHeader/v-header-internal.spec.js

@@ -0,0 +1,52 @@
+import { fireEvent } from "@testing-library/vue"
+
+import { render } from "~~/test/unit/test-utils/render"
+
+import { useAnalytics } from "~/composables/use-analytics"
+
+import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
+
+jest.mock("~/composables/use-analytics", () => ({
+  useAnalytics: jest.fn(),
+}))
+
+jest.mock("@nuxtjs/composition-api", () => {
+  const { ref } = require("vue")
+  return {
+    useContext: () => ({
+      app: {
+        localePath: jest.fn().mockReturnValue("/en"),
+      },
+    }),
+    useRoute: jest.fn().mockReturnValue(
+      ref({
+        name: "route_name__extra",
+      })
+    ),
+  }
+})
+
+describe("VHeaderInternal", () => {
+  let options = null
+  const sendCustomEventMock = jest.fn()
+
+  beforeEach(() => {
+    useAnalytics.mockImplementation(() => ({
+      sendCustomEvent: sendCustomEventMock,
+    }))
+    options = {
+      stubs: ["ClientOnly"],
+    }
+  })
+
+  it("sends OPEN_PAGES_MENU analytics event when pages menu triggered", async () => {
+    const screen = render(VHeaderInternal, options)
+    const pagesMenuTrigger = screen.getByLabelText("menu")
+
+    await fireEvent.click(pagesMenuTrigger)
+
+    expect(sendCustomEventMock).toHaveBeenCalledWith("OPEN_PAGES_MENU", {})
+
+    await fireEvent.click(pagesMenuTrigger)
+  })
+})