@khanacademy/perseus-editor 2.15.3 → 2.15.4

package/src/widgets/__tests__/input-number-editor.test.tsx

@@ -0,0 +1,128 @@
+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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import InputNumberEditor from "../input-number-editor";
+
+describe("input-number-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<InputNumberEditor onChange={() => undefined} />);
+
+        expect(await screen.findByText("Correct answer:")).toBeInTheDocument();
+    });
+
+    it("should be possible to change the correct answer", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<InputNumberEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {name: "Correct answer:"});
+        userEvent.type(input, "1");
+        input.blur();
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({value: 1}),
+        );
+    });
+
+    it("should be possible to change allow inexact answers", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<InputNumberEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Allow inexact answers"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({inexact: true}),
+        );
+    });
+
+    it("should be possible to change right alignment", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<InputNumberEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Right alignment"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({rightAlign: true}),
+        );
+    });
+
+    const unsimplifiedOptions = ["required", "optional", "enforced"];
+    unsimplifiedOptions.forEach((opt) => {
+        it(`should be possible to set unsimplified answers to: ${opt}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<InputNumberEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Unsimplified answers",
+            });
+            userEvent.selectOptions(select, opt);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({simplify: opt}),
+            );
+        });
+    });
+
+    const answerTypeOptions = [
+        "number",
+        "decimal",
+        "integer",
+        "rational",
+        "improper",
+        "mixed",
+        "percent",
+        "pi",
+    ];
+    answerTypeOptions.forEach((opt) => {
+        it(`should be possible to set answer type to: ${opt}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<InputNumberEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Answer type",
+            });
+            userEvent.selectOptions(select, opt);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({answerType: opt}),
+            );
+        });
+    });
+
+    const sizeOptions = ["normal", "small"];
+    sizeOptions.forEach((opt) => {
+        it(`should be possible to set unsimplified answers to: ${opt}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<InputNumberEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Width",
+            });
+            userEvent.selectOptions(select, opt);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({size: opt}),
+            );
+        });
+    });
+});

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

@@ -0,0 +1,47 @@
+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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import MatcherEditor from "../matcher-editor";
+
+describe("matcher-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("renders", async () => {
+        render(<MatcherEditor onChange={() => {}} />);
+
+        expect(screen.getByText("Correct answer:")).toBeInTheDocument();
+    });
+
+    it("is possible to change option: order of matched pairs matters", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<MatcherEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Order of the matched pairs matters:",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({orderMatters: true});
+    });
+
+    it("should be possible to change padding", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<MatcherEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("checkbox", {name: "Padding:"}));
+
+        expect(onChangeMock).toBeCalledWith({padding: false});
+    });
+});

package/src/widgets/__tests__/number-line-editor.test.tsx

@@ -0,0 +1,144 @@
+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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import NumberLineEditor from "../number-line-editor";
+
+describe("number-line-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<NumberLineEditor onChange={() => undefined} />);
+
+        expect(await screen.findByText("Correct x")).toBeInTheDocument();
+    });
+
+    const relationships = ["lt", "gt", "le", "ge", "eq"];
+    relationships.forEach((rel) => {
+        it(`should be possible to set relationship to: ${rel}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<NumberLineEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Select relationship",
+            });
+            userEvent.selectOptions(select, rel);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({correctRel: rel}),
+            );
+        });
+    });
+
+    it("should be possible to update the answer", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByPlaceholderText("answer");
+        userEvent.type(input, "1");
+
+        expect(onChangeMock).toBeCalledWith({correctX: 1});
+    });
+
+    it("should be possible to update position", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {name: "Position: ∈"});
+        userEvent.type(input, "1");
+
+        expect(onChangeMock).toBeCalledWith({initialX: 1});
+    });
+
+    const styles = {
+        decimal: "Decimals",
+        improper: "Improper fractions",
+        mixed: "Mixed numbers",
+        "non-reduced": "Non-reduced",
+    };
+    Object.entries(styles).forEach(([key, title]) => {
+        it(`should be possible to update style: ${title}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<NumberLineEditor onChange={onChangeMock} />);
+
+            userEvent.click(screen.getByTitle(title));
+
+            expect(onChangeMock).toBeCalledWith({labelStyle: key});
+        });
+    });
+
+    it("should be possible to change show tick controller", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Show tick controller"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith({isTickCtrl: true});
+    });
+
+    it("should be possible to change show label tickets", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Show label ticks"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith({labelTicks: false});
+    });
+
+    it("should be possible to change show tooltips", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("checkbox", {name: "Show tooltips"}));
+
+        expect(onChangeMock).toBeCalledWith({showTooltips: true});
+    });
+
+    it("should be possible to update tick steps", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "or tick step:",
+        });
+        userEvent.type(input, "6");
+
+        expect(onChangeMock).toBeCalledWith({
+            numDivisions: null,
+            tickStep: 6,
+        });
+    });
+
+    it("should be possible to update snap divisions", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Snap increments per tick:",
+        });
+        userEvent.type(input, "6");
+
+        expect(onChangeMock).toBeCalledWith({snapDivisions: 26});
+    });
+});

package/src/widgets/__tests__/numeric-input-editor.test.tsx

@@ -0,0 +1,177 @@
+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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import NumericInputEditor from "../numeric-input-editor";
+
+describe("numeric-input-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<NumericInputEditor onChange={() => undefined} />);
+
+        expect(await screen.findByText(/Add new answer/)).toBeInTheDocument();
+    });
+
+    it("should be possible to select normal width", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("button", {name: "Normal (80px)"}));
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({size: "normal"}),
+            undefined,
+        );
+    });
+
+    it("should be possible to select small width", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("button", {name: "Small (40px)"}));
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({size: "small"}),
+            undefined,
+        );
+    });
+
+    it("should be possible to select right alignment", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Right alignment"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith({rightAlign: true});
+    });
+
+    it("should be possible to select coefficient", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("checkbox", {name: "Coefficient"}));
+
+        expect(onChangeMock).toBeCalledWith({coefficient: true});
+    });
+
+    it("should be possible to update label text", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Label text:",
+        });
+
+        userEvent.type(input, "a");
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({labelText: "a"}),
+            undefined,
+        );
+    });
+
+    it("should be possible to toggle options", async () => {
+        render(<NumericInputEditor onChange={() => {}} />);
+
+        userEvent.click(screen.getByRole("link", {name: "Toggle options"}));
+
+        expect(
+            screen.getByText("Unsimplified answers are"),
+        ).toBeInTheDocument();
+    });
+
+    it("should be possible to set unsimplified answers to ungraded", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("link", {name: "Toggle options"}));
+        userEvent.click(screen.getByRole("button", {name: "ungraded"}));
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({
+                answers: expect.arrayContaining([
+                    expect.objectContaining({simplify: "required"}),
+                ]),
+            }),
+        );
+    });
+
+    it("should be possible to set unsimplified answers to accepted", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("link", {name: "Toggle options"}));
+        userEvent.click(screen.getByRole("button", {name: "accepted"}));
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({
+                answers: expect.arrayContaining([
+                    expect.objectContaining({simplify: "optional"}),
+                ]),
+            }),
+        );
+    });
+
+    it("should be possible to set unsimplified answers to wrong", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("link", {name: "Toggle options"}));
+        userEvent.click(screen.getByRole("button", {name: "wrong"}));
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({
+                answers: expect.arrayContaining([
+                    expect.objectContaining({simplify: "enforced"}),
+                ]),
+            }),
+        );
+    });
+
+    const answerFormats = {
+        integer: "Integers",
+        decimal: "Decimals",
+        proper: "Proper fractions",
+        improper: "Improper fractions",
+        mixed: "Mixed numbers",
+        pi: "Numbers with π",
+    };
+
+    Object.entries(answerFormats).forEach(([key, name]) => {
+        it(`should be possible to set suggested answer format to: ${name}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<NumericInputEditor onChange={onChangeMock} />);
+
+            userEvent.click(screen.getByRole("link", {name: "Toggle options"}));
+            userEvent.click(screen.getByTitle(name));
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({
+                    answers: expect.arrayContaining([
+                        expect.objectContaining({answerForms: [key]}),
+                    ]),
+                }),
+            );
+        });
+    });
+});

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

