add tests for NumberLineEditor (#892)

* add tests for NumberLineEditor

* changeset

.changeset/calm-guests-unite.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+add tests for NumberLineEditor

packages/perseus-editor/src/widgets/__stories__/number-line-editor.stories.tsx

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

packages/perseus-editor/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});
+    });
+});

packages/perseus-editor/src/widgets/number-line-editor.tsx

@@ -214,12 +214,23 @@ class NumberLineEditor extends React.Component<Props> {
                         value={this.props.correctRel}
                         // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                         onChange={this.onChangeRelation}
+                        aria-label="Select relationship"
                     >
-                        <option value="eq"> = </option>
-                        <option value="lt"> &lt; </option>
-                        <option value="gt"> &gt; </option>
-                        <option value="le"> &le; </option>
-                        <option value="ge"> &ge; </option>
+                        <option value="eq" aria-label="Equal">
+                            =
+                        </option>
+                        <option value="lt" aria-label="Less than">
+                            &lt;
+                        </option>
+                        <option value="gt" aria-label="Greater than">
+                            &gt;
+                        </option>
+                        <option value="le" aria-label="Less than or equal">
+                            &le;
+                        </option>
+                        <option value="ge" aria-label="Greater than or equal">
+                            &ge;
+                        </option>
                     </select>{" "}
                     <NumberInput
                         value={this.props.correctX}