feedback

Author: rachellougee

frontends/main/src/app-pages/HomePage/HomePage.test.tsx

@@ -19,6 +19,7 @@ import * as routes from "@/common/urls"
 import { FeatureFlags } from "@/common/feature_flags"
 import { assertHeadings } from "ol-test-utilities"
 import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
@@ -128,6 +129,27 @@ describe("UAI Announcement Card", () => {
     })
     assertLinksTo(cta, { pathname: "/programs/program-v1:UAI+B2C" })
   })
+
+  test("CTA click fires cta_clicked with label and readableId", async () => {
+    setupAPIs()
+    mockedUseFeatureFlagEnabled.mockImplementation(
+      (flag) => flag === FeatureFlags.UniversalAI,
+    )
+    process.env.NEXT_PUBLIC_POSTHOG_API_KEY = "test-key"
+    renderWithProviders(<HomePage heroImageIndex={1} />)
+    const cta = await screen.findByRole("link", {
+      name: "Learn about Universal AI",
+    })
+    await user.click(cta)
+    expect(mockedPostHogCapture).toHaveBeenCalledWith(
+      PostHogEvents.CallToActionClicked,
+      expect.objectContaining({
+        label: "Learn about Universal AI",
+        readableId: "program-v1:UAI+B2C",
+      }),
+    )
+    delete process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+  })
 })
 
 describe("Home Page Hero", () => {

frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.test.tsx

@@ -15,6 +15,18 @@ import {
 } from "api/mitxonline-test-utils"
 import { mitxonlineLegacyUrl } from "@/common/mitxonline"
 import * as routes from "@/common/urls"
+import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
+
+jest.mock("posthog-js/react", () => ({
+  ...jest.requireActual("posthog-js/react"),
+  usePostHog: jest.fn(),
+}))
+const mockCapture = jest.fn()
+jest.mocked(usePostHog).mockReturnValue(
+  // @ts-expect-error Not mocking all of posthog
+  { capture: mockCapture },
+)
 
 const makeCourse = mitxFactories.courses.course
 const makeRun = mitxFactories.courses.courseRun
@@ -505,4 +517,68 @@ describe("CourseEnrollmentButton", () => {
     expect(button).toBeInTheDocument()
     expect(button).toBeDisabled()
   })
+
+  describe("PostHog tracking", () => {
+    beforeEach(() => {
+      process.env.NEXT_PUBLIC_POSTHOG_API_KEY = "test-key"
+      mockCapture.mockClear()
+    })
+    afterEach(() => {
+      delete process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+    })
+
+    test("fires cta_clicked when authenticated user clicks enroll", async () => {
+      const run = makeRun({
+        is_archived: false,
+        is_enrollable: true,
+        enrollment_modes: [makeEnrollmentMode({ requires_payment: false })],
+      })
+      const course = makeCourse({ next_run_id: run.id, courseruns: [run] })
+      setMockResponse.get(
+        urls.userMe.get(),
+        makeUser({ is_authenticated: true }),
+      )
+
+      renderWithProviders(<CourseEnrollmentButton course={course} />)
+      await user.click(
+        await screen.findByRole("button", { name: "Enroll for Free" }),
+      )
+
+      expect(mockCapture).toHaveBeenCalledWith(
+        PostHogEvents.CallToActionClicked,
+        expect.objectContaining({
+          resourceId: course.id,
+          readableId: course.readable_id,
+          resourceType: "course",
+        }),
+      )
+    })
+
+    test("fires cta_clicked when unauthenticated user clicks enroll", async () => {
+      const run = makeRun({
+        is_archived: false,
+        is_enrollable: true,
+        enrollment_modes: [makeEnrollmentMode({ requires_payment: false })],
+      })
+      const course = makeCourse({ next_run_id: run.id, courseruns: [run] })
+      setMockResponse.get(
+        urls.userMe.get(),
+        makeUser({ is_authenticated: false }),
+      )
+
+      renderWithProviders(<CourseEnrollmentButton course={course} />)
+      await user.click(
+        await screen.findByRole("button", { name: "Enroll for Free" }),
+      )
+
+      expect(mockCapture).toHaveBeenCalledWith(
+        PostHogEvents.CallToActionClicked,
+        expect.objectContaining({
+          resourceId: course.id,
+          readableId: course.readable_id,
+          resourceType: "course",
+        }),
+      )
+    })
+  })
 })

frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx

