@khanacademy/perseus-editor 2.12.0 → 2.13.0

package/dist/widgets/expression-editor.d.ts

@@ -11,13 +11,9 @@ type DefaultProps = {
     buttonSets: Props["buttonSets"];
     functions: Props["functions"];
 };
-type State = {
-    isTex: boolean;
-};
-declare class ExpressionEditor extends React.Component<Props, State> {
+declare class ExpressionEditor extends React.Component<Props> {
     static widgetName: "expression";
     static defaultProps: DefaultProps;
-    constructor(props: Props);
     change(...args: any[]): any;
     render(): React.ReactNode;
     serialize: () => any;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.12.0",
+    "version": "2.13.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.6",
         "@khanacademy/kmath": "^0.1.7",
-        "@khanacademy/perseus": "^15.0.0",
+        "@khanacademy/perseus": "^17.0.0",
         "@khanacademy/perseus-core": "1.4.0"
     },
     "devDependencies": {

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

@@ -1,5 +1,6 @@
 import {Dependencies} from "@khanacademy/perseus";
 import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import * as React from "react";
 
 import "@testing-library/jest-dom";
@@ -53,4 +54,350 @@ describe("expression-editor", () => {
 
         expect(await screen.findByText(/π/)).toBeInTheDocument();
     });
+
+    it("should toggle multiplication checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Use × for rendering multiplication instead of a center dot.",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({times: true});
+    });
+
+    it("should be possible to change function variables", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} functions={[]} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Function variables:",
+        });
+
+        userEvent.type(input, "x");
+
+        expect(onChangeMock).toBeCalledWith({functions: ["x"]});
+    });
+
+    it("should toggle division checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "show \\div button",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            {
+                answerForms: [],
+                buttonSets: ["basic+div"],
+                functions: ["f", "g", "h"],
+                times: false,
+            },
+            undefined,
+        );
+    });
+
+    it("should toggle trig checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "trig",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({
+            buttonSets: ["basic", "trig"],
+        });
+    });
+
+    it("should toggle prealgebra checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "prealgebra",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({
+            buttonSets: ["basic", "prealgebra"],
+        });
+    });
+
+    it("should toggle prealgebra checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "logarithms",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({
+            buttonSets: ["basic", "logarithms"],
+        });
+    });
+
+    it("should toggle prealgebra checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "basic relations",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({
+            buttonSets: ["basic", "basic relations"],
+        });
+    });
+
+    it("should toggle prealgebra checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "advanced relations",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({
+            buttonSets: ["basic", "advanced relations"],
+        });
+    });
+
+    it("should be possible to add an answer", () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExpressionEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("button", {
+                name: "Add new answer",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            {
+                answerForms: [
+                    {
+                        considered: "correct",
+                        form: false,
+                        key: 0,
+                        simplify: false,
+                        value: "",
+                    },
+                ],
+                buttonSets: ["basic"],
+                functions: ["f", "g", "h"],
+                times: false,
+            },
+            undefined,
+        );
+    });
+
+    it("should be possible to update answer", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <ExpressionEditor
+                onChange={onChangeMock}
+                answerForms={[
+                    {
+                        considered: "correct",
+                        form: false,
+                        key: "0",
+                        simplify: false,
+                        value: "",
+                    },
+                ]}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("switch", {
+                name: "open math keypad",
+            }),
+        );
+
+        userEvent.click(
+            screen.getByRole("button", {
+                name: "9",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            {
+                answerForms: [
+                    {
+                        buttonSets: ["basic"],
+                        buttonsVisible: "focused",
+                        considered: "correct",
+                        form: false,
+                        functions: ["f", "g", "h"],
+                        key: "0",
+                        linterContext: {
+                            contentType: "",
+                            highlightLint: false,
+                            paths: [],
+                            stack: [],
+                        },
+                        simplify: false,
+                        times: false,
+                        value: "9",
+                    },
+                ],
+                buttonSets: ["basic"],
+                functions: ["f", "g", "h"],
+                times: false,
+            },
+            undefined,
+        );
+    });
+
+    it("should be possible to toggle same form", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <ExpressionEditor
+                onChange={onChangeMock}
+                answerForms={[
+                    {
+                        considered: "correct",
+                        form: false,
+                        key: "0",
+                        simplify: false,
+                        value: "",
+                    },
+                ]}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Answer expression must have the same form.",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            {
+                answerForms: [
+                    {
+                        considered: "correct",
+                        form: true,
+                        key: "0",
+                        simplify: false,
+                        value: "",
+                    },
+                ],
+                buttonSets: ["basic"],
+                functions: ["f", "g", "h"],
+                times: false,
+            },
+            undefined,
+        );
+    });
+
+    it("should be possible to toggle expanded and simplified", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <ExpressionEditor
+                onChange={onChangeMock}
+                answerForms={[
+                    {
+                        considered: "correct",
+                        form: false,
+                        key: "0",
+                        simplify: false,
+                        value: "",
+                    },
+                ]}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Answer expression must be fully expanded and simplified.",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            {
+                answerForms: [
+                    {
+                        considered: "correct",
+                        form: false,
+                        key: "0",
+                        simplify: true,
+                        value: "",
+                    },
+                ],
+                buttonSets: ["basic"],
+                functions: ["f", "g", "h"],
+                times: false,
+            },
+            undefined,
+        );
+    });
+
+    it("should be possible to delete answer", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <ExpressionEditor
+                onChange={onChangeMock}
+                answerForms={[
+                    {
+                        considered: "correct",
+                        form: false,
+                        key: "0",
+                        simplify: false,
+                        value: "",
+                    },
+                ]}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("button", {
+                name: "Delete",
+            }),
+        );
+
+        userEvent.click(
+            screen.getByRole("button", {
+                name: "I'm sure!",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            {
+                answerForms: [],
+                buttonSets: ["basic"],
+                functions: ["f", "g", "h"],
+                times: false,
+            },
+            undefined,
+        );
+    });
 });

