@khanacademy/perseus-editor 2.12.1 → 2.14.0

package/dist/item-extras-editor.d.ts

@@ -1,17 +1,17 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-type Props = any;
+type ItemExtrasProps = {
+    calculator: boolean;
+    chi2Table: boolean;
+    periodicTable: boolean;
+    periodicTableWithKey: boolean;
+    tTable: boolean;
+    zTable: boolean;
+};
+type Props = ItemExtrasProps & {
+    onChange: (props: Partial<ItemExtrasProps>) => void;
+};
 declare class ItemExtrasEditor extends React.Component<Props> {
-    static propTypes: {
-        calculator: PropTypes.Requireable<boolean>;
-        chi2Table: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        periodicTable: PropTypes.Requireable<boolean>;
-        periodicTableWithKey: PropTypes.Requireable<boolean>;
-        tTable: PropTypes.Requireable<boolean>;
-        zTable: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: Props;
+    static defaultProps: ItemExtrasProps;
     serialize: () => any;
     render(): React.ReactNode;
 }

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/dist/widgets/label-image/behavior.d.ts

@@ -2,13 +2,16 @@
  * Controlled component to display and change widget options.
  */
 import * as React from "react";
+export type PreferredPopoverDirection = "NONE" | "UP" | "DOWN" | "LEFT" | "RIGHT";
 type Props = {
     multipleAnswers: boolean;
     hideChoicesFromInstructions: boolean;
+    preferredPopoverDirection: PreferredPopoverDirection;
     onChange: (options: {
         multipleAnswers?: boolean;
         hideChoicesFromInstructions?: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection;
     }) => void;
 };
-declare const Behavior: ({ multipleAnswers, hideChoicesFromInstructions, onChange, }: Props) => React.ReactElement;
+declare const Behavior: ({ multipleAnswers, hideChoicesFromInstructions, preferredPopoverDirection, onChange, }: Props) => React.ReactElement;
 export default Behavior;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.12.1",
+    "version": "2.14.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,18 +22,18 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.6",
-        "@khanacademy/kmath": "^0.1.7",
-        "@khanacademy/perseus": "^16.0.0",
-        "@khanacademy/perseus-core": "1.4.0"
+        "@khanacademy/kas": "^0.3.7",
+        "@khanacademy/kmath": "^0.1.8",
+        "@khanacademy/perseus": "^17.1.0",
+        "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-icon": "4.0.0",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
@@ -50,12 +50,12 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-icon": "4.0.0",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",

package/src/__tests__/items-extras-editors.test.tsx

@@ -0,0 +1,68 @@
+import "@testing-library/jest-dom";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import ItemExtrasEditor from "../item-extras-editor";
+
+describe("ItemExtrasEditor", () => {
+    it("should render correctly with default props", () => {
+        // Act
+        render(<ItemExtrasEditor onChange={() => {}} />);
+
+        // Assert
+        expect(screen.getByLabelText("Show calculator:")).not.toBeChecked();
+        expect(screen.getByLabelText("Show periodic table:")).not.toBeChecked();
+        expect(
+            screen.queryByText("Include key/legend with periodic table:"),
+        ).not.toBeInTheDocument();
+        expect(
+            screen.getByLabelText("Show z table (statistics):"),
+        ).not.toBeChecked();
+        expect(
+            screen.getByLabelText("Show t table (statistics):"),
+        ).not.toBeChecked();
+        expect(
+            screen.getByLabelText("Show chi-squared table (statistics):"),
+        ).not.toBeChecked();
+    });
+
+    it("should call onChange with updated calculator value", () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+        render(<ItemExtrasEditor calculator={false} onChange={onChangeMock} />);
+        const checkbox = screen.getByLabelText("Show calculator:");
+
+        // Act
+        userEvent.click(checkbox);
+
+        // Assert
+        expect(onChangeMock).toHaveBeenCalledWith({calculator: true});
+    });
+
+    it("should call onChange with updated periodicTableWithKey value when periodicTable is unchecked", () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+        render(
+            <ItemExtrasEditor
+                periodicTable={true}
+                periodicTableWithKey={true}
+                onChange={onChangeMock}
+            />,
+        );
+        const checkbox = screen.getByLabelText("Show periodic table:");
+
+        // Act
+        userEvent.click(checkbox);
+
+        // Assert
+        // visible when periodicTable is checked
+        expect(
+            screen.getByText("Include key/legend with periodic table:"),
+        ).toBeInTheDocument();
+        expect(onChangeMock).toHaveBeenCalledWith({
+            periodicTable: false,
+            periodicTableWithKey: false,
+        });
+    });
+});

package/src/item-extras-editor.tsx

@@ -1,23 +1,23 @@
 import {components} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 const {InfoTip} = components;
 
-type Props = any;
+type ItemExtrasProps = {
+    calculator: boolean;
+    chi2Table: boolean;
+    periodicTable: boolean;
+    periodicTableWithKey: boolean;
+    tTable: boolean;
+    zTable: boolean;
+};
 
-class ItemExtrasEditor extends React.Component<Props> {
-    static propTypes = {
-        calculator: PropTypes.bool,
-        chi2Table: PropTypes.bool,
-        onChange: PropTypes.func.isRequired,
-        periodicTable: PropTypes.bool,
-        periodicTableWithKey: PropTypes.bool,
-        tTable: PropTypes.bool,
-        zTable: PropTypes.bool,
-    };
+type Props = ItemExtrasProps & {
+    onChange: (props: Partial<ItemExtrasProps>) => void;
+};
 
-    static defaultProps: Props = {
+class ItemExtrasEditor extends React.Component<Props> {
+    static defaultProps: ItemExtrasProps = {
         calculator: false,
         chi2Table: false,
         periodicTable: false,
@@ -71,6 +71,10 @@ class ItemExtrasEditor extends React.Component<Props> {
                                 onChange={(e) => {
                                     this.props.onChange({
                                         periodicTable: e.target.checked,
+                                        // If the periodic table is unchecked,
+                                        // this needs to be reset. If table is
+                                        // checked, it should already be false.
+                                        periodicTableWithKey: false,
                                     });
                                 }}
                             />

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,
+        );
+    });
 });