@@ -93,15 +93,16 @@ const CourseEnrollmentButton: React.FC<CourseEnrollmentButtonProps> = ({
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     if (me.isLoading) {
       return
-    } else if (me.data?.is_authenticated) {
-      if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-        posthog.capture(PostHogEvents.CallToActionClicked, {
-          resourceId: course.id,
-          readableId: course.readable_id,
-          resourceType: "course",
-          label: getButtonText(nextRun, price?.finalPrice),
-        })
-      }
+    }
+    if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+      posthog.capture(PostHogEvents.CallToActionClicked, {
+        resourceId: course.id,
+        readableId: course.readable_id,
+        resourceType: "course",
+        label: getButtonText(nextRun, price?.finalPrice),
+      })
+    }
+    if (me.data?.is_authenticated) {
       if (enrollmentDecision.type === "dialog") {
         NiceModal.show(CourseEnrollmentDialog, { course })
       } else if (enrollmentDecision.type === "checkout") {

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.test.tsx

@@ -13,15 +13,21 @@ import {
   urls as mitxUrls,
   factories as mitxFactories,
 } from "api/mitxonline-test-utils"
-import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
 import { programView } from "@/common/urls"
 import { mitxonlineLegacyUrl } from "@/common/mitxonline"
 import * as routes from "@/common/urls"
+import { PostHogEvents } from "@/common/constants"
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest
   .mocked(useFeatureFlagEnabled)
   .mockImplementation(() => false)
+const mockCapture = jest.fn()
+jest.mocked(usePostHog).mockReturnValue(
+  // @ts-expect-error Not mocking all of posthog
+  { capture: mockCapture },
+)
 
 const makeProgram = mitxFactories.programs.program
 const makeProgramEnrollment = mitxFactories.enrollment.programEnrollmentV3
@@ -399,4 +405,70 @@ describe("ProgramEnrollmentButton", () => {
 
     screen.getByTestId("signup-popover")
   })
+
+  describe("PostHog tracking", () => {
+    beforeEach(() => {
+      process.env.NEXT_PUBLIC_POSTHOG_API_KEY = "test-key"
+      mockCapture.mockClear()
+    })
+    afterEach(() => {
+      delete process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+    })
+
+    test("fires cta_clicked when authenticated user clicks enroll", async () => {
+      const program = makeProgram({
+        enrollment_modes: [makeEnrollmentMode({ requires_payment: false })],
+      })
+      setMockResponse.get(mitxUrls.programEnrollments.enrollmentsListV3(), [])
+      setMockResponse.get(
+        urls.userMe.get(),
+        makeUser({ is_authenticated: true }),
+      )
+
+      renderWithProviders(
+        <ProgramEnrollmentButton program={program} variant="primary" />,
+      )
+      await user.click(
+        await screen.findByRole("button", { name: "Enroll for Free" }),
+      )
+
+      expect(mockCapture).toHaveBeenCalledWith(
+        PostHogEvents.CallToActionClicked,
+        expect.objectContaining({
+          resourceId: program.id,
+          readableId: program.readable_id,
+          resourceType: "program",
+        }),
+      )
+    })
+
+    test("fires cta_clicked when unauthenticated user clicks enroll", async () => {
+      const program = makeProgram({
+        enrollment_modes: [makeEnrollmentMode({ requires_payment: false })],
+      })
+      setMockResponse.get(mitxUrls.programEnrollments.enrollmentsListV3(), [], {
+        code: 403,
+      })
+      setMockResponse.get(
+        urls.userMe.get(),
+        makeUser({ is_authenticated: false }),
+      )
+
+      renderWithProviders(
+        <ProgramEnrollmentButton program={program} variant="primary" />,
+      )
+      await user.click(
+        await screen.findByRole("button", { name: "Enroll for Free" }),
+      )
+
+      expect(mockCapture).toHaveBeenCalledWith(
+        PostHogEvents.CallToActionClicked,
+        expect.objectContaining({
+          resourceId: program.id,
+          readableId: program.readable_id,
+          resourceType: "program",
+        }),
+      )
+    })
+  })
 })

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx

