@khanacademy/perseus 0.0.1 → 0.1.0

package/src/widgets/__tests__/group_test.jsx

@@ -0,0 +1,512 @@
+// @flow
+
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import {cleanup, render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+// TODO(FEI-3857): Include in jest setup so that we don't need to import it everywhere
+import "@testing-library/jest-dom/extend-expect";
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import * as Dependencies from "../../dependencies.js";
+import * as Perseus from "../../index.js";
+import {traverse} from "../../traversal.jsx";
+import {question1} from "../__testdata__/group_testdata.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+describe("group widget", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should snapshot", () => {
+        // Arrange and Act
+        const {container} = renderQuestion(question1);
+
+        // Assert
+        expect(container).toMatchSnapshot("initial render");
+    });
+
+    it("should render annotations if groupAnnotator provided", () => {
+        // Arrange
+        const groupAnnotator = jest.fn().mockImplementation((...args) => {
+            return (
+                <div data-widget-id={args[1]}>{`Group Widget: ${args[1]}`}</div>
+            );
+        });
+
+        // Act
+        renderQuestion(question1, {
+            groupAnnotator,
+        });
+
+        // Assert
+        // Annotations should be in the DOM
+        const annotations = screen.getAllByText(/Group Widget:/);
+        expect(annotations).toHaveLength(2);
+        expect(annotations[0]).toHaveTextContent("Group Widget: group 1");
+        expect(annotations[1]).toHaveTextContent("Group Widget: group 2");
+    });
+
+    describe("focus management", () => {
+        it("should map focus event to onFocusChange", () => {
+            // Arrange
+            const onFocusChange = jest.fn();
+
+            const {renderer} = renderQuestion(question1, {
+                onFocusChange,
+            });
+
+            // Act
+            renderer.focus();
+            jest.runOnlyPendingTimers();
+
+            // Assert
+            expect(onFocusChange).toHaveBeenCalledWith(
+                ["group 1", "radio 1"], // New focus
+                null, // Old focus
+            );
+        });
+
+        it("should map blur event to onFocusChange", () => {
+            // Arrange
+            const onFocusChange = jest.fn();
+
+            const {renderer} = renderQuestion(question1, {
+                onFocusChange,
+            });
+
+            screen.getAllByRole("textbox")[1].focus();
+
+            // This flushes the onFocusChange call resulting from the focus()
+            jest.runOnlyPendingTimers();
+            jest.runOnlyPendingTimers();
+            onFocusChange.mockClear();
+
+            // Act
+            renderer.blur();
+            // There's two levels of <Renderer /> here (our main one and one inside
+            // the group widget) so we have to wait twice for all the focus
+            // management timers to resolve.
+            jest.runOnlyPendingTimers();
+            jest.runOnlyPendingTimers();
+
+            // Assert
+            expect(onFocusChange).toHaveBeenCalledWith(
+                null, // New focus
+                ["group 2", "numeric-input 2"], // Old focus
+            );
+        });
+
+        it("should forward focusInputPath calls to Renderer", () => {
+            // Arrange
+            const {renderer} = renderQuestion(question1);
+
+            // Act
+            // focusPath() calls focusInputPath() on the focused widget
+            renderer.focusPath(["group 2", "numeric-input 2"]);
+
+            // Assert
+            expect(screen.getAllByRole("textbox")[1]).toHaveFocus();
+        });
+
+        it("should forward blurInputPath calls to Renderer", () => {
+            // Arrange
+            const {renderer} = renderQuestion(question1);
+            const textbox = screen.getAllByRole("textbox")[1];
+
+            textbox.focus();
+            jest.runOnlyPendingTimers();
+            jest.runOnlyPendingTimers();
+
+            // Act
+            // blurPath() calls blurInputPath() on the focused widget
+            renderer.blurPath(["group 2", "numeric-input 2"]);
+
+            // Assert
+            expect(textbox).not.toHaveFocus();
+        });
+    });
+
+    it("should call onInteractWithWidget when internal widget interacted with", () => {
+        // Arrange
+        const onInteractWithWidget = jest.fn();
+
+        render(
+            <RenderStateRoot>
+                <Perseus.Renderer
+                    content={question1.content}
+                    images={question1.images}
+                    widgets={question1.widgets}
+                    problemNum={0}
+                    reviewMode={false}
+                    onInteractWithWidget={onInteractWithWidget}
+                />
+            </RenderStateRoot>,
+        );
+
+        // Act
+        userEvent.type(screen.getAllByRole("textbox")[0], "99");
+        jest.runOnlyPendingTimers();
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        // NOTE: The numeric-input that we typed into is in the second group.
+        expect(onInteractWithWidget).toHaveBeenCalledWith("group 2");
+    });
+
+    it("should return contained renderer's getUserInput", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+        userEvent.type(screen.getAllByRole("textbox")[0], "99");
+
+        // Act
+        const userInput = renderer.getUserInput();
+
+        // Assert
+        expect(userInput).toMatchInlineSnapshot(`
+            Array [
+              Array [
+                Object {
+                  "choicesSelected": Array [
+                    false,
+                    false,
+                    false,
+                    false,
+                    false,
+                  ],
+                },
+              ],
+              Array [
+                Object {
+                  "currentValue": "99",
+                },
+                Object {
+                  "currentValue": "",
+                },
+                null,
+              ],
+            ]
+        `);
+    });
+
+    it("should return contained renderer's getSerializedState", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+        userEvent.type(screen.getAllByRole("textbox")[0], "99");
+
+        // Act
+        const state = renderer.getSerializedState();
+
+        // Assert
+        expect(state).toMatchInlineSnapshot(`
+            Object {
+              "group 1": Object {
+                "radio 1": Object {
+                  "choices": Array [
+                    Object {
+                      "content": "$45$",
+                      "correct": false,
+                      "originalIndex": 0,
+                    },
+                    Object {
+                      "content": "$42$",
+                      "correct": false,
+                      "originalIndex": 1,
+                    },
+                    Object {
+                      "clue": "Here's a clue, this isn't the correct answer!",
+                      "content": "$30$",
+                      "correct": false,
+                      "originalIndex": 2,
+                    },
+                    Object {
+                      "content": "$18$",
+                      "correct": false,
+                      "originalIndex": 3,
+                    },
+                    Object {
+                      "content": "$15$",
+                      "correct": true,
+                      "originalIndex": 4,
+                    },
+                  ],
+                  "countChoices": undefined,
+                  "deselectEnabled": undefined,
+                  "hasNoneOfTheAbove": false,
+                  "multipleSelect": false,
+                  "numCorrect": 1,
+                  "selectedChoices": Array [
+                    false,
+                    false,
+                    false,
+                    false,
+                    true,
+                  ],
+                },
+              },
+              "group 2": Object {
+                "image 1": Object {
+                  "alt": "A number line labeled 200 to 300 with tick marks at every 5 units. The tick marks at 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, and 300 are labeled. A red circle labeled A is between 220 tick mark and 230 tick mark.",
+                  "backgroundImage": Object {
+                    "height": 80,
+                    "url": "web+graphie://ka-perseus-graphie.s3.amazonaws.com/3351ccf19e60c28a1d08664f5c16defa76ed0348",
+                    "width": 380,
+                  },
+                  "box": Array [
+                    380,
+                    80,
+                  ],
+                  "caption": "",
+                  "labels": Array [],
+                  "range": Array [
+                    Array [
+                      0,
+                      10,
+                    ],
+                    Array [
+                      0,
+                      10,
+                    ],
+                  ],
+                  "static": false,
+                  "title": "",
+                },
+                "numeric-input 1": Object {
+                  "answerForms": Array [],
+                  "coefficient": false,
+                  "currentValue": "99",
+                  "labelText": "value rounded to the nearest ten",
+                  "multipleNumberInput": false,
+                  "rightAlign": false,
+                  "size": "normal",
+                  "static": false,
+                },
+                "numeric-input 2": Object {
+                  "answerForms": Array [],
+                  "coefficient": false,
+                  "labelText": "value rounded to the nearest hundred",
+                  "multipleNumberInput": false,
+                  "rightAlign": false,
+                  "size": "normal",
+                  "static": false,
+                },
+              },
+              "radio 1": Object {
+                "choices": Array [
+                  Object {
+                    "content": "",
+                    "correct": false,
+                    "originalIndex": 0,
+                  },
+                  Object {
+                    "content": "",
+                    "correct": false,
+                    "originalIndex": 1,
+                  },
+                  Object {
+                    "content": "",
+                    "correct": false,
+                    "originalIndex": 2,
+                  },
+                  Object {
+                    "content": "",
+                    "correct": false,
+                    "originalIndex": 3,
+                  },
+                  Object {
+                    "content": "",
+                    "correct": true,
+                    "originalIndex": 4,
+                  },
+                ],
+                "countChoices": undefined,
+                "deselectEnabled": undefined,
+                "hasNoneOfTheAbove": false,
+                "multipleSelect": false,
+                "numCorrect": 1,
+                "selectedChoices": Array [
+                  false,
+                  false,
+                  false,
+                  false,
+                  true,
+                ],
+              },
+            }
+        `);
+    });
+
+    it("should be able to restore serialized state", () => {
+        // This test checks the state restoration by serializing state with one
+        // renderer and then restore it to a different one.
+
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+        userEvent.click(screen.getAllByRole("radio")[4]);
+        userEvent.type(screen.getAllByRole("textbox")[0], "1000");
+        userEvent.type(screen.getAllByRole("textbox")[1], "9999");
+
+        const state = renderer.getSerializedState();
+        cleanup(); // Resets the DOM
+
+        const {renderer: renderer1} = renderQuestion(question1);
+
+        // Act
+        renderer1.restoreSerializedState(state);
+
+        // Assert
+        expect(screen.getAllByRole("radio")[4]).toBeChecked();
+        expect(screen.getAllByRole("textbox")[0]).toHaveValue("1000");
+        expect(screen.getAllByRole("textbox")[1]).toHaveValue("9999");
+    });
+
+    it("should return score from contained Renderer", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+        // Answer all widgets correctly
+        userEvent.click(screen.getAllByRole("radio")[4]);
+        userEvent.type(screen.getAllByRole("textbox")[0], "230");
+        userEvent.type(screen.getAllByRole("textbox")[1], "200");
+
+        const guessAndScore = renderer.guessAndScore();
+
+        // Assert
+        expect(guessAndScore).toMatchInlineSnapshot(`
+            Array [
+              Array [
+                Array [
+                  Object {
+                    "choicesSelected": Array [
+                      false,
+                      false,
+                      false,
+                      false,
+                      true,
+                    ],
+                    "countChoices": false,
+                    "noneOfTheAboveIndex": null,
+                    "noneOfTheAboveSelected": false,
+                    "numCorrect": 1,
+                  },
+                ],
+                Array [
+                  Object {
+                    "currentValue": "230",
+                  },
+                  Object {
+                    "currentValue": "200",
+                  },
+                  null,
+                ],
+              ],
+              Object {
+                "earned": 3,
+                "message": null,
+                "total": 3,
+                "type": "points",
+              },
+            ]
+        `);
+    });
+
+    it("should return input paths from contained Renderer", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+
+        // Act
+        const paths = renderer.getInputPaths();
+
+        // Assert
+        expect(paths).toMatchInlineSnapshot(`
+            Array [
+              Array [
+                "group 2",
+                "numeric-input 1",
+              ],
+              Array [
+                "group 2",
+                "numeric-input 2",
+              ],
+            ]
+        `);
+    });
+
+    it("should set value and call callback for input path", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+        const cb = jest.fn();
+
+        // Act
+        renderer.setInputValue(["group 2", "numeric-input 2"], "2021", cb);
+        jest.runOnlyPendingTimers(); // callback occurs after the next render
+
+        // Assert
+        expect(screen.getAllByRole("textbox")[1]).toHaveValue("2021");
+        expect(cb).toHaveBeenCalled();
+    });
+
+    it("should show rationales for contained widgets", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+        userEvent.click(screen.getAllByRole("radio")[2]); // Incorrect!
+
+        // Act
+        renderer.showRationalesForCurrentlySelectedChoices();
+
+        // Assert
+        expect(
+            screen.getByText("Here's a clue, this isn't the correct answer!"),
+        ).toBeInTheDocument();
+    });
+
+    describe("traverseChildWidgets", () => {
+        it("should call the contentCallback for each top-level piece of content", () => {
+            // Arrange
+            const contentCallback = jest.fn();
+
+            // Act
+            traverse(question1, contentCallback);
+
+            // Assert
+            // This callback does not get deep traversal!
+            expect(contentCallback).toHaveBeenCalledTimes(3);
+        });
+
+        it("should call the widgetCallback for every widget anywhere in the tree", () => {
+            // Arrange
+            const widgetIds = [];
+            const widgetCallback = (_, widgetId) => widgetIds.push(widgetId);
+
+            // Act
+            traverse(question1, null, widgetCallback);
+
+            // Assert
+            expect(widgetIds).toEqual([
+                "radio 1",
+                "group 1",
+                "image 1",
+                "numeric-input 1",
+                "numeric-input 2",
+                "group 2",
+                "radio 1",
+            ]);
+        });
+
+        it("should call the optionsCallback for each top-level widget options", () => {
+            // Arrange
+            const optionsCallback = jest.fn();
+
+            // Act
+            traverse(question1, null, null, optionsCallback);
+
+            // Assert
+            // This callback does not get deep traversal!
+            expect(optionsCallback).toHaveBeenCalledTimes(3);
+        });
+    });
+});

