@khanacademy/perseus-editor 4.1.5 → 4.1.6

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

@@ -1,144 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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/categorizer-editor.tsx

@@ -1,104 +0,0 @@
-import {
-    components,
-    ApiOptions,
-    Categorizer as CategorizerWidget,
-    Changeable,
-    EditorJsonify,
-} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const {PropCheckBox, TextListEditor} = components;
-const Categorizer = CategorizerWidget.widget;
-
-type Props = any;
-
-class CategorizerEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        apiOptions: ApiOptions.propTypes,
-        items: PropTypes.arrayOf(PropTypes.string),
-        categories: PropTypes.arrayOf(PropTypes.string),
-        values: PropTypes.arrayOf(PropTypes.number),
-        randomizeItems: PropTypes.bool,
-    };
-
-    static widgetName = "categorizer" as const;
-
-    static defaultProps: Props = {
-        items: [],
-        categories: [],
-        values: [],
-        randomizeItems: false,
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <div className="perseus-widget-row">
-                    <PropCheckBox
-                        label="Randomize item order"
-                        labelAlignment="right"
-                        randomizeItems={this.props.randomizeItems}
-                        onChange={this.props.onChange}
-                    />
-                </div>
-                Categories:
-                <TextListEditor
-                    options={this.props.categories}
-                    onChange={(cat) => {
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-                        this.change("categories", cat);
-                    }}
-                    layout="horizontal"
-                />
-                Items:
-                <TextListEditor
-                    options={this.props.items}
-                    onChange={(items) => {
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        this.change({
-                            items: items,
-                            // TODO(eater): This truncates props.values so there
-                            // are never more correct answers than items,
-                            // ensuring the widget is possible to answer
-                            // correctly. It doesn't necessarly keep each
-                            // answer with its corresponding item if an item
-                            // is deleted from the middle. Inconvenient, but
-                            // it's at least possible for content creators to
-                            // catch and fix.
-                            values: _.first(this.props.values, items.length),
-                        });
-                    }}
-                    layout="vertical"
-                />
-                {/* There are a bunch of props that renderer.jsx passes to each widget
-                    via widget-container.jsx that we aren't passing to Categorizer here.
-                    See perseus-all-package/types.js#WidgetProps for details. */}
-                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
-                <Categorizer
-                    apiOptions={this.props.apiOptions}
-                    items={this.props.items}
-                    categories={this.props.categories}
-                    values={this.props.values}
-                    onChange={(newProps) => {
-                        this.props.onChange(newProps);
-                    }}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    trackInteraction={function () {}}
-                />
-            </div>
-        );
-    }
-}
-
-export default CategorizerEditor;