@@ -87,15 +87,16 @@ const ProgramEnrollmentButton: React.FC<ProgramEnrollmentButtonProps> = ({
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     if (enrollments.isLoading || me.isLoading) {
       return
-    } else if (me.data?.is_authenticated) {
-      if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-        posthog.capture(PostHogEvents.CallToActionClicked, {
-          resourceId: program.id,
-          readableId: program.readable_id,
-          resourceType: "program",
-          label: getEnrollButtonText(),
-        })
-      }
+    }
+    if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+      posthog.capture(PostHogEvents.CallToActionClicked, {
+        resourceId: program.id,
+        readableId: program.readable_id,
+        resourceType: "program",
+        label: getEnrollButtonText(),
+      })
+    }
+    if (me.data?.is_authenticated) {
       if (enrollmentType === "paid" && program.products[0]) {
         replaceBasketItem.mutate(program.products[0].id)
       } else if (enrollmentType === "free") {

frontends/main/src/app-pages/ProductPages/ProgramPage.test.tsx

@@ -16,7 +16,13 @@ import type {
   CourseWithCourseRunsSerializerV2,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { DisplayModeEnum } from "@mitodl/mitxonline-api-axios/v2"
-import { renderWithProviders, waitFor, screen, within } from "@/test-utils"
+import {
+  renderWithProviders,
+  waitFor,
+  screen,
+  within,
+  user,
+} from "@/test-utils"
 import ProgramPage from "./ProgramPage"
 import { assertHeadings } from "ol-test-utilities"
 import { notFound } from "next/navigation"
@@ -25,14 +31,20 @@ import {
   PROGRAM_HIDE_STAY_UPDATED_CASES,
 } from "./test-utils/stayUpdated"
 
-import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
 import invariant from "tiny-invariant"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import { getIdsFromReqTree } from "@/common/mitxonline"
 import { faker } from "@faker-js/faker/locale/en"
+import { PostHogEvents } from "@/common/constants"
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+const mockCapture = jest.fn()
+jest.mocked(usePostHog).mockReturnValue(
+  // @ts-expect-error Not mocking all of posthog
+  { capture: mockCapture },
+)
 jest.mock("@/common/useFeatureFlagsLoaded")
 const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
 
@@ -640,6 +652,31 @@ describe("ProgramPage", () => {
     })
   })
 
+  test("clicking a requirement card fires course_card_clicked", async () => {
+    const program = makeProgram({
+      ...makeReqs({ required: { count: 1, title: "Required" } }),
+    })
+    const page = makePage({ program_details: program })
+    const { courses } = setupApis({ program, page })
+    process.env.NEXT_PUBLIC_POSTHOG_API_KEY = "test-key"
+    mockCapture.mockClear()
+
+    renderWithProviders(<ProgramPage readableId={program.readable_id} />)
+
+    const course = courses[0]
+    const card = await screen.findByRole("heading", { name: course.title })
+    await user.click(card)
+
+    expect(mockCapture).toHaveBeenCalledWith(
+      PostHogEvents.CourseCardClicked,
+      expect.objectContaining({
+        resourceId: course.id,
+        readableId: course.readable_id,
+      }),
+    )
+    delete process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+  })
+
   describe("Stay Updated button", () => {
     useStayUpdatedEnv()
 

frontends/main/src/app-pages/SearchPage/SearchPage.test.tsx

@@ -16,15 +16,21 @@ import invariant from "tiny-invariant"
 import { Permission } from "api/hooks/user"
 import { assertHeadings, ControlledPromise } from "ol-test-utilities"
 import { act } from "@testing-library/react"
-import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 jest.mock("posthog-js/react", () => ({
   ...jest.requireActual("posthog-js/react"),
   useFeatureFlagEnabled: jest.fn(),
-  usePostHog: jest.fn(() => ({ capture: jest.fn() })),
+  usePostHog: jest.fn(),
 }))
 
 const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+const mockCapture = jest.fn()
+jest.mocked(usePostHog).mockReturnValue(
+  // @ts-expect-error Not mocking all of posthog
+  { capture: mockCapture },
+)
 
 const DEFAULT_SEARCH_RESPONSE: LearningResourcesSearchResponse = {
   count: 0,
@@ -1060,4 +1066,24 @@ describe("UniversalAIBanner", () => {
     expect(screen.queryByText("Universal AI")).not.toBeInTheDocument()
     expect(screen.queryByText("New on MIT Learn")).not.toBeInTheDocument()
   })
+
+  test("clicking Learn More fires cta_clicked with label and readableId", async () => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    mockCapture.mockClear()
+    process.env.NEXT_PUBLIC_POSTHOG_API_KEY = "test-key"
+    setMockApiResponses({ search: { count: 10 } })
+    renderWithProviders(<SearchPage />)
+    const link = await screen.findByRole("link", {
+      name: "Learn more about Universal AI",
+    })
+    await user.click(link)
+    expect(mockCapture).toHaveBeenCalledWith(
+      PostHogEvents.CallToActionClicked,
+      expect.objectContaining({
+        label: "Learn More",
+        readableId: "program-v1:UAI+B2C",
+      }),
+    )
+    delete process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+  })
 })