@khanacademy/perseus 11.5.0 → 11.6.0

package/dist/widgets/numeric-input.d.ts

@@ -36,7 +36,7 @@ export declare class NumericInput extends React.Component<Props, State> {
     static defaultProps: DefaultProps;
     static getUserInputFromProps(props: Props): UserInput;
     static getOneCorrectAnswerFromRubric(rubric: Rubric): string | null | undefined;
-    static validate(useInput: UserInput, rubric: Rubric): PerseusScore;
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore;
     state: State;
     examples: () => ReadonlyArray<string>;
     shouldShowExamples: () => boolean;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "11.5.0",
+    "version": "11.6.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^13.0.0",
+        "@khanacademy/math-input": "^14.0.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/__tests__/__snapshots__/server-item-renderer.test.tsx.snap

@@ -189,7 +189,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
         class=""
       >
         <div
-          class="perseus-hint-renderer"
+          class="hint perseus-hint-renderer"
           tabindex="-1"
         >
           <span
@@ -219,7 +219,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
           </div>
         </div>
         <div
-          class="perseus-hint-renderer"
+          class="hint perseus-hint-renderer"
           tabindex="-1"
         >
           <span
@@ -249,7 +249,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
           </div>
         </div>
         <div
-          class="perseus-hint-renderer last-hint last-rendered"
+          class="hint perseus-hint-renderer last-hint last-rendered"
           tabindex="-1"
         >
           <span

package/src/__tests__/item-renderer.test.tsx

@@ -1,5 +1,6 @@
+import {StatefulKeypadContextProvider} from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {fireEvent, render, screen} from "@testing-library/react";
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom matchers
@@ -71,23 +72,25 @@ export const renderQuestion = (
     let renderer: ItemRenderer | null = null;
     const {container} = render(
         <RenderStateRoot>
-            <ItemRenderer
-                ref={(node) => (renderer = node)}
-                apiOptions={apiOptions}
-                item={question}
-                problemNum={0}
-                reviewMode={false}
-                savedState=""
-                controlPeripherals={false}
-                dependencies={testDependenciesV2}
-                {...optionalProps}
-            />
-            {/* The ItemRenderer _requires_ two divs: a work area and hints
+            <StatefulKeypadContextProvider>
+                <ItemRenderer
+                    ref={(node) => (renderer = node)}
+                    apiOptions={apiOptions}
+                    item={question}
+                    problemNum={0}
+                    reviewMode={false}
+                    savedState=""
+                    controlPeripherals={false}
+                    dependencies={testDependenciesV2}
+                    {...optionalProps}
+                />
+                {/* The ItemRenderer _requires_ two divs: a work area and hints
                 area. Without both of these, it fails to render anything! */}
-            <div id="workarea" />
-            <div id="hintsarea" />
+                <div id="workarea" />
+                <div id="hintsarea" />
 
-            <Peripherals />
+                <Peripherals />
+            </StatefulKeypadContextProvider>
         </RenderStateRoot>,
     );
     if (!renderer) {
@@ -309,18 +312,21 @@ describe("item renderer", () => {
             );
         });
 
-        it("should activate the keypad when widget with input is focused", () => {
+        it("should activate the keypad when widget with input is focused", async () => {
             // Arrange
             const {renderer} = renderQuestion(itemWithInput, {
                 isMobile: true,
                 customKeypad: true,
+                useV2Keypad: true,
             });
 
             // Act
             renderer.focus();
 
             // Assert
-            expect(screen.getByLabelText("7")).toBeVisible();
+            await waitFor(() => {
+                expect(screen.getByLabelText("7")).toBeVisible();
+            });
         });
 
         it("should provide current and previous focus paths on focus change to, and away from, a single widget", () => {

package/src/hint-renderer.tsx

@@ -62,6 +62,7 @@ class HintRenderer extends React.Component<Props> {
         const {isMobile} = apiOptions;
 
         const classNames = classnames(
+            "hint",
             !isMobile && "perseus-hint-renderer",
             isMobile && css(styles.newHint),
             isMobile && lastRendered && css(styles.lastRenderedNewHint),

package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap

@@ -1128,7 +1128,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
         class=""
       >
         <div
-          class="perseus-hint-renderer last-rendered"
+          class="hint perseus-hint-renderer last-rendered"
           tabindex="-1"
         >
           <span

package/src/perseus-types.ts

@@ -762,7 +762,8 @@ export type PerseusNumericInputAnswer = {
     // The forms available for this answer.  Options: "integer, ""decimal", "proper", "improper", "mixed", or "pi"
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
     answerForms?: ReadonlyArray<MathFormat>;
-    // Whether the answerForms should be strictly matched
+    // Whether we should check the answer strictly against the the configured answerForms (strict = true)
+    // or include the set of default answerForms (strict = false).
     strict: boolean;
     // A range of error +/- the value
     // NOTE: perseus_data.go says this is non-nullable even though we handle null values.

package/src/styles/khan-exercise.css

@@ -10,6 +10,12 @@ var {
     font-style: normal;
 }
 
+.hint.last-hint {
+    .paragraph {
+        font-weight: bold;
+    }
+}
+
 .hint_blue {
     color: #6495ed;
 }
@@ -32,10 +38,6 @@ var {
     color: #9d38bd;
 }
 
-.last-hint {
-    font-weight: bold;
-}
-
 div.subhint {
     border: 1px solid #aaaaaa;
     background: #f9f9f9;

package/src/styles/perseus-renderer.less

@@ -144,7 +144,6 @@
     }
 
     .paragraph ul:not(.perseus-widget-radio) {
-        .legacy-typography;
         padding-left: 35px;
         list-style-type: disc;
     }

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -1,4 +1,8 @@
-import {KeypadContext, MobileKeypad} from "@khanacademy/math-input";
+import {
+    KeypadContext,
+    StatefulKeypadContextProvider,
+    MobileKeypad,
+} from "@khanacademy/math-input";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {action} from "@storybook/addon-actions";
 import {StyleSheet} from "aphrodite";
@@ -29,29 +33,11 @@ type Props = {
 };
 
 const TestKeypadContextWrapper = (props: Props): React.ReactElement => {
-    const [keypadElement, setKeypadElement] = React.useState(null);
-    const [renderer, setRenderer] = React.useState(null);
-    const [scrollableElement, setScrollableElement] = React.useState(
-        document.body,
-    );
-
     return (
-        <KeypadContext.Provider
-            value={{
-                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
-                setKeypadElement,
-                keypadElement,
-                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
-                setRenderer,
-                renderer,
-                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
-                setScrollableElement,
-                scrollableElement,
-            }}
-        >
+        <StatefulKeypadContextProvider>
             {props.children}
             <Footer />
-        </KeypadContext.Provider>
+        </StatefulKeypadContextProvider>
     );
 };
 

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

@@ -0,0 +1,333 @@
+import "@testing-library/jest-dom";
+import {
+    KeypadContext,
+    StatefulKeypadContextProvider,
+    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";
+
+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}) {
+    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("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/__tests__/numeric-input.test.ts

@@ -250,6 +250,41 @@ describe("static function validate", () => {
         expect(score.message?.includes("pi")).toBeFalsy();
     });
 
+    it("still validates against pi if provided in answerForms", () => {
+        const rubric: Rubric = {
+            answers: [
+                {
+                    maxError: null,
+                    message: "",
+                    simplify: "required",
+                    status: "correct",
+                    strict: false,
+                    value: 311.01767270538954,
+                    answerForms: ["pi"],
+                },
+            ],
+            labelText: "",
+            size: "normal",
+            static: false,
+            coefficient: false,
+        };
+
+        const userInput = {
+            currentValue: "99 pi",
+        } as const;
+
+        const score = NumericInput.validate(userInput, rubric);
+
+        expect(score).toMatchInlineSnapshot(`
+        {
+          "earned": 1,
+          "message": null,
+          "total": 1,
+          "type": "points",
+        }
+    `);
+    });
+
     it("with a strict answer", () => {
         const rubric: Rubric = {
             answers: [