@khanacademy/math-input 17.0.4 → 17.0.5

package/src/components/keypad/__tests__/keypad-button.test.tsx

@@ -1,84 +0,0 @@
-import {render, screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-import "@testing-library/jest-dom";
-
-import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-button";
-
-describe("<KeypadButton />", () => {
-    it("uses the aria label from the key config", () => {
-        // Arrange
-        render(
-            <KeypadButton
-                onClickKey={() => {}}
-                keyConfig={Keys.LEFT_PAREN}
-                coord={[0, 0]}
-            />,
-        );
-
-        // Assert
-        expect(
-            screen.getByRole("button", {name: "Left parenthesis"}),
-        ).toBeInTheDocument();
-    });
-
-    it("handles onClickKey callback with click", () => {
-        // Arrange
-        // persist event to prevent React from releasing/nullifying before assertion
-        const mockClickKeyCallback = jest.fn((_, event) => event.persist());
-        render(
-            <KeypadButton
-                onClickKey={mockClickKeyCallback}
-                keyConfig={Keys.LEFT_PAREN}
-                coord={[0, 0]}
-            />,
-        );
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Left parenthesis"}));
-
-        // Assert
-        expect(mockClickKeyCallback).toHaveBeenCalledWith(
-            "LEFT_PAREN",
-            expect.objectContaining({
-                type: "click",
-                detail: 1,
-            }),
-        );
-    });
-
-    it("handles onClickKey callback with keyboard press", () => {
-        // Arrange
-        // persist event to prevent React from releasing/nullifying before assertion
-        const mockClickKeyCallback = jest.fn((_, event) => event.persist());
-        render(
-            <KeypadButton
-                onClickKey={mockClickKeyCallback}
-                keyConfig={Keys.RIGHT_PAREN}
-                coord={[0, 0]}
-            />,
-        );
-
-        // Act
-        screen.getByRole("button", {name: "Right parenthesis"}).focus();
-        userEvent.keyboard("{enter}");
-
-        // Assert
-        expect(mockClickKeyCallback).toHaveBeenCalledWith(
-            "RIGHT_PAREN",
-            // In the browser, "enter" and "space" trigger a click event with detail 0.
-            //   However, there is a bug in this version (13.5) of RTL that prevents
-            //   "keypress" from being fired, which handles the click event.
-            //   https://github.com/testing-library/user-event/blob/5d946d51d643f0ef7e7730fa527b7ca96e330907/src/keyboard/plugins/functional.ts#L99
-            //   https://github.com/testing-library/user-event/issues/766
-            //   The only event fired is `keyDown`, which is inconsistent with the
-            //   browser. If you're reading this and we have upgraded to 14+, please
-            //   uncomment the `type` assertion below.
-            expect.objectContaining({
-                // type: "click",
-                detail: 0,
-            }),
-        );
-    });
-});

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -1,304 +0,0 @@
-import Color from "@khanacademy/wonder-blocks-color";
-import {Popover} from "@khanacademy/wonder-blocks-popover";
-import {render, screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-
-import "@testing-library/jest-dom";
-
-import {createMathField} from "../../input/mathquill-instance";
-import keyTranslator from "../../key-handlers/key-translator";
-import Keypad from "../index";
-
-import type Key from "../../../data/keys";
-import type {MathFieldInterface} from "../../input/mathquill-types";
-import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
-
-type Props = {
-    onChangeMathInput: (mathInputTex: string) => void;
-    keypadClosed?: boolean;
-    onAnalyticsEvent?: AnalyticsEventHandlerFn;
-};
-
-function V2KeypadWithMathquill(props: Props) {
-    const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
-    const [mathField, setMathField] = React.useState<MathFieldInterface>();
-    const {onChangeMathInput, keypadClosed, onAnalyticsEvent} = props;
-    const [keypadOpen, setKeypadOpen] = React.useState<boolean>(!keypadClosed);
-
-    React.useEffect(() => {
-        if (!mathField && mathFieldWrapperRef.current) {
-            const mathFieldInstance = createMathField(
-                mathFieldWrapperRef.current,
-                (baseConfig) => {
-                    return {
-                        ...baseConfig,
-                        handlers: {
-                            edit: (mathField) => {
-                                onChangeMathInput(mathField.latex());
-                            },
-                        },
-                    };
-                },
-            );
-            setMathField(mathFieldInstance);
-        }
-    }, [mathField, onChangeMathInput]);
-
-    function handleClickKey(key: Key) {
-        if (!mathField) {
-            return;
-        }
-
-        if (key === "DISMISS") {
-            setKeypadOpen(false);
-        }
-
-        const mathFieldCallback = keyTranslator[key];
-        if (mathFieldCallback) {
-            mathFieldCallback(mathField, key);
-        }
-    }
-
-    return (
-        <div style={{maxWidth: "400px", margin: "2em"}}>
-            <Popover
-                content={
-                    <div>
-                        <Keypad
-                            extraKeys={["a", "b", "c"]}
-                            onClickKey={handleClickKey}
-                            advancedRelations
-                            basicRelations
-                            divisionKey
-                            logarithms
-                            convertDotToTimes
-                            preAlgebra
-                            trigonometry
-                            onAnalyticsEvent={
-                                onAnalyticsEvent
-                                    ? onAnalyticsEvent
-                                    : async () => {}
-                            }
-                            showDismiss
-                        />
-                    </div>
-                }
-                dismissEnabled
-                opened={keypadOpen}
-            >
-                <div
-                    style={{
-                        width: "100%",
-                        marginBottom: "1em",
-                        border: `1px solid ${Color.offBlack16}`,
-                    }}
-                    ref={mathFieldWrapperRef}
-                />
-            </Popover>
-            <button
-                aria-label="Keypad toggle"
-                onClick={() => setKeypadOpen(!keypadOpen)}
-            >
-                {keypadOpen ? "close keypad" : "open keypad"}
-            </button>
-        </div>
-    );
-}
-
-describe("Keypad v2 with MathQuill", () => {
-    it("can write the Pythagorean theorem (simple)", () => {
-        // Arrange
-        const mockMathInputCallback = jest.fn();
-        render(
-            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
-        );
-
-        // Act
-
-        // a^2
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "a"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        // +
-        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
-        userEvent.click(screen.getByRole("button", {name: "Plus"}));
-
-        // b^2 =
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
-
-        // c^2
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "c"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        // Assert
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
-            "a^{2}+b^{2}=c^{2}",
-        );
-    });
-
-    it("can write the Pythagorean theorem (complex)", () => {
-        // Arrange
-        const mockMathInputCallback = jest.fn();
-        render(
-            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
-        );
-
-        // Act
-
-        // c = /Square root
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "c"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
-        userEvent.click(screen.getByRole("button", {name: "Square root"}));
-
-        // a^2
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "a"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        // +
-        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
-        userEvent.click(screen.getByRole("button", {name: "Plus"}));
-
-        // b^2
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        // Assert
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
-            "c=\\sqrt{a^{2}+b^{2}}",
-        );
-    });
-
-    it("writes the Pythagorean theorem using typing/clicking together", () => {
-        // Arrange
-        const mockMathInputCallback = jest.fn();
-        render(
-            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
-        );
-
-        // Act
-
-        // Argument is empty because mathquill generates textarea w/o label
-        userEvent.type(screen.getByRole("textbox"), "a");
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        userEvent.type(screen.getByRole("textbox"), "+");
-
-        // b^2
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-        userEvent.type(screen.getByRole("textbox"), "=c^{2}");
-
-        // Assert
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
-            "a^{2}+b^{2}=c^{2}",
-        );
-    });
-
-    it("deletes from the input using the backspace button", () => {
-        // Arrange
-        const mockMathInputCallback = jest.fn();
-        render(
-            <V2KeypadWithMathquill onChangeMathInput={mockMathInputCallback} />,
-        );
-
-        // Act
-
-        // a^2
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "a"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        // +
-        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
-        userEvent.click(screen.getByRole("button", {name: "Plus"}));
-
-        // b^2
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        // =c^2
-        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
-        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
-        userEvent.click(screen.getByRole("button", {name: "c"}));
-        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
-        userEvent.click(screen.getByRole("button", {name: "Square"}));
-
-        // Assert
-        // make sure the formula was typed correctly
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
-            "a^{2}+b^{2}=c^{2}",
-        );
-
-        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
-        // delete: need 14 backspaces in MathQuill to delete `a^2+b^2=c^2`
-        for (let i = 0; i < 14; i++) {
-            userEvent.click(screen.getByRole("button", {name: "Delete"}));
-        }
-
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith("");
-    });
-
-    // Keypad event tests
-    it("fires the keypad open event on open", () => {
-        // Arrange
-        const mockAnalyticsEventHandler = jest.fn();
-        render(
-            <V2KeypadWithMathquill
-                onChangeMathInput={() => {}}
-                keypadClosed={true}
-                onAnalyticsEvent={mockAnalyticsEventHandler}
-            />,
-        );
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Keypad toggle"}));
-
-        // Assert
-        expect(mockAnalyticsEventHandler).toHaveBeenLastCalledWith({
-            type: "math-input:keypad-opened",
-            payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
-        });
-    });
-
-    // Keypad event tests
-    it("fires the keypad open event on close", () => {
-        // Arrange
-        const mockAnalyticsEventHandler = jest.fn();
-        render(
-            <V2KeypadWithMathquill
-                onChangeMathInput={() => {}}
-                onAnalyticsEvent={mockAnalyticsEventHandler}
-            />,
-        );
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Keypad toggle"}));
-
-        // Assert
-        expect(mockAnalyticsEventHandler).toHaveBeenLastCalledWith({
-            type: "math-input:keypad-closed",
-            payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
-        });
-    });
-});

package/src/components/keypad/__tests__/keypad-v2.cypress.ts

@@ -1,16 +0,0 @@
-import renderSingleKeypad from "../../../../../../testing/render-keypad-with-cypress";
-
-import tabs from "./test-data-tabs";
-
-describe("Keypad v2", () => {
-    tabs.forEach((tab) => {
-        it(`switches to the correct tab: ${tab.name}`, () => {
-            renderSingleKeypad();
-
-            // currently clicking on the bottom left due to button re-rendering
-            // after mousedown but before mouseup (only in Cypress)
-            cy.get('[aria-label="' + tab.name + '"]').click("bottomLeft");
-            cy.get('[aria-label="' + tab.label + '"]').should("exist");
-        });
-    });
-});