@khanacademy/perseus 19.1.4 → 19.1.6

package/src/widgets/__tests__/interactive-graph.test.ts

@@ -1,106 +0,0 @@
-import {describe, beforeEach, it} from "@jest/globals";
-
-import {clone} from "../../../../../testing/object-utils";
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import {ApiOptions} from "../../perseus-api";
-import {questionsAndAnswers} from "../__testdata__/interactive-graph.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-import type {Coord} from "../../interactive2/types";
-import type {PerseusRenderer} from "../../perseus-types";
-import type Renderer from "../../renderer";
-import type {APIOptions} from "../../types";
-
-const updateWidgetState = (renderer: Renderer, widgetId: string, update) => {
-    const state = clone(renderer.getSerializedState());
-    update(state[widgetId]);
-    renderer.restoreSerializedState(state);
-};
-
-const blankOptions: APIOptions = Object.freeze(ApiOptions.defaults);
-
-describe("interactive-graph widget", function () {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    describe.each(questionsAndAnswers)(
-        "question",
-        (
-            question: PerseusRenderer,
-            correct: ReadonlyArray<Coord>,
-            incorrect: ReadonlyArray<Coord>,
-        ) => {
-            it("Should accept the right answer", () => {
-                // Arrange
-                const {renderer} = renderQuestion(question, blankOptions);
-
-                // Act
-                // NOTE: This isn't acting on the UI as a user would, which is
-                // a weakness of these tests. Because this widget is designed for
-                // pointer-dragging, jsdom (which doesn't support getBoundingClientRect
-                // or other position-based node attributes) is insufficient to model
-                // drag & drop behavior.
-                // We'll want to use cypress tests or similar to ensure this widget
-                // works as expected.
-                updateWidgetState(
-                    renderer,
-                    "interactive-graph 1",
-                    (state) => (state.graph.coords = correct),
-                );
-
-                // Assert
-                expect(renderer).toHaveBeenAnsweredCorrectly();
-            });
-
-            it("Shoud render predictably", () => {
-                // Arrange
-                const {renderer, container} = renderQuestion(
-                    question,
-                    blankOptions,
-                );
-                expect(container).toMatchSnapshot("first render");
-
-                // Act
-                updateWidgetState(
-                    renderer,
-                    "interactive-graph 1",
-                    (state) => (state.graph.coords = correct),
-                );
-
-                // Assert
-                expect(container).toMatchSnapshot("after interaction");
-            });
-
-            it("should reject no interaction", () => {
-                // Arrange
-                const {renderer} = renderQuestion(question, blankOptions);
-
-                // Act
-                // no action
-
-                // Assert
-                expect(renderer).toHaveInvalidInput();
-            });
-
-            it("should reject an incorrect answer", () => {
-                // Arrange
-                const {renderer} = renderQuestion(question, blankOptions);
-
-                // Act
-                updateWidgetState(
-                    renderer,
-                    "interactive-graph 1",
-                    (state) => (state.graph.coords = incorrect),
-                );
-
-                // Assert
-                expect(renderer).toHaveBeenAnsweredIncorrectly();
-            });
-        },
-    );
-});

package/src/widgets/__tests__/matcher.test.tsx