@@ -0,0 +1,118 @@
+import {Dependencies, ApiOptions} 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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import RadioEditor from "../radio/editor";
+
+describe("radio-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(
+            <RadioEditor
+                onChange={() => undefined}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        expect(
+            await screen.findByText(/Multiple selections/),
+        ).toBeInTheDocument();
+    });
+
+    it("should toggle multiple select checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <RadioEditor
+                onChange={onChangeMock}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Multiple selections",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({multipleSelect: true});
+    });
+
+    it("should toggle randomize order checkbox", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <RadioEditor
+                onChange={onChangeMock}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Randomize order",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({randomize: true});
+    });
+
+    it("should be possible to add answer", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <RadioEditor
+                onChange={onChangeMock}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        userEvent.click(
+            screen.getAllByRole("link", {
+                name: "Add a choice",
+            })[0],
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({
+                choices: [{}, {}, {isNoneOfTheAbove: false}],
+                hasNoneOfTheAbove: false,
+            }),
+            // there's some anonymous function that's also passed
+            expect.anything(),
+        );
+    });
+
+    it("should be possible to delete answer", () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <RadioEditor
+                onChange={onChangeMock}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        userEvent.click(
+            screen.getAllByRole("link", {
+                name: "Remove this choice",
+            })[0],
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({
+                choices: [{}],
+                hasNoneOfTheAbove: false,
+            }),
+        );
+    });
+});

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

