[Analytics] Adding rendering telemetry events to widgets in Perseus. (#3017)

## Summary:
Currently in our analytics, only interactive graph logs rendering metrics. This PR is to fix it and expose rendering data for more Perseus Widgets.

Issue: LEMS-XXXX

## Test plan:

Author: catandthemachines

Reviewers: nishasy, catandthemachines, ivyolamit, jeremywiebe, SonicScrewdriver, handeyeco, Myranae

Required Reviewers:

Approved By: nishasy

Checks: ✅ 10 checks were successful

Pull Request URL: #3017

Author: catandthemachines

.changeset/funny-dancers-yell.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Adding rendering analytics events to perseus widgets

packages/perseus/src/widgets/expression/expression.test.tsx

@@ -458,6 +458,30 @@ describe("Expression Widget", function () {
             );
         });
 
+        it("should send analytics event when widget is rendered", () => {
+            // Arrange
+            const onAnalyticsEventSpy = jest.spyOn(
+                testDependenciesV2.analytics,
+                "onAnalyticsEvent",
+            );
+
+            // Act
+            renderQuestion(expressionItem2.question);
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            // Assert
+            expect(onAnalyticsEventSpy).toHaveBeenCalledWith({
+                type: "perseus:widget:rendered:ti",
+                payload: {
+                    widgetSubType: "null",
+                    widgetType: "expression",
+                    widgetId: "expression",
+                },
+            });
+        });
+
         it("supports mobile rendering", async () => {
             // arrange and act
             renderQuestion(expressionItem2.question, {

packages/perseus/src/widgets/expression/expression.tsx

@@ -103,6 +103,15 @@ export class Expression extends React.Component<Props> implements Widget {
     displayName = "Expression";
 
     componentDidMount: () => void = () => {
+        this.props.analytics?.onAnalyticsEvent({
+            type: "perseus:widget:rendered:ti",
+            payload: {
+                widgetSubType: "null",
+                widgetType: "expression",
+                widgetId: "expression",
+            },
+        });
+
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;

packages/perseus/src/widgets/image/image.test.ts

@@ -8,15 +8,18 @@ import {userEvent as userEventLib} from "@testing-library/user-event";
 
 import {getFeatureFlags} from "../../../../../testing/feature-flags-util";
 import {mockImageLoading} from "../../../../../testing/image-loader-utils";
-import {testDependencies} from "../../../../../testing/test-dependencies";
+import {
+    testDependenciesV2,
+    testDependencies,
+} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
 import {scorePerseusItemTesting} from "../../util/test-utils";
 import {renderQuestion} from "../__testutils__/renderQuestion";
 
 import {question} from "./image.testdata";
 import {earthMoonImage} from "./utils";
 
-import type {APIOptions} from "../../types";
+import type {APIOptions, PerseusDependenciesV2} from "../../types";
 import type {UserEvent} from "@testing-library/user-event";
 
 describe.each([[true], [false]])("image widget - isMobile(%j)", (isMobile) => {
@@ -110,6 +113,42 @@ describe.each([[true], [false]])("image widget - isMobile(%j)", (isMobile) => {
         expect(screen.getByRole("figure")).toBeVisible();
     });
 
+    it("should send analytics event when widget is rendered", () => {
+        // Arrange
+        const imageQuestion = generateTestPerseusRenderer({
+            content: "[[☃ image 1]]",
+            widgets: {
+                "image 1": generateImageWidget({
+                    options: generateImageOptions({
+                        backgroundImage: earthMoonImage,
+                    }),
+                }),
+            },
+        });
+
+        const onAnalyticsEventSpy = jest.fn();
+        const depsV2: PerseusDependenciesV2 = {
+            ...testDependenciesV2,
+            analytics: {onAnalyticsEvent: onAnalyticsEventSpy},
+        };
+
+        // Act
+        renderQuestion(imageQuestion, apiOptions, undefined, undefined, depsV2);
+        act(() => {
+            jest.runAllTimers();
+        });
+
+        // Assert
+        expect(onAnalyticsEventSpy).toHaveBeenCalledWith({
+            type: "perseus:widget:rendered:ti",
+            payload: {
+                widgetSubType: "null",
+                widgetType: "image",
+                widgetId: "image",
+            },
+        });
+    });
+
     it("should render image with alt text", () => {
         // Arrange
         const imageQuestion = generateTestPerseusRenderer({

packages/perseus/src/widgets/image/image.tsx

@@ -1,9 +1,11 @@
 import {isFeatureOn} from "@khanacademy/perseus-core";
+import {useOnMountEffect} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
 import AssetContext from "../../asset-context";
 import {PerseusI18nContext} from "../../components/i18n-context";
 import SvgImage from "../../components/svg-image";
+import {useDependencies} from "../../dependencies";
 import Renderer from "../../renderer";
 import Util from "../../util";
 
@@ -30,6 +32,7 @@ export const ImageComponent = (props: ImageWidgetProps) => {
     } = props;
     const context = React.useContext(PerseusI18nContext);
     const imageUpgradeFF = isFeatureOn({apiOptions}, "image-widget-upgrade");
+    const {analytics} = useDependencies();
 
     const [zoomSize, setZoomSize] = React.useState<Size>([
         backgroundImage.width || 0,
@@ -38,6 +41,17 @@ export const ImageComponent = (props: ImageWidgetProps) => {
 
     const [zoomWidth, zoomHeight] = zoomSize;
 
+    useOnMountEffect(() => {
+        analytics.onAnalyticsEvent({
+            type: "perseus:widget:rendered:ti",
+            payload: {
+                widgetSubType: "null",
+                widgetType: "image",
+                widgetId: "image",
+            },
+        });
+    });
+
     React.useEffect(() => {
         // Wait to figure out what the original size of the image is.
         // Use whichever is larger between the original image size and the

packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx

@@ -154,7 +154,7 @@ describe("MafsGraph", () => {
             type: "perseus:widget:rendered:ti",
             payload: {
                 widgetSubType: "segment",
-                widgetType: "INTERACTIVE_GRAPH",
+                widgetType: "interactive-graph",
                 widgetId: "interactive-graph",
             },
         });

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -142,7 +142,7 @@ export const MafsGraph = (props: MafsGraphProps) => {
             type: "perseus:widget:rendered:ti",
             payload: {
                 widgetSubType: type,
-                widgetType: "INTERACTIVE_GRAPH",
+                widgetType: "interactive-graph",
                 widgetId: "interactive-graph",
             },
         });

packages/perseus/src/widgets/label-image/__tests__/label-image.test.ts

@@ -829,6 +829,22 @@ describe("LabelImage", function () {
             );
         });
 
+        it("sends an analytics event when widget is rendered", async () => {
+            // render component
+            renderQuestion(textQuestion);
+
+            expect(
+                testDependenciesV2.analytics.onAnalyticsEvent,
+            ).toHaveBeenCalledWith({
+                type: "perseus:widget:rendered:ti",
+                payload: {
+                    widgetSubType: "null",
+                    widgetType: "label-image",
+                    widgetId: "label-image",
+                },
+            });
+        });
+
         it("sends an analytics event when the toggle is interacted with", async () => {
             // render component
             renderQuestion(textQuestion);

packages/perseus/src/widgets/label-image/label-image.tsx

@@ -352,6 +352,14 @@ export class LabelImage
     }
 
     componentDidMount() {
+        this.props.analytics?.onAnalyticsEvent({
+            type: "perseus:widget:rendered:ti",
+            payload: {
+                widgetSubType: "null",
+                widgetType: "label-image",
+                widgetId: "label-image",
+            },
+        });
         this._mounted = true;
     }
 

packages/perseus/src/widgets/video/video.test.ts

@@ -34,7 +34,7 @@ describe("video widget", () => {
         expect(container).toMatchSnapshot("first mobile render");
     });
 
-    it("video widget should allow autoplay", () => {
+    it("should allow autoplay", () => {
         // Arrange
         const apiOptions: APIOptions = {
             isMobile: false,
@@ -51,7 +51,33 @@ describe("video widget", () => {
         );
     });
 
-    it("vimeo widget should contain dnt param", () => {
+    it("should send analytics event when widget is rendered", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        const onAnalyticsEventSpy = jest.fn();
+        const depsV2: PerseusDependenciesV2 = {
+            ...testDependenciesV2,
+            analytics: {onAnalyticsEvent: onAnalyticsEventSpy},
+        };
+
+        // Act
+        renderQuestion(question1, apiOptions, undefined, undefined, depsV2);
+
+        // Assert
+        expect(onAnalyticsEventSpy).toHaveBeenCalledWith({
+            type: "perseus:widget:rendered:ti",
+            payload: {
+                widgetSubType: "null",
+                widgetType: "video",
+                widgetId: "video",
+            },
+        });
+    });
+
+    it("should contain dnt param", () => {
         // Arrange
         const apiOptions: APIOptions = {
             isMobile: false,
@@ -67,7 +93,7 @@ describe("video widget", () => {
         );
     });
 
-    it("video widget should call the generateUrl dependency to set the iframe src", () => {
+    it("should call the generateUrl dependency to set the iframe src", () => {
         // Arrange
         const dependencies: PerseusDependenciesV2 = {
             ...testDependenciesV2,