@khanacademy/perseus 12.1.0 → 12.2.0

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.2.0",
     "publishConfig": {
         "access": "public"
     },

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/article-renderer.tsx

@@ -44,6 +44,7 @@ class ArticleRenderer
     implements KeypadContextRendererInterface
 {
     _currentFocus: any;
+    sectionRenderers: Array<Renderer> = [];
 
     static defaultProps: DefaultProps = {
         apiOptions: ApiOptions.defaults,
@@ -87,14 +88,21 @@ class ArticleRenderer
         // paths, so as to check whether the focused path represents an
         // input.
         let didFocusInput = false;
+        let focusedInput;
+
         if (this._currentFocus) {
-            const [sectionRef, ...focusPath] = this._currentFocus;
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
-            const inputPaths = this.refs[sectionRef].getInputPaths();
+            const [sectionIndex, ...focusPath] = this._currentFocus;
+
+            const inputPaths =
+                this.sectionRenderers[sectionIndex].getInputPaths();
+
             didFocusInput = inputPaths.some((inputPath) => {
                 return Util.inputPathsEqual(inputPath, focusPath);
             });
+            focusedInput =
+                this.sectionRenderers[sectionIndex].getDOMNodeForPath(
+                    focusPath,
+                );
         }
 
         if (this.props.apiOptions.onFocusChange != null) {
@@ -102,6 +110,7 @@ class ArticleRenderer
                 this._currentFocus,
                 prevFocusPath,
                 didFocusInput ? keypadElement?.getDOMNode() : null,
+                didFocusInput ? focusedInput : null,
             );
         }
 
@@ -137,10 +146,8 @@ class ArticleRenderer
 
     blur: () => void = () => {
         if (this._currentFocus) {
-            const [sectionRef, ...inputPath] = this._currentFocus;
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
-            this.refs[sectionRef].blurPath(inputPath);
+            const [sectionIndex, ...inputPath] = this._currentFocus;
+            this.sectionRenderers[sectionIndex].blurPath(inputPath);
         }
     };
 
@@ -166,47 +173,53 @@ class ArticleRenderer
         });
 
         // TODO(alex): Add mobile api functions and pass them down here
-        const sections = this._sections().map((section, i) => {
-            const refForSection = `section-${i}`;
+        // We're using the index as the key here because we don't have a unique
+        // identifier for each section. This should be fine as we never remove
+        // or reorder sections.
+        const sections = this._sections().map((section, sectionIndex) => {
             return (
-                <DependenciesContext.Provider value={this.props.dependencies}>
-                    <div key={i} className="clearfix">
-                        <Renderer
-                            {...section}
-                            ref={refForSection}
-                            key={i}
-                            key_={i}
-                            keypadElement={this.props.keypadElement}
-                            apiOptions={{
-                                ...apiOptions,
-                                onFocusChange: (newFocusPath, oldFocusPath) => {
-                                    // Prefix the paths with the relevant section,
-                                    // so as to allow us to distinguish between
-                                    // equivalently-named inputs across Renderers.
-                                    this._handleFocusChange(
-                                        newFocusPath &&
-                                            [refForSection].concat(
-                                                newFocusPath,
-                                            ),
-                                        oldFocusPath &&
-                                            [refForSection].concat(
-                                                oldFocusPath,
-                                            ),
-                                    );
-                                },
-                            }}
-                            linterContext={PerseusLinter.pushContextStack(
-                                this.props.linterContext,
-                                "article",
-                            )}
-                            legacyPerseusLint={this.props.legacyPerseusLint}
-                        />
-                    </div>
-                </DependenciesContext.Provider>
+                <div key={sectionIndex} className="clearfix">
+                    <Renderer
+                        {...section}
+                        ref={(elem) => {
+                            if (elem) {
+                                this.sectionRenderers[sectionIndex] = elem;
+                            }
+                        }}
+                        key={sectionIndex}
+                        key_={sectionIndex}
+                        keypadElement={this.props.keypadElement}
+                        apiOptions={{
+                            ...apiOptions,
+                            onFocusChange: (newFocusPath, oldFocusPath) => {
+                                // Prefix the paths with the relevant section index,
+                                // so as to allow us to distinguish between
+                                // equivalently-named inputs across Renderers.
+                                this._handleFocusChange(
+                                    newFocusPath &&
+                                        [sectionIndex].concat(newFocusPath),
+                                    oldFocusPath &&
+                                        [sectionIndex].concat(oldFocusPath),
+                                );
+                            },
+                        }}
+                        linterContext={PerseusLinter.pushContextStack(
+                            this.props.linterContext,
+                            "article",
+                        )}
+                        legacyPerseusLint={this.props.legacyPerseusLint}
+                    />
+                </div>
             );
         });
 
-        return <div className={classes}>{sections}</div>;
+        return (
+            <div className={classes}>
+                <DependenciesContext.Provider value={this.props.dependencies}>
+                    {sections}
+                </DependenciesContext.Provider>
+            </div>
+        );
     }
 }
 

package/src/styles/perseus-renderer.less

@@ -441,6 +441,7 @@
 /* Widget CSS */
 
 .perseus-graph-padding {
+    box-sizing: content-box;
     padding: 25px 25px 0 0;
 }