@@ -0,0 +1,55 @@
+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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import SorterEditor from "../sorter-editor";
+
+describe("sorter-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("renders", async () => {
+        render(<SorterEditor onChange={() => {}} />);
+
+        expect(screen.getByText("Correct answer:")).toBeInTheDocument();
+    });
+
+    it("should be possible to change layout to vertical", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<SorterEditor onChange={onChangeMock} />);
+
+        const select = screen.getByRole("combobox", {name: "Layout:"});
+        userEvent.selectOptions(select, "vertical");
+
+        expect(onChangeMock).toBeCalledWith({layout: "vertical"});
+    });
+
+    it("should be possible to change layout to horizontal", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<SorterEditor onChange={onChangeMock} />);
+
+        const select = screen.getByRole("combobox", {name: "Layout:"});
+        userEvent.selectOptions(select, "horizontal");
+
+        expect(onChangeMock).toBeCalledWith({layout: "horizontal"});
+    });
+
+    it("should be possible to change padding", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<SorterEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("checkbox", {name: "Padding:"}));
+
+        expect(onChangeMock).toBeCalledWith({padding: false});
+    });
+});

package/src/widgets/dropdown-editor.tsx

@@ -174,6 +174,7 @@ class DropdownEditor extends React.Component<Props> {
                                     <a
                                         href="#"
                                         className="simple-button orange"
+                                        aria-label="Delete choice"
                                         // eslint-disable-next-line react/jsx-no-bind
                                         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                         onClick={this.removeChoice.bind(

package/src/widgets/input-number-editor.tsx

@@ -186,6 +186,7 @@ class InputNumberEditor extends React.Component<Props> {
                             type="text"
                             disabled={!this.props.inexact}
                             defaultValue={this.props.maxError}
+                            aria-label="Max error"
                             onBlur={(e) => {
                                 const ans =
                                     "" +
@@ -206,6 +207,7 @@ class InputNumberEditor extends React.Component<Props> {
                             // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"number" | "integer" | "mixed" | "decimal" | "improper" | "percent" | "pi" | "rational" | undefined'.
                             this.props.onChange({answerType: e.target.value});
                         }}
+                        aria-label="Answer type"
                     >
                         {answerTypeOptions}
                     </select>