@@ -1,176 +0,0 @@
-import * as React from "react";
-import "@testing-library/jest-dom";
-
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import {wait} from "../../../../../testing/wait";
-import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/matcher.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-import type {APIOptions} from "../../types";
-import type {Matcher} from "../matcher";
-
-describe("matcher widget", () => {
-    beforeEach(() => {
-        /*
-        Sortable misbehaves and sets state after the component has been
-        unmounted. This is existing behavior and its safer to leave the existing
-        implementation and swallow the warning in tests.
-        */
-        jest.spyOn(console, "warn").mockImplementation(() => {});
-        jest.spyOn(console, "error").mockImplementation(() => {});
-
-        jest.useRealTimers();
-
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            TeX: ({
-                children,
-                onRender: onLoad,
-            }: {
-                children: React.ReactNode;
-                onRender?: () => unknown;
-            }) => {
-                React.useLayoutEffect(() => {
-                    onLoad?.();
-                }, [onLoad]);
-                return <span className="tex-mock">{children}</span>;
-            },
-        });
-    });
-
-    it("should snapshot", async () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-        await wait();
-
-        // Assert
-        expect(container).toMatchSnapshot("first render");
-    });
-
-    it("should snapshot on mobile", async () => {
-        // Arrange
-        jest.useRealTimers();
-
-        const apiOptions: APIOptions = {
-            isMobile: true,
-        };
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-        await wait();
-
-        // Assert
-        expect(container).toMatchSnapshot("first mobile render");
-    });
-
-    it("can reorder options", async () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {container, renderer} = renderQuestion(question1, apiOptions);
-        await wait();
-
-        // Act
-        const matcher: Matcher = renderer.findWidgets("matcher 1")[0];
-
-        matcher.moveRightOptionToIndex(
-            "Rapid escalation of greenhouse gas emissions",
-            0,
-        );
-
-        matcher.moveLeftOptionToIndex(
-            "Average global temperatures will rise ",
-            0,
-        );
-
-        // Assert
-        expect(container).toMatchSnapshot("moved items");
-    });
-
-    it("can be answered correctly", async () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-        await wait();
-
-        const matcher: Matcher = renderer.findWidgets("matcher 1")[0];
-
-        // Put the right options in the correct order by repeatedly moving
-        // answers to the end of the list
-        [
-            "Medium-sized stars typically exist for roughly 10 billion years",
-            "The current trajectory of the Earth\u2019s tectonic plate movement",
-            "The life cycle of medium-sized stars includes a red giant stage and ends in a whimper as a white dwarf",
-            "Rapid escalation of greenhouse gas emissions",
-            "The current trajectory of the Milky Way galaxy and those in its immediate proximity",
-        ].forEach((option, index) => {
-            matcher.moveRightOptionToIndex(option, 4);
-        });
-
-        // Act
-        renderer.guessAndScore();
-
-        // assert
-        expect(renderer).toHaveBeenAnsweredCorrectly();
-    });
-
-    it("can be answered incorrectly", async () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-        await wait();
-
-        const matcher: Matcher = renderer.findWidgets("matcher 1")[0];
-
-        // Put the left options in reverse order
-        [
-            "Our Sun will run out of fuel and die in around 5 billion years ",
-            "Plate tectonics will rearrange the continents: the Pacific will narrow, bringing Australia closer to the Americas, and the Atlantic will expand to form the largest of the oceans ",
-            "Our Sun will run out of hydrogen, swell into a red giant, gobble up the inner rocky planets, and then collapse and die ",
-            "Average global temperatures will rise ",
-            "In 3 to 4 billion years, our galaxy will begin a slow collision with its closest large neighbor, Andromeda ",
-        ].forEach((option, index) => {
-            matcher.moveLeftOptionToIndex(option, 0);
-        });
-
-        // Act
-        renderer.guessAndScore();
-
-        // Assert
-        expect(renderer).toHaveBeenAnsweredIncorrectly();
-    });
-
-    it("is scored incorrect if the math renderer hasn't loaded yet", () => {
-        // Arrange: stub the TeX renderer to never call its onRender prop,
-        // which is how the matcher knows the math renderer is ready.
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            TeX: () => {
-                return null;
-            },
-        });
-
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-
-        // Act
-        renderer.guessAndScore();
-
-        // Assert
-        expect(renderer).toHaveBeenAnsweredIncorrectly();
-    });
-});

package/src/widgets/__tests__/matrix.test.ts

@@ -1,82 +0,0 @@
-import {screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/matrix.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-import type {APIOptions} from "../../types";
-
-describe("matrix 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");
-    });
-
-    it("can be answered correctly", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-
-        // Act
-        const correctAnswers = [5, -2, 1, 1, 1, 1, 7, -3, 3, 0, 0, -2];
-        screen.getAllByRole("textbox").forEach((textbox, index) => {
-            userEvent.paste(textbox, correctAnswers[index].toString());
-        });
-
-        renderer.guessAndScore();
-
-        // assert
-        expect(renderer).toHaveBeenAnsweredCorrectly();
-    });
-
-    it("can be answered incorrectly", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-
-        // Act
-        screen.getAllByRole("textbox").forEach((textbox, index) => {
-            userEvent.paste(textbox, "1");
-        });
-
-        renderer.guessAndScore();
-
-        // Assert
-        expect(renderer).toHaveBeenAnsweredIncorrectly();
-    });
-});

package/src/widgets/__tests__/number-line.test.ts

@@ -1,79 +0,0 @@
-import "@testing-library/jest-dom";
-
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/number-line.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-import type {APIOptions} from "../../types";
-
-describe("number-line widget", () => {
-    beforeEach(() => {
-        // This module complains but doesn't have a real problem
-        // with displaying the graphie
-        jest.spyOn(console, "log").mockImplementation(() => {});
-        jest.spyOn(console, "error").mockImplementation(() => {});
-
-        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
-        jest.useRealTimers();
-
-        const apiOptions: APIOptions = {
-            isMobile: true,
-        };
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-
-        // Assert
-        expect(container).toMatchSnapshot("first mobile render");
-    });
-
-    it("can be answered correctly", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-
-        // Act
-        const [numberLine] = renderer.findWidgets("number-line 1");
-        numberLine.movePosition(-2.5);
-
-        // assert
-        expect(renderer).toHaveBeenAnsweredCorrectly();
-    });
-
-    it("can be answered incorrectly", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-
-        // Act
-        const [numberLine] = renderer.findWidgets("number-line 1");
-        numberLine.movePosition(3.5);
-        // Assert
-        expect(renderer).toHaveBeenAnsweredIncorrectly();
-    });
-});