package/src/widgets/expression-editor.tsx

@@ -17,7 +17,7 @@ import SortableArea from "../components/sortable";
 
 import type {PerseusExpressionWidgetOptions} from "@khanacademy/perseus";
 
-const {InfoTip, PropCheckBox, TexButtons} = components;
+const {InfoTip, PropCheckBox} = components;
 
 type Props = {
     widgetId?: any;
@@ -36,6 +36,15 @@ type DefaultProps = {
     functions: Props["functions"];
 };
 
+const buttonSetsList: any = [
+    "basic",
+    "trig",
+    "prealgebra",
+    "logarithms",
+    "basic relations",
+    "advanced relations",
+];
+
 const parseAnswerKey = ({key}: AnswerForm): number => {
     // We don't throw here because there is data stored in some
     // exercises/articles where the answer forms don't have a key. If we throw,
@@ -67,11 +76,7 @@ const _makeNewKey = (answerForms: ReadonlyArray<AnswerForm>) => {
     return usedKeys.length;
 };
 
-type State = {
-    isTex: boolean;
-};
-
-class ExpressionEditor extends React.Component<Props, State> {
+class ExpressionEditor extends React.Component<Props> {
     static widgetName = "expression" as const;
 
     static defaultProps: DefaultProps = {
@@ -81,29 +86,6 @@ class ExpressionEditor extends React.Component<Props, State> {
         functions: ["f", "g", "h"],
     };
 
-    constructor(props: Props) {
-        super(props);
-        // Is the format of `value` TeX or plain text?
-        // TODO(alex): Remove after backfilling everything to TeX
-        // TODO(joel) - sucks if you edit some expression without
-        // backslashes or curly braces, then come back to the question and
-        // it's surprisingly not TeX anymore.
-
-        let isTex;
-        // default to TeX if new;
-        if (props.answerForms.length === 0) {
-            isTex = true;
-        } else {
-            isTex = props.answerForms.some((form) => {
-                const {value} = form;
-                // only TeX has backslashes and curly braces
-                return value.indexOf("\\") !== -1 || value.indexOf("{") !== -1;
-            });
-        }
-
-        this.state = {isTex};
-    }
-
     change(...args) {
         return Changeable.change.apply(this, args);
     }
@@ -156,38 +138,31 @@ class ExpressionEditor extends React.Component<Props, State> {
         );
 
         // checkboxes to choose which sets of input buttons are shown
-        const buttonSetChoices = Object.keys(TexButtons.buttonSets).map(
-            (name) => {
-                // The first one gets special cased to always be checked, disabled,
-                // and float left.
-                const isFirst = name === "basic";
-                const checked =
-                    this.props.buttonSets.includes(
-                        name as PerseusExpressionWidgetOptions["buttonSets"][number],
-                    ) || isFirst;
-                const className = isFirst
-                    ? "button-set-label-float"
-                    : "button-set-label";
-                return (
-                    <label className={className} key={name}>
-                        <input
-                            type="checkbox"
-                            checked={checked}
-                            disabled={isFirst}
-                            onChange={() => this.handleButtonSet(name)}
-                        />
-                        {name}
-                    </label>
-                );
-            },
-        );
+        const buttonSetChoices = buttonSetsList.map((name) => {
+            // The first one gets special cased to always be checked, disabled,
+            // and float left.
+            const isFirst = name === "basic";
+            const checked =
+                this.props.buttonSets.includes(
+                    name as PerseusExpressionWidgetOptions["buttonSets"][number],
+                ) || isFirst;
+            return (
+                <label className="button-set-label" key={name}>
+                    <input
+                        type="checkbox"
+                        checked={checked}
+                        disabled={isFirst}
+                        onChange={() => this.handleButtonSet(name)}
+                    />
+                    {name}
+                </label>
+            );
+        });
 
         const {TeX} = Dependencies.getDependencies(); // OldExpression only
 
-        buttonSetChoices.splice(
-            1,
-            1,
-            <label key="show-div">
+        buttonSetChoices.unshift(
+            <label className="button-set-label" key="show-div">
                 <input type="checkbox" onChange={this.handleToggleDiv} />
                 <span className="show-div-button">
                     show <TeX>\div</TeX> button
@@ -240,15 +215,6 @@ class ExpressionEditor extends React.Component<Props, State> {
                     {buttonSetChoices}
                 </div>
 
-                {this.state.isTex && (
-                    <TexButtons
-                        className="math-input-buttons"
-                        sets={this.props.buttonSets}
-                        convertDotToTimes={this.props.times}
-                        onInsert={this.handleTexInsert}
-                    />
-                )}
-
                 <h3 className="expression-editor-h3">Answers</h3>
 
                 <p style={{margin: "4px 0"}}>
@@ -397,9 +363,7 @@ class ExpressionEditor extends React.Component<Props, State> {
 
     // called when the selected buttonset changes
     handleButtonSet: (changingName: string) => void = (changingName) => {
-        const buttonSetNames = Object.keys(
-            TexButtons.buttonSets,
-        ) as LegacyButtonSet[];
+        const buttonSetNames = buttonSetsList;
 
         // Filter to preserve order - using .union and .difference would always
         // move the last added button set to the end.