@khanacademy/perseus 12.1.0 → 12.3.0

package/dist/renderer.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import InteractionTracker from "./interaction-tracker";
 import TranslationLinter from "./translation-linter";
+import WidgetContainer from "./widget-container";
+import type { DependenciesContext } from "./dependencies";
 import type { PerseusRenderer, PerseusWidgetOptions } from "./perseus-types";
 import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, PerseusScore, WidgetInfo, WidgetProps } from "./types";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
@@ -37,7 +39,7 @@ export type Widget = {
     showRationalesForCurrentlySelectedChoices?: (options?: any) => void;
     examples?: () => ReadonlyArray<string>;
 };
-type Props = {
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     apiOptions?: APIOptions;
     alwaysUpdate?: boolean;
     findExternalWidgets: any;
@@ -93,6 +95,7 @@ declare class Renderer extends React.Component<Props, State> {
     _isMounted: boolean;
     _isTwoColumn: boolean;
     _translationLinter: TranslationLinter;
+    _widgetContainers: Map<string, WidgetContainer>;
     lastRenderedMarkdown: React.ReactNode;
     reuseMarkdown: boolean;
     translationIndex: number;

package/dist/styles/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const baseFontFamily = "'Proxima Nova',sans-serif";
-export declare const boldFontFamily = "'Proxima Nova Semibold',sans-serif";
+export declare const baseFontFamily = "'Lato', sans-serif";
+export declare const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
 export declare const green = "#76A005";
 export declare const kaGreen = "#71B307";
 export declare const blue = "#1C758A";

package/dist/widget-container.d.ts

@@ -5,6 +5,7 @@ import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type Props = {
     shouldHighlight: boolean;
     type: string;
+    id: string;
     initialProps: WidgetProps<any, PerseusWidgetOptions>;
     linterContext: LinterContextProps;
 };
@@ -16,6 +17,7 @@ type State = {
     widgetProps: WidgetProps<any, PerseusWidgetOptions>;
 };
 declare class WidgetContainer extends React.Component<Props, State> {
+    widgetRef: React.RefObject<React.ComponentType<any>>;
     static defaultProps: DefaultProps;
     state: any;
     componentDidMount(): void;

package/dist/widgets/expression.d.ts

@@ -51,7 +51,9 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     componentDidUpdate: (prevProps: Props) => void;
     componentWillUnmount: () => void;
     _handleMouseDown: () => void;
-    simpleValidate: (rubric: Rubric, onInputError: OnInputErrorFunctionType) => PerseusScore;
+    simpleValidate: (rubric: Rubric & {
+        scoring?: boolean;
+    }, onInputError: OnInputErrorFunctionType) => PerseusScore;
     getUserInput: () => string;
     change: (...args: any) => any | undefined;
     parse: (value: string, props: Props) => any;
@@ -65,7 +67,6 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     getInputPaths: () => ReadonlyArray<ReadonlyArray<any>>;
     getGrammarTypeForPath: (inputPath: string) => string;
     setInputValue: (path: string, newValue: string, cb: () => void) => void;
-    sendExpressionEvaluatedEvent(result: "correct" | "incorrect" | "invalid"): void;
     render(): React.ReactNode | React.ReactElement<React.ComponentProps<"div">>;
 }
 /**
@@ -213,7 +214,7 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "analytics" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "static" | "trackInteraction" | "onChange" | "analytics" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
@@ -419,7 +420,7 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "analytics" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "static" | "trackInteraction" | "onChange" | "analytics" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.1.0",
+    "version": "12.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,13 +22,13 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.3",
-        "@khanacademy/kmath": "^0.1.4",
-        "@khanacademy/math-input": "^14.2.0",
-        "@khanacademy/perseus-core": "1.1.2",
-        "@khanacademy/perseus-linter": "^0.3.6",
-        "@khanacademy/pure-markdown": "^0.2.8",
-        "@khanacademy/simple-markdown": "^0.10.2"
+        "@khanacademy/kas": "^0.3.4",
+        "@khanacademy/kmath": "^0.1.5",
+        "@khanacademy/math-input": "^14.2.1",
+        "@khanacademy/perseus-core": "1.2.0",
+        "@khanacademy/perseus-linter": "^0.3.7",
+        "@khanacademy/pure-markdown": "^0.2.9",
+        "@khanacademy/simple-markdown": "^0.10.3"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.1.3",

package/src/__stories__/article-renderer.stories.tsx

@@ -7,6 +7,7 @@ import {
     multiSectionArticle,
     passageArticle,
     articleWithExpression,
+    multiSectionArticleWithExpression,
 } from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
 import TestKeypadContextWrapper from "../widgets/__stories__/test-keypad-context-wrapper";
@@ -55,7 +56,7 @@ export const PassageArticle = ({useNewStyles}): any => (
 export const ExpressionArticle = ({useNewStyles}): any => (
     <TestKeypadContextWrapper>
         <KeypadContext.Consumer>
-            {({keypadElement, setRenderer, scrollableElement}) => (
+            {({keypadElement, setRenderer}) => (
                 <ArticleRenderer
                     ref={(node) => {
                         setRenderer(node);
@@ -63,7 +64,32 @@ export const ExpressionArticle = ({useNewStyles}): any => (
                     json={articleWithExpression}
                     dependencies={storybookDependenciesV2}
                     useNewStyles={useNewStyles}
-                    apiOptions={{isMobile: true, customKeypad: true}}
+                    apiOptions={{
+                        isMobile: true,
+                        customKeypad: true,
+                    }}
+                    keypadElement={keypadElement}
+                />
+            )}
+        </KeypadContext.Consumer>
+    </TestKeypadContextWrapper>
+);
+
+export const MultiSectionedExpressionArticle = ({useNewStyles}): any => (
+    <TestKeypadContextWrapper>
+        <KeypadContext.Consumer>
+            {({keypadElement, setRenderer}) => (
+                <ArticleRenderer
+                    ref={(node) => {
+                        setRenderer(node);
+                    }}
+                    json={multiSectionArticleWithExpression}
+                    dependencies={storybookDependenciesV2}
+                    useNewStyles={useNewStyles}
+                    apiOptions={{
+                        isMobile: true,
+                        customKeypad: true,
+                    }}
                     keypadElement={keypadElement}
                 />
             )}

package/src/__testdata__/article-renderer.testdata.ts

@@ -125,3 +125,88 @@ export const multiSectionArticle: ReadonlyArray<PerseusRenderer> = [
         widgets: {},
     },
 ];
+
+export const multiSectionArticleWithExpression: ReadonlyArray<PerseusRenderer> =
+    [
+        {
+            content:
+                "### Practice Problem\n\n$8\\cdot(11i+2)=$ [[☃ expression 1]]  \n*Your answer should be a complex number in the form $a+bi$ where $a$ and $b$ are real numbers.*",
+            images: {},
+            widgets: {
+                "expression 1": {
+                    alignment: "default",
+                    graded: true,
+                    options: {
+                        answerForms: [
+                            {
+                                considered: "correct",
+                                form: true,
+                                simplify: false,
+                                value: "16+88i",
+                            },
+                        ],
+                        buttonSets: ["basic"],
+                        functions: ["f", "g", "h"],
+                        times: false,
+                    },
+                    static: false,
+                    type: "expression",
+                    version: {major: 1, minor: 0},
+                },
+            },
+        },
+        {
+            content:
+                "### Practice Problem\n\n$8\\cdot(11i+2)=$ [[☃ expression 2]]  \n*Your answer should be a complex number in the form $a+bi$ where $a$ and $b$ are real numbers.*",
+            images: {},
+            widgets: {
+                "expression 2": {
+                    alignment: "default",
+                    graded: true,
+                    options: {
+                        answerForms: [
+                            {
+                                considered: "correct",
+                                form: true,
+                                simplify: false,
+                                value: "16+88i",
+                            },
+                        ],
+                        buttonSets: ["basic"],
+                        functions: ["f", "g", "h"],
+                        times: false,
+                    },
+                    static: false,
+                    type: "expression",
+                    version: {major: 1, minor: 0},
+                },
+            },
+        },
+        {
+            content:
+                "### Practice Problem\n\n$8\\cdot(11i+2)=$ [[☃ expression 3]]  \n*Your answer should be a complex number in the form $a+bi$ where $a$ and $b$ are real numbers.*",
+            images: {},
+            widgets: {
+                "expression 3": {
+                    alignment: "default",
+                    graded: true,
+                    options: {
+                        answerForms: [
+                            {
+                                considered: "correct",
+                                form: true,
+                                simplify: false,
+                                value: "16+88i",
+                            },
+                        ],
+                        buttonSets: ["basic"],
+                        functions: ["f", "g", "h"],
+                        times: false,
+                    },
+                    static: false,
+                    type: "expression",
+                    version: {major: 1, minor: 0},
+                },
+            },
+        },
+    ];

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

@@ -0,0 +1,131 @@
+import {
+    StatefulKeypadContextProvider,
+    KeypadContext,
+} from "@khanacademy/math-input";
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import {screen, render, fireEvent, waitFor} from "@testing-library/react";
+import * as React from "react";
+import "@testing-library/jest-dom"; // Imports custom matchers
+
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../testing/test-dependencies";
+import KeypadSwitch from "../../../math-input/src/components/keypad-switch";
+import {articleWithExpression} from "../__testdata__/article-renderer.testdata";
+import ArticleRenderer from "../article-renderer";
+import * as Dependencies from "../dependencies";
+import {ApiOptions} from "../perseus-api";
+
+import type {APIOptions} from "../types";
+
+function KeypadWithContext() {
+    return (
+        <KeypadContext.Consumer>
+            {({setKeypadElement}) => {
+                return (
+                    <KeypadSwitch
+                        onElementMounted={setKeypadElement}
+                        onDismiss={() => {}}
+                        onAnalyticsEvent={async () => {}}
+                        useV2Keypad
+                    />
+                );
+            }}
+        </KeypadContext.Consumer>
+    );
+}
+// This looks alot like `widgets/__tests__/renderQuestion.jsx', except we use
+// the ArticleRenderer instead of Renderer
+export const RenderArticle = (
+    apiOptions: APIOptions = Object.freeze({}),
+): {
+    container: HTMLElement;
+    renderer: ArticleRenderer;
+} => {
+    let renderer: ArticleRenderer | null = null;
+    const {container} = render(
+        <RenderStateRoot>
+            <StatefulKeypadContextProvider>
+                <KeypadContext.Consumer>
+                    {({keypadElement, setRenderer}) => (
+                        <ArticleRenderer
+                            ref={(node) => {
+                                renderer = node;
+                                setRenderer(node);
+                            }}
+                            json={articleWithExpression}
+                            dependencies={testDependenciesV2}
+                            apiOptions={{...apiOptions}}
+                            keypadElement={keypadElement}
+                        />
+                    )}
+                </KeypadContext.Consumer>
+                <KeypadWithContext />
+            </StatefulKeypadContextProvider>
+        </RenderStateRoot>,
+    );
+    if (!renderer) {
+        throw new Error(`Failed to render!`);
+    }
+    return {container, renderer};
+};
+
+describe("article renderer", () => {
+    beforeEach(() => {
+        // Mock ResizeObserver used by the mobile keypad
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        }));
+
+        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("should render the content", () => {
+        // Arrange and Act
+        RenderArticle({
+            ...ApiOptions.defaults,
+            isMobile: false,
+            customKeypad: false,
+        });
+
+        // Assert
+        expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("should call the onFocusChanged callback when an input is focused", async () => {
+        // Arrange
+        const answerableCallback = jest.fn();
+
+        // Act
+        RenderArticle({
+            ...ApiOptions.defaults,
+            onFocusChange: answerableCallback,
+            isMobile: true,
+            customKeypad: true,
+        });
+
+        const input = screen.getByLabelText(
+            "Math input box Tap with one or two fingers to open keyboard",
+        );
+
+        fireEvent.touchStart(input);
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
+        });
+        expect(answerableCallback).toHaveBeenCalled();
+    });
+});

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

@@ -8,9 +8,10 @@ import TestUtils from "react-dom/test-utils";
 import _ from "underscore";
 import "jest-enzyme";
 
-import {ClassNames, Dependencies, Renderer} from "@khanacademy/perseus";
-
 import {testDependencies} from "../../../../testing/test-dependencies";
+import * as Dependencies from "../dependencies";
+import {ClassNames} from "../perseus-api";
+import Renderer from "../renderer";
 import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
 
 import imageItem from "./test-items/image-item";
@@ -18,6 +19,8 @@ import inputNumber1Item from "./test-items/input-number-1-item";
 import inputNumber2Item from "./test-items/input-number-2-item";
 import tableItem from "./test-items/table-item";
 
+import type {APIOptions} from "../types";
+
 const itemWidget = inputNumber1Item;
 
 // Returns a promise that will resolve shortly after the end of this
@@ -30,16 +33,20 @@ const delayedPromise = (value: undefined) => {
     return deferred.promise();
 };
 
-const renderQuestionArea = function (item, apiOptions): any {
+const renderQuestionArea = function (item, apiOptions?: APIOptions): any {
     const wrapper = mount(
         <RenderStateRoot>
-            <Renderer
-                content={item.question.content}
-                images={item.question.images}
-                widgets={item.question.widgets}
-                problemNum={0}
-                apiOptions={apiOptions}
-            />
+            <Dependencies.DependenciesContext.Provider
+                value={{analytics: {onAnalyticsEvent: async () => undefined}}}
+            >
+                <Renderer
+                    content={item.question.content}
+                    images={item.question.images}
+                    widgets={item.question.widgets}
+                    problemNum={0}
+                    apiOptions={apiOptions}
+                />
+            </Dependencies.DependenciesContext.Provider>
         </RenderStateRoot>,
         {includeDefaultTestHarness: false},
     );
@@ -56,7 +63,6 @@ describe("Perseus API", function () {
 
     describe("setInputValue", function () {
         it("should be able to produce a correctly graded value", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "5");
             const score = renderer.guessAndScore()[1];
@@ -65,7 +71,6 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce a wrong value", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", () => {});
             const score = renderer.guessAndScore()[1];
@@ -74,7 +79,6 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce an empty score", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3");
             let score = renderer.guessAndScore()[1];
@@ -86,7 +90,6 @@ describe("Perseus API", function () {
         });
 
         it("should be able to accept a callback", function (done) {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", function () {
                 const guess = renderer.getUserInput()[0];
@@ -99,14 +102,12 @@ describe("Perseus API", function () {
 
     describe("getInputPaths", function () {
         it("should be able to find all the input widgets", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(2);
         });
 
         it("should be able to find all inputs within widgets", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(tableItem);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(8);
@@ -115,7 +116,6 @@ describe("Perseus API", function () {
 
     describe("getDOMNodeForPath", function () {
         it("should find one DOM node per <input>", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -126,7 +126,6 @@ describe("Perseus API", function () {
         });
 
         it("should find the right DOM nodes for the <input>s", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -165,11 +164,7 @@ describe("Perseus API", function () {
                 // version
                 expect(ClassNames.FOCUSED).toBe("perseus-focused");
 
-                const renderer = renderQuestionArea(inputNumber1Item, {
-                    interceptInputFocus: function (widgetId) {
-                        renderer.setInputValue(widgetId, "5");
-                    },
-                });
+                const renderer = renderQuestionArea(inputNumber1Item);
 
                 const input =
                     // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.