@khanacademy/perseus-editor 4.1.4 → 4.1.6

package/src/widgets/__stories__/radio-editor.stories.tsx

@@ -1,116 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import RadioEditor from "../radio/editor";
-
-import type {
-    PerseusRadioWidgetOptions,
-    PerseusRenderer,
-    APIOptions,
-} from "@khanacademy/perseus";
-
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-type Empty = Record<string, never>;
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Radio Editor",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        // The maximum width of a widget in the editor.
-        width: 338,
-    },
-});
-
-const question: PerseusRenderer = {
-    content:
-        "Which of the following values of $x$ satisfies the equation $\\sqrt{64}=x$ ?\n\n[[\u2603 radio 1]]\n\n",
-    images: {},
-    widgets: {
-        "radio 1": {
-            graded: true,
-            version: {
-                major: 1,
-                minor: 0,
-            },
-            static: false,
-            type: "radio",
-            options: {
-                displayCount: null,
-                onePerLine: false,
-                choices: [
-                    {
-                        content: "$-8$ and $8$",
-                        correct: false,
-                        clue: "The square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number, so $x$ is equal to *only* $8$.",
-                    },
-                    {
-                        content: "$-8$",
-                        correct: false,
-                        clue: "While $(-8)^2=64$, the square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number.",
-                    },
-                    {
-                        content: "$8$",
-                        correct: true,
-                        isNoneOfTheAbove: false,
-                        clue: "$8$ is the positive square root of $64$.",
-                    },
-                    {
-                        content: "No value of $x$ satisfies the equation.",
-                        correct: false,
-                        isNoneOfTheAbove: false,
-                        clue: "$8$ satisfies the equation.",
-                    },
-                ],
-                countChoices: false,
-                hasNoneOfTheAbove: false,
-                multipleSelect: false,
-                randomize: false,
-                deselectEnabled: false,
-            },
-            alignment: "default",
-        },
-    },
-};
-
-class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_widget' has no initializer and is not definitely assigned in the constructor.
-    _widget: RadioEditor;
-
-    //$FlowIgnore
-    // @ts-expect-error [FEI-5003] - TS2416 - Property 'state' in type 'WithState' is not assignable to the same property in base type 'Component<Empty, PerseusRadioWidgetOptions, any>'.
-    state = question.widgets["radio 1"];
-
-    apiOptions: APIOptions = Object.freeze({});
-
-    render(): React.ReactNode {
-        return (
-            <div className={css(styles.wrapper)}>
-                <RadioEditor
-                    {...this.state}
-                    apiOptions={this.apiOptions}
-                    onChange={(props) => {
-                        this.setState({
-                            ...this._widget.serialize(),
-                            ...props,
-                        });
-                    }}
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'RadioEditor | null' is not assignable to type 'RadioEditor'.
-                    ref={(widget) => (this._widget = widget)}
-                />
-            </div>
-        );
-    }
-}
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <WithState />;
-};

package/src/widgets/__stories__/sorter-editor.stories.tsx

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import SorterEditor from "../sorter-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Sorter Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <SorterEditor onChange={action("onChange")} />;
-};

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

@@ -1,51 +0,0 @@
-import {ApiOptions, 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 CategorizerEditor from "../categorizer-editor";
-
-describe("categorizer-editor", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should render", async () => {
-        render(
-            <CategorizerEditor
-                onChange={() => undefined}
-                apiOptions={ApiOptions.defaults}
-            />,
-        );
-
-        expect(
-            await screen.findByText("Randomize item order"),
-        ).toBeInTheDocument();
-    });
-
-    it("should be possible to change randomize item order", async () => {
-        const onChangeMock = jest.fn();
-
-        render(
-            <CategorizerEditor
-                onChange={onChangeMock}
-                apiOptions={ApiOptions.defaults}
-            />,
-        );
-
-        userEvent.click(
-            screen.getByRole("checkbox", {
-                name: "Randomize item order",
-            }),
-        );
-
-        expect(onChangeMock).toBeCalledWith(
-            expect.objectContaining({randomizeItems: true}),
-        );
-    });
-});

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

@@ -1,41 +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 DefinitionEditor from "../definition-editor";
-
-describe("definition-editor", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should render", async () => {
-        render(<DefinitionEditor onChange={() => undefined} />);
-
-        expect(
-            await screen.findByText("Definition style guide"),
-        ).toBeInTheDocument();
-    });
-
-    it("should be possible to change the definition", async () => {
-        const onChangeMock = jest.fn();
-
-        render(<DefinitionEditor onChange={onChangeMock} />);
-
-        const input = screen.getByRole("textbox", {
-            name: "Word to be defined:",
-        });
-        userEvent.type(input, "a");
-
-        expect(onChangeMock).toBeCalledWith(
-            expect.objectContaining({togglePrompt: "a"}),
-            undefined,
-        );
-    });
-});

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

@@ -1,57 +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 DropdownEditor from "../dropdown-editor";
-
-describe("dropdown-editor", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should be possible to modify placeholder text", async () => {
-        const onChangeMock = jest.fn();
-
-        render(<DropdownEditor onChange={onChangeMock} />);
-
-        const input = screen.getByPlaceholderText("Placeholder value");
-        userEvent.type(input, "a");
-
-        expect(onChangeMock).toBeCalledWith({placeholder: "a"});
-    });
-
-    it("should be possible to delete choice", async () => {
-        const onChangeMock = jest.fn();
-
-        render(<DropdownEditor onChange={onChangeMock} />);
-
-        userEvent.click(screen.getByRole("link", {name: "Delete choice"}));
-
-        expect(onChangeMock).toBeCalledWith({choices: []});
-    });
-
-    it("should be possible to add choice", async () => {
-        const onChangeMock = jest.fn();
-
-        render(<DropdownEditor onChange={onChangeMock} />);
-
-        userEvent.click(screen.getByRole("link", {name: "Add a choice"}));
-
-        expect(onChangeMock).toBeCalledWith(
-            {
-                choices: [
-                    {content: "", correct: false},
-                    {content: "", correct: false},
-                ],
-            },
-            // there's some anonymous function that's also passed
-            expect.anything(),
-        );
-    });
-});

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

@@ -1,59 +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 ExplanationEditor from "../explanation-editor";
-
-describe("explanation-editor", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should render", async () => {
-        render(<ExplanationEditor onChange={() => undefined} />);
-
-        expect(
-            await screen.findByText("Prompt to show explanation:"),
-        ).toBeInTheDocument();
-    });
-
-    it("should be possible to change prompt to show explanation", async () => {
-        const onChangeMock = jest.fn();
-
-        render(<ExplanationEditor onChange={onChangeMock} />);
-
-        const input = screen.getByRole("textbox", {
-            name: "Prompt to show explanation:",
-        });
-        userEvent.type(input, "a");
-
-        expect(onChangeMock).toBeCalledWith(
-            // The dropdown initalizes with "Explain"
-            expect.objectContaining({showPrompt: "Explaina"}),
-            undefined,
-        );
-    });
-
-    it("should be possible to change prompt to hide explanation", async () => {
-        const onChangeMock = jest.fn();
-
-        render(<ExplanationEditor onChange={onChangeMock} />);
-
-        const input = screen.getByRole("textbox", {
-            name: "Prompt to hide explanation:",
-        });
-        userEvent.type(input, "a");
-
-        expect(onChangeMock).toBeCalledWith(
-            // The dropdown initalizes with "Hide explain"
-            expect.objectContaining({hidePrompt: "Hide explanationa"}),
-            undefined,
-        );
-    });
-});