@khanacademy/perseus 11.4.0 → 11.5.1

package/dist/widgets/expression.d.ts

@@ -1,9 +1,8 @@
-import { KeypadType } from "@khanacademy/math-input";
 import * as React from "react";
 import { useDependencies } from "../dependencies";
 import type { PerseusExpressionWidgetOptions } from "../perseus-types";
 import type { PerseusScore, WidgetProps } from "../types";
-import type { Keys as Key } from "@khanacademy/math-input";
+import type { Keys as Key, KeypadConfiguration } from "@khanacademy/math-input";
 type InputPath = ReadonlyArray<string>;
 type Rubric = PerseusExpressionWidgetOptions;
 type RenderProps = {
@@ -79,10 +78,7 @@ export declare class Expression extends React.Component<Props, ExpressionState>
  *       to be included as keys on the keypad. These are scraped from the answer
  *       forms.
  */
-declare const keypadConfigurationForProps: (widgetOptions: PerseusExpressionWidgetOptions) => {
-    keypadType: KeypadType;
-    extraKeys: string[];
-};
+declare const keypadConfigurationForProps: (widgetOptions: PerseusExpressionWidgetOptions) => KeypadConfiguration;
 declare const _default: Readonly<{
     name: string;
     displayName: string;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "11.4.0",
+    "version": "11.5.1",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^12.1.1",
+        "@khanacademy/math-input": "^13.1.0",
         "@khanacademy/perseus-core": "1.1.0",
         "@khanacademy/perseus-linter": "^0.3.4",
         "@khanacademy/pure-markdown": "^0.2.6",
@@ -57,6 +57,7 @@
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#32d9f351aaa68537170b3120a52e99b8def3a2c3",
         "perseus-build-settings": "^0.2.0",
         "prop-types": "^15.6.1",
         "react": "16.14.0",

package/src/widgets/__stories__/expression.stories.tsx

@@ -11,6 +11,7 @@ import expressionExport from "../expression";
 import TestKeypadContextWrapper from "./test-keypad-context-wrapper";
 
 import type {PerseusItem} from "../../perseus-types";
+import type {Keys as Key} from "@khanacademy/math-input";
 
 type StoryArgs = {
     customKeypad: boolean;
@@ -34,8 +35,11 @@ const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
                     return (
                         <ItemRendererWithDebugUI
                             item={props.item}
+                            // Hardcoding the V2 Keypad to true as the Storybook Args
+                            // were not working.
                             apiOptions={{
                                 customKeypad: props.customKeypad,
+                                useV2Keypad: true,
                             }}
                         />
                     );
@@ -63,7 +67,7 @@ export const DesktopKitchenSink = (args: StoryArgs): React.ReactElement => {
 
     const keypadConfiguration = {
         keypadType: KeypadType.EXPRESSION,
-        extraKeys: ["x", "y", "z"],
+        extraKeys: ["x", "y", "z"] as Key[],
     };
 
     return (

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

@@ -0,0 +1,346 @@
+import "@testing-library/jest-dom";
+import {KeypadContext, MobileKeypad} 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 MathQuill from "mathquill";
+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";
+
+import type {KeypadAPI} from "@khanacademy/math-input";
+
+const MQ = MathQuill.getInterface(2);
+
+function RendererWithContext({item}) {
+    return (
+        <KeypadContext.Consumer>
+            {({keypadElement}) => {
+                return (
+                    <WrappedServerItemRenderer
+                        apiOptions={{
+                            isMobile: true,
+                            customKeypad: true,
+                            useV2Keypad: 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 () => {}}
+                        useV2Keypad
+                    />
+                );
+            }}
+        </KeypadContext.Consumer>
+    );
+}
+
+function ConnectedRenderer({item = expressionItem2}) {
+    const [keypadElement, setKeypadElement] =
+        React.useState<KeypadAPI | null>();
+    const [renderer, setRenderer] = React.useState<any>(null);
+    const [scrollableElement, setScrollableElement] =
+        React.useState<HTMLElement | null>();
+
+    return (
+        <RenderStateRoot>
+            <KeypadContext.Provider
+                value={{
+                    setKeypadElement,
+                    keypadElement,
+                    setRenderer,
+                    renderer,
+                    setScrollableElement,
+                    scrollableElement,
+                }}
+            >
+                <RendererWithContext item={item} />
+                <KeypadWithContext />
+            </KeypadContext.Provider>
+        </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("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 =
+            // eslint-disable-next-line testing-library/no-node-access
+            MQ(document.getElementsByClassName("mq-editable-field")[0]);
+
+        expect(mathquillInstance.latex()).toBe("x=\\sin\\left(9\\right)");
+    });
+});

package/src/widgets/expression.tsx

@@ -29,7 +29,7 @@ import type {
     WidgetExports,
     WidgetProps,
 } from "../types";
-import type {Keys as Key} from "@khanacademy/math-input";
+import type {Keys as Key, KeypadConfiguration} from "@khanacademy/math-input";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 type InputPath = ReadonlyArray<string>;
@@ -610,7 +610,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
  */
 const keypadConfigurationForProps = (
     widgetOptions: PerseusExpressionWidgetOptions,
-) => {
+): KeypadConfiguration => {
     // Always use the Expression keypad, regardless of the button sets that have
     // been enabled.
     const keypadType = KeypadType.EXPRESSION;
@@ -642,20 +642,22 @@ const keypadConfigurationForProps = (
 
     // TODO(charlie): Alert the keypad as to which of these symbols should be
     // treated as functions.
-    const extraVariables = Object.keys(uniqueExtraVariables);
-    extraVariables.sort();
+    const extraVariables = Object.keys(
+        uniqueExtraVariables,
+    ).sort() as ReadonlyArray<Key>;
 
-    const extraConstants = Object.keys(uniqueExtraConstants);
-    extraConstants.sort();
+    const extraConstants = Object.keys(
+        uniqueExtraConstants,
+    ).sort() as ReadonlyArray<Key>;
 
-    const extraKeys = [...extraVariables, ...extraConstants];
+    let extraKeys = [...extraVariables, ...extraConstants];
     if (!extraKeys.length) {
         // If there are no extra symbols available, we include Pi anyway, so
         // that the "extra symbols" button doesn't appear empty.
-        extraKeys.push("PI");
+        extraKeys = ["PI"];
     }
 
-    return {keypadType, extraKeys};
+    return {keypadType, extraKeys, times: widgetOptions.times};
 };
 
 const propUpgrades = {