@khanacademy/perseus 19.1.4 → 19.1.6

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

@@ -1,198 +0,0 @@
-import {screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-// 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";
-import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/explanation.testdata";
-import ExplanationWidgetExports from "../explanation";
-
-import {renderQuestion} from "./renderQuestion";
-
-import type {PerseusExplanationWidgetOptions} from "../../perseus-types";
-
-describe("Explanation", function () {
-    beforeEach(() => {
-        // We mock out `console.error` because the explanation widget adds
-        // `javascript:void(0);` to the `onClick` handler which triggers an
-        // error in our test env.
-        jest.spyOn(console, "error").mockImplementation(() => {});
-
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should snapshot", () => {
-        // Arrange and Act
-        const {container} = renderQuestion(question1);
-
-        // Assert
-        expect(container).toMatchSnapshot("initial render");
-    });
-
-    it("should snapshot when expanded", () => {
-        // Arrange
-        const {container} = renderQuestion(question1);
-
-        // Act
-        userEvent.click(screen.getByRole("button"));
-
-        // Assert
-        expect(container).toMatchSnapshot("expanded");
-    });
-
-    it("should snapshot for mobile", () => {
-        // Arrange and Act
-        const {container} = renderQuestion(question1, {
-            isMobile: true,
-        });
-
-        // Assert
-        expect(container).toMatchSnapshot("initial render");
-    });
-
-    it("should snapshot for mobile when expanded", () => {
-        // Arrange
-        const {container} = renderQuestion(question1, {
-            isMobile: true,
-        });
-
-        // Act
-        userEvent.click(screen.getByRole("button"));
-
-        // Assert
-        expect(container).toMatchSnapshot("expanded");
-    });
-
-    it("should snapshot for article", () => {
-        // Arrange and Act
-        const {container} = renderQuestion(question1, {
-            isArticle: true,
-        });
-
-        // Assert
-        expect(container).toMatchSnapshot("initial render");
-    });
-
-    it("should snapshot for article when expanded", () => {
-        // Arrange
-        const {container} = renderQuestion(question1, {
-            isArticle: true,
-        });
-
-        // Act
-        userEvent.click(screen.getByRole("button"));
-
-        // Assert
-        expect(container).toMatchSnapshot("expanded");
-    });
-
-    it("should snapshot for article+mobile", () => {
-        // Arrange and Act
-        const {container} = renderQuestion(question1, {
-            isMobile: true,
-            isArticle: true,
-        });
-
-        // Assert
-        expect(container).toMatchSnapshot("initial render");
-    });
-
-    it("should snapshot for article+mobile when expanded", () => {
-        // Arrange
-        const {container} = renderQuestion(question1, {
-            isMobile: true,
-            isArticle: true,
-        });
-
-        // Act
-        userEvent.click(screen.getByRole("button"));
-
-        // Assert
-        expect(container).toMatchSnapshot("expanded");
-    });
-
-    it("can be expanded", function () {
-        // Arrange
-        renderQuestion(question1);
-
-        // Act
-        const expandLink = screen.getByRole("button", {expanded: false});
-        userEvent.click(expandLink);
-
-        // Assert
-        // get asserts if it doesn't find a single matching element
-        expect(screen.getByText("This is an explanation")).toBeVisible();
-    });
-
-    it("can be collapsed", function () {
-        // Arrange
-        renderQuestion(question1);
-
-        // Act
-        const expandLink = screen.getByRole("button", {expanded: false});
-        userEvent.click(expandLink); // expand and then
-        const collapseLink = screen.getByRole("button", {expanded: true});
-        userEvent.click(collapseLink); // collapse
-
-        // Assert
-        expect(screen.queryByText("This is an explanation")).toBeNull();
-    });
-
-    it("should return an empty object for getUserInput()", () => {
-        // Arrange
-        const {renderer} = renderQuestion(question1);
-
-        // Act
-        const userInput = renderer.getUserInput();
-
-        // Assert
-        expect(userInput).toMatchInlineSnapshot(`
-            [
-              {},
-            ]
-        `);
-    });
-
-    it("should return a zero score for simpleValidate()", () => {
-        // Arrange
-        const {renderer} = renderQuestion(question1);
-
-        // Act
-        const score = renderer.scoreWidgets();
-
-        // Assert
-        expect(score).toMatchInlineSnapshot(`
-            {
-              "explanation 1": {
-                "earned": 0,
-                "message": null,
-                "total": 0,
-                "type": "points",
-              },
-            }
-        `);
-    });
-
-    describe("static validate", () => {
-        it("should always return 0 points", () => {
-            const result = ExplanationWidgetExports.widget.validate(
-                {},
-                question1.widgets["explanation 1"]
-                    .options as PerseusExplanationWidgetOptions,
-            );
-
-            expect(result).toMatchInlineSnapshot(`
-                {
-                  "earned": 0,
-                  "message": null,
-                  "total": 0,
-                  "type": "points",
-                }
-            `);
-        });
-    });
-});

package/src/widgets/__tests__/expression-mobile.test.tsx

@@ -1,363 +0,0 @@
-import "@testing-library/jest-dom";
-import {
-    KeypadContext,
-    StatefulKeypadContextProvider,
-    MobileKeypad,
-    mathQuillInstance,
-} from "@khanacademy/math-input";
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {
-    fireEvent,
-    render,
-    screen,
-    waitFor,
-    within,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-
-import {
-    testDependencies,
-    testDependenciesV2,
-} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import WrappedServerItemRenderer from "../../server-item-renderer";
-import {registerWidget} from "../../widgets";
-import {expressionItem2} from "../__testdata__/expression.testdata";
-import ExpressionExport from "../expression";
-
-const MQ = mathQuillInstance;
-
-function RendererWithContext({item}) {
-    return (
-        <KeypadContext.Consumer>
-            {({keypadElement}) => {
-                return (
-                    <WrappedServerItemRenderer
-                        apiOptions={{
-                            isMobile: true,
-                            customKeypad: true,
-                        }}
-                        item={item}
-                        problemNum={0}
-                        reviewMode={false}
-                        dependencies={testDependenciesV2}
-                        keypadElement={keypadElement}
-                    />
-                );
-            }}
-        </KeypadContext.Consumer>
-    );
-}
-
-function KeypadWithContext() {
-    return (
-        <KeypadContext.Consumer>
-            {({setKeypadElement}) => {
-                return (
-                    <MobileKeypad
-                        onElementMounted={setKeypadElement}
-                        onDismiss={() => {}}
-                        onAnalyticsEvent={async () => {}}
-                    />
-                );
-            }}
-        </KeypadContext.Consumer>
-    );
-}
-
-function ConnectedRenderer({item = expressionItem2}) {
-    return (
-        <RenderStateRoot>
-            <StatefulKeypadContextProvider>
-                <RendererWithContext item={item} />
-                <KeypadWithContext />
-            </StatefulKeypadContextProvider>
-        </RenderStateRoot>
-    );
-}
-
-describe("expression mobile", () => {
-    beforeAll(() => {
-        registerWidget("expression", ExpressionExport);
-    });
-
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    afterEach(() => {
-        // The Renderer uses a timer to wait for widgets to complete rendering.
-        // If we don't spin the timers here, then the timer fires in the test
-        // _after_ and breaks it because we do setState() in the callback,
-        // and by that point the component has been unmounted.
-        jest.runOnlyPendingTimers();
-    });
-
-    it("renders input", () => {
-        render(<ConnectedRenderer />);
-
-        expect(
-            screen.getByLabelText(
-                "Math input box Tap with one or two fingers to open keyboard",
-            ),
-        ).toBeInTheDocument();
-    });
-
-    it("shows the keypad after input interaction", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-    });
-
-    it("shows keypad after focused input interaction", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("tab", {name: "Dismiss"}));
-
-        // wait for the keypad to close
-        await waitFor(() =>
-            expect(screen.queryByRole("button", {name: "1"})).toBeNull(),
-        );
-
-        fireEvent.touchStart(input);
-
-        // confirm that the keypad has reopened
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-    });
-
-    it("is possible to use the keypad", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("button", {name: "1"}));
-
-        // MathQuill is problematic,
-        // this is the only way I know how to test the "input"
-        const mathquillInput =
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName("mq-root-block")[0] as HTMLElement;
-        const span1 = within(mathquillInput).getByText("1");
-
-        expect(span1).toBeVisible();
-    });
-
-    it("is possible to type many numbers", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        const testNumbers = [8, 6, 7, 5, 3, 0, 9];
-        testNumbers.forEach((num) => {
-            userEvent.click(screen.getByRole("button", {name: `${num}`}));
-        });
-
-        // MathQuill is problematic,
-        // this is the only way I know how to test the "input"
-        const mathquillInput =
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName("mq-root-block")[0] as HTMLElement;
-
-        testNumbers.forEach((num) => {
-            const span = within(mathquillInput).getByText(`${num}`);
-
-            expect(span).toBeVisible();
-        });
-    });
-
-    it("can handle symbols", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("button", {name: "4"}));
-        userEvent.click(screen.getByRole("button", {name: "2"}));
-        userEvent.click(screen.getByRole("button", {name: "Percent"}));
-
-        // MathQuill is problematic,
-        // this is the only way I know how to test the "input"
-        const mathquillInput =
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName("mq-root-block")[0] as HTMLElement;
-        const span4 = within(mathquillInput).getByText("4");
-        const span2 = within(mathquillInput).getByText("2");
-        const spanPercent = within(mathquillInput).getByText("%");
-
-        expect(span4).toBeVisible();
-        expect(span2).toBeVisible();
-        expect(spanPercent).toBeVisible();
-    });
-
-    it("can do arithmetic", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("button", {name: "4"}));
-        userEvent.click(screen.getByRole("button", {name: "Plus"}));
-        userEvent.click(screen.getByRole("button", {name: "2"}));
-
-        // MathQuill is problematic,
-        // this is the only way I know how to test the "input"
-        const mathquillInput =
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName("mq-root-block")[0] as HTMLElement;
-        const span4 = within(mathquillInput).getByText("4");
-        const spanPlus = within(mathquillInput).getByText("+");
-        const span2 = within(mathquillInput).getByText("2");
-
-        expect(span4).toBeVisible();
-        expect(spanPlus).toBeVisible();
-        expect(span2).toBeVisible();
-    });
-
-    it("can navigate to operators page", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        expect(screen.getByRole("button", {name: "Equals sign"})).toBeVisible();
-    });
-
-    it("can navigate to geometry page", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("tab", {name: "Geometry"}));
-        expect(screen.getByRole("button", {name: "Sine"})).toBeVisible();
-    });
-
-    it("can navigate to extras page", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        expect(screen.getByRole("button", {name: "x"})).toBeVisible();
-    });
-
-    it("can write a full equation", async () => {
-        render(<ConnectedRenderer />);
-
-        const input = screen.getByLabelText(
-            "Math input box Tap with one or two fingers to open keyboard",
-        );
-
-        fireEvent.touchStart(input);
-
-        // waiting because `visibility` is animated
-        await waitFor(() =>
-            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
-        );
-
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "x"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
-        userEvent.click(screen.getByRole("tab", {name: "Geometry"}));
-        userEvent.click(screen.getByRole("button", {name: "Sine"}));
-        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
-        userEvent.click(screen.getByRole("button", {name: "9"}));
-
-        // MathQuill is problematic,
-        // this is how to get the value of the input directly from MQ
-        const mathquillInstance = MQ(
-            // eslint-disable-next-line testing-library/no-node-access
-            document.getElementsByClassName(
-                "mq-editable-field",
-            )[0] as HTMLElement,
-        );
-
-        expect(mathquillInstance?.latex()).toBe("x=\\sin\\left(9\\right)");
-    });
-});