package/src/widgets/__tests__/iframe_test.jsx

@@ -0,0 +1,47 @@
+// @flow
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import * as Dependencies from "../../dependencies.js";
+import {question1} from "../__testdata__/iframe_testdata.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+import type {APIOptions} from "../../types.js";
+
+describe("iframe widget", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should snapshot", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should snapshot on mobile", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: true,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first mobile render");
+    });
+
+    //There isn't testable behavior for this widget
+});

package/src/widgets/__tests__/image_test.jsx

@@ -0,0 +1,65 @@
+// @flow
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import * as Dependencies from "../../dependencies.js";
+import {isAccessible} from "../../widgets.js";
+import {question} from "../__testdata__/image_testdata.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+import type {
+    ImageWidget,
+    PerseusImageWidgetOptions,
+} from "../../perseus-types.js";
+import type {APIOptions} from "../../types.js";
+
+describe.each([true, false])("image widget - isMobile %b", (isMobile) => {
+    const apiOptions: APIOptions = {isMobile};
+
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should snapshot", () => {
+        // Arrange
+
+        // Act
+        const {container} = renderQuestion(question, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should be unanswerable", () => {
+        // Arrange
+
+        // Act
+        const {renderer} = renderQuestion(question, apiOptions);
+
+        // Assert
+        expect(renderer).toHaveBeenAnsweredIncorrectly();
+    });
+
+    it("should be accessible if background has 'alt' prop", () => {
+        // Arrange, Act, and Assert
+        expect(isAccessible(question.widgets["image 1"])).toBeTrue();
+    });
+
+    it("should be inaccessible if background is missing 'alt' prop", () => {
+        // Arrange
+        const imageWidget = ((question.widgets["image 1"]: any): ImageWidget);
+        const options = ((imageWidget.options: any): PerseusImageWidgetOptions);
+        const inaccessibleWidgetInfo = ({
+            ...imageWidget,
+            options: {
+                ...options,
+                alt: "",
+            },
+        }: ImageWidget);
+
+        // Act and Assert
+        expect(isAccessible(inaccessibleWidgetInfo)).toBeFalse();
+    });
+});