@khanacademy/perseus 19.1.4 → 19.1.6

package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap

@@ -1,163 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Sortable renders a spinner while waiting for the TeX renderer to load: first render: displays a spinner 1`] = `
-<div>
-  <div
-    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
-  >
-    <svg
-      height="96"
-      viewBox="0 0 96 96"
-      width="96"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
-        d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
-        fill-rule="nonzero"
-      />
-    </svg>
-  </div>
-  <div
-    style="display: none;"
-  >
-    <div
-      class="fake-tex"
-    >
-      1
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Sortable renders a spinner while waiting for the TeX renderer to load: second render: displays the sortable 1`] = `
-<div>
-  <ul
-    class="sortable_13d4756 perseus-sortable"
-  >
-    <li
-      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-      style="position: static; margin: 0px 5px 0px 0px;"
-    >
-      <div
-        class="perseus-renderer perseus-renderer-responsive"
-      >
-        <div
-          class="paragraph"
-          data-perseus-paragraph-index="0"
-        >
-          <div
-            class="paragraph"
-          >
-            a
-          </div>
-        </div>
-      </div>
-    </li>
-    <li
-      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-      style="position: static; margin: 0px 5px 0px 0px;"
-    >
-      <div
-        class="perseus-renderer perseus-renderer-responsive"
-      >
-        <div
-          class="paragraph"
-          data-perseus-paragraph-index="0"
-        >
-          <div
-            class="paragraph"
-          >
-            b
-          </div>
-        </div>
-      </div>
-    </li>
-    <li
-      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-      style="position: static; margin: 0px;"
-    >
-      <div
-        class="perseus-renderer perseus-renderer-responsive"
-      >
-        <div
-          class="paragraph"
-          data-perseus-paragraph-index="0"
-        >
-          <div
-            class="paragraph"
-          >
-            c
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Sortable should snapshot: first render 1`] = `
-<div>
-  <ul
-    class="sortable_13d4756 perseus-sortable"
-  >
-    <li
-      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-      style="position: static; margin: 0px 5px 0px 0px;"
-    >
-      <div
-        class="perseus-renderer perseus-renderer-responsive"
-      >
-        <div
-          class="paragraph"
-          data-perseus-paragraph-index="0"
-        >
-          <div
-            class="paragraph"
-          >
-            a
-          </div>
-        </div>
-      </div>
-    </li>
-    <li
-      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-      style="position: static; margin: 0px 5px 0px 0px;"
-    >
-      <div
-        class="perseus-renderer perseus-renderer-responsive"
-      >
-        <div
-          class="paragraph"
-          data-perseus-paragraph-index="0"
-        >
-          <div
-            class="paragraph"
-          >
-            b
-          </div>
-        </div>
-      </div>
-    </li>
-    <li
-      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-      style="position: static; margin: 0px;"
-    >
-      <div
-        class="perseus-renderer perseus-renderer-responsive"
-      >
-        <div
-          class="paragraph"
-          data-perseus-paragraph-index="0"
-        >
-          <div
-            class="paragraph"
-          >
-            c
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-`;

package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap

@@ -1,265 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`sorter widget should snapshot on mobile: first mobile render 1`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Arrange the following measurements in order from smallest to largest.
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget-sorter perseus-clearfix"
-          >
-            <ul
-              class="sortable_13d4756 perseus-sortable"
-            >
-              <li
-                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                style="position: static; margin: 0px 8px 0px 0px;"
-              >
-                <div
-                  class="perseus-renderer perseus-renderer-responsive"
-                >
-                  <div
-                    class="paragraph"
-                    data-perseus-paragraph-index="0"
-                  >
-                    <div
-                      class="paragraph"
-                    >
-                      <span
-                        style="white-space: nowrap;"
-                      >
-                        <span />
-                        <span
-                          class="tex-mock"
-                        >
-                          15
-                        </span>
-                        <span />
-                      </span>
-                       grams
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li
-                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                style="position: static; margin: 0px 8px 0px 0px;"
-              >
-                <div
-                  class="perseus-renderer perseus-renderer-responsive"
-                >
-                  <div
-                    class="paragraph"
-                    data-perseus-paragraph-index="0"
-                  >
-                    <div
-                      class="paragraph"
-                    >
-                      <span
-                        style="white-space: nowrap;"
-                      >
-                        <span />
-                        <span
-                          class="tex-mock"
-                        >
-                          0.005
-                        </span>
-                        <span />
-                      </span>
-                       kilograms
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li
-                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                style="position: static; margin: 0px;"
-              >
-                <div
-                  class="perseus-renderer perseus-renderer-responsive"
-                >
-                  <div
-                    class="paragraph"
-                    data-perseus-paragraph-index="0"
-                  >
-                    <div
-                      class="paragraph"
-                    >
-                      <span
-                        style="white-space: nowrap;"
-                      >
-                        <span />
-                        <span
-                          class="tex-mock"
-                        >
-                          55
-                        </span>
-                        <span />
-                      </span>
-                       grams
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`sorter widget should snapshot: first render 1`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Arrange the following measurements in order from smallest to largest.
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget-sorter perseus-clearfix"
-          >
-            <ul
-              class="sortable_13d4756 perseus-sortable"
-            >
-              <li
-                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                style="position: static; margin: 0px 5px 0px 0px;"
-              >
-                <div
-                  class="perseus-renderer perseus-renderer-responsive"
-                >
-                  <div
-                    class="paragraph"
-                    data-perseus-paragraph-index="0"
-                  >
-                    <div
-                      class="paragraph"
-                    >
-                      <span
-                        style="white-space: nowrap;"
-                      >
-                        <span />
-                        <span
-                          class="tex-mock"
-                        >
-                          15
-                        </span>
-                        <span />
-                      </span>
-                       grams
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li
-                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                style="position: static; margin: 0px 5px 0px 0px;"
-              >
-                <div
-                  class="perseus-renderer perseus-renderer-responsive"
-                >
-                  <div
-                    class="paragraph"
-                    data-perseus-paragraph-index="0"
-                  >
-                    <div
-                      class="paragraph"
-                    >
-                      <span
-                        style="white-space: nowrap;"
-                      >
-                        <span />
-                        <span
-                          class="tex-mock"
-                        >
-                          0.005
-                        </span>
-                        <span />
-                      </span>
-                       kilograms
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li
-                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                style="position: static; margin: 0px;"
-              >
-                <div
-                  class="perseus-renderer perseus-renderer-responsive"
-                >
-                  <div
-                    class="paragraph"
-                    data-perseus-paragraph-index="0"
-                  >
-                    <div
-                      class="paragraph"
-                    >
-                      <span
-                        style="white-space: nowrap;"
-                      >
-                        <span />
-                        <span
-                          class="tex-mock"
-                        >
-                          55
-                        </span>
-                        <span />
-                      </span>
-                       grams
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/__tests__/math-input.test.tsx

@@ -1,147 +0,0 @@
-import {render, screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-
-import "@testing-library/jest-dom/extend-expect";
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import MathInput from "../math-input";
-
-const allButtonSets = {
-    advancedRelations: true,
-    basicRelations: true,
-    divisionKey: true,
-    logarithms: true,
-    preAlgebra: true,
-    trigonometry: true,
-};
-
-describe("Perseus' MathInput", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("renders", () => {
-        // Assemble
-        render(
-            <MathInput
-                onChange={() => {}}
-                keypadButtonSets={allButtonSets}
-                labelText="test"
-                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByLabelText("test")).toBeInTheDocument();
-    });
-
-    it("is possible to type in the input", () => {
-        // Assemble
-        const mockOnChange = jest.fn();
-        render(
-            <MathInput
-                onChange={mockOnChange}
-                keypadButtonSets={allButtonSets}
-                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
-            />,
-        );
-
-        // Act
-        userEvent.type(screen.getByRole("textbox"), "12345");
-
-        // Assert
-        expect(mockOnChange).toHaveBeenLastCalledWith("12345");
-    });
-
-    it("is possible to use buttons", () => {
-        // Assemble
-        const mockOnChange = jest.fn();
-        render(
-            <MathInput
-                onChange={mockOnChange}
-                keypadButtonSets={allButtonSets}
-                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
-            />,
-        );
-
-        // Act
-        screen.getByRole("switch").click();
-        userEvent.click(screen.getByRole("button", {name: "1"}));
-        userEvent.click(screen.getByRole("button", {name: "Plus"}));
-        userEvent.click(screen.getByRole("button", {name: "2"}));
-        userEvent.click(screen.getByRole("button", {name: "Minus"}));
-        userEvent.click(screen.getByRole("button", {name: "3"}));
-
-        // Assert
-        expect(mockOnChange).toHaveBeenLastCalledWith("1+2-3");
-    });
-
-    it("is possible to use buttons with legacy props", () => {
-        // Assemble
-        const mockOnChange = jest.fn();
-        render(
-            <MathInput
-                onChange={mockOnChange}
-                buttonSets={["basic+div"]}
-                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
-            />,
-        );
-
-        // Act
-        // focusing the input triggers the popover
-        screen.getByRole("switch").click();
-        userEvent.click(screen.getByRole("button", {name: "1"}));
-        userEvent.click(screen.getByRole("button", {name: "Plus"}));
-        userEvent.click(screen.getByRole("button", {name: "2"}));
-        userEvent.click(screen.getByRole("button", {name: "Divide"}));
-        userEvent.click(screen.getByRole("button", {name: "3"}));
-
-        // Assert
-        expect(mockOnChange).toHaveBeenLastCalledWith("1+2\\div3");
-    });
-
-    it("returns focus to input after button click", () => {
-        // Assemble
-        render(
-            <MathInput
-                onChange={() => {}}
-                keypadButtonSets={allButtonSets}
-                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
-            />,
-        );
-
-        // Act
-        // focusing the input triggers the popover
-        screen.getByRole("switch").click();
-        userEvent.click(screen.getByRole("button", {name: "1"}));
-
-        // Assert
-        expect(screen.getByRole("textbox")).toHaveFocus();
-    });
-
-    it("does not return focus to input after button press via keyboard", () => {
-        // Assemble
-        render(
-            <MathInput
-                onChange={() => {}}
-                keypadButtonSets={allButtonSets}
-                analytics={{onAnalyticsEvent: () => Promise.resolve()}}
-            />,
-        );
-
-        // Act
-        // focusing the input triggers the popover
-        screen.getByRole("switch").click();
-        userEvent.tab(); // to "123" tab
-        userEvent.tab(); // to extra keys tab
-        userEvent.tab(); // to whole keypad
-        userEvent.tab(); // to "1" button
-        userEvent.keyboard("{enter}");
-
-        // Assert
-        expect(screen.getByRole("textbox")).not.toHaveFocus();
-    });
-});

package/src/components/__tests__/number-input.test.tsx

@@ -1,128 +0,0 @@
-import * as React from "react";
-import ReactDOM from "react-dom";
-import TestUtils from "react-dom/test-utils";
-import _ from "underscore";
-
-import NumberInput from "../number-input";
-
-const STARTING_VALUE = 1;
-
-describe("NumberInput", function () {
-    const testInputResult = function (
-        input: string,
-        result: number,
-        extraProps:
-            | undefined
-            | {
-                  placeholder: number;
-              },
-    ) {
-        let newVal;
-        const handleChange = function (val: any) {
-            newVal = val;
-        };
-
-        const props = _.extend(
-            {
-                value: STARTING_VALUE,
-                onChange: handleChange,
-            },
-            extraProps,
-        );
-
-        const node = TestUtils.renderIntoDocument(<NumberInput {...props} />);
-        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-        TestUtils.Simulate.change(ReactDOM.findDOMNode(node), {
-            target: {value: input},
-        });
-        expect(newVal).toEqual(result);
-    };
-
-    it("basic input", function () {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-        testInputResult("42", 42);
-    });
-
-    it("invalid input does not change", function () {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-        testInputResult("asdf", STARTING_VALUE);
-    });
-
-    it("should use placeholder value if blank and has placeholder", () => {
-        testInputResult("", 15, {
-            placeholder: 15,
-        });
-    });
-
-    const testArrowKeys = function (args: {
-        endingValue: number;
-        key: string;
-        keysEnabled: boolean;
-        startingValue: number;
-    }) {
-        const key = args.key;
-        const startingValue = args.startingValue;
-        const endingValue = args.endingValue;
-        const keysEnabled = args.keysEnabled;
-
-        let newVal = startingValue;
-        const handleChange = function (val) {
-            newVal = val;
-        };
-
-        const node = TestUtils.renderIntoDocument(
-            <NumberInput
-                value={startingValue}
-                // eslint-disable-next-line react/jsx-no-bind
-                onChange={handleChange}
-                useArrowKeys={keysEnabled}
-            />,
-        );
-        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-        TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(node), {key: key});
-        expect(newVal).toEqual(endingValue);
-    };
-
-    it("should let you increment with the arrow keys", function () {
-        testArrowKeys({
-            key: "ArrowUp",
-            startingValue: 0,
-            endingValue: 1,
-            keysEnabled: true,
-        });
-    });
-
-    it("should let you decrement with the arrow keys", function () {
-        testArrowKeys({
-            key: "ArrowDown",
-            startingValue: 0,
-            endingValue: -1,
-            keysEnabled: true,
-        });
-    });
-
-    it("does not increment and decrement non-integers", function () {
-        testArrowKeys({
-            key: "ArrowDown",
-            startingValue: 1 / 2,
-            endingValue: 1 / 2,
-            keysEnabled: true,
-        });
-
-        testArrowKeys({
-            key: "ArrowUp",
-            startingValue: 0.5,
-            endingValue: 0.5,
-            keysEnabled: true,
-        });
-    });
-
-    it("shouldn't increment when the arrow keys are disabled", function () {
-        testArrowKeys({
-            key: "ArrowUp",
-            startingValue: 0,
-            endingValue: 0,
-            keysEnabled: false,
-        });
-    });
-});