@khanacademy/perseus 19.1.5 → 19.1.7

package/src/widgets/__tests__/__snapshots__/unit.test.tsx.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Unit Widget renders: initial render 1`] = `
-<div>
-  <div
-    class="old-unit-input"
-  >
-    <input
-      class="perseus-interactive"
-      value=""
-    />
-    <div
-      class="error"
-      style="display: none;"
-    >
-      I don't understand that
-    </div>
-  </div>
-</div>
-`;

package/src/widgets/__tests__/__snapshots__/video.test.ts.snap

@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`video 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"
-      >
-        Watch the Biogeography: Where Life Lives video to find the answer.
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="default_xu2jcg"
-          >
-            <div
-              class="fixed-to-responsive"
-              style="max-width: 1280px; max-height: 720px;"
-            >
-              <div
-                style="padding-bottom: 56.25%;"
-              />
-              <div
-                class="default_xu2jcg-o_O-srOnly_19bpjuy"
-              >
-                Khan Academy video wrapper
-              </div>
-              <iframe
-                allowfullscreen=""
-                class="perseus-video-widget"
-                height="720"
-                sandbox="allow-same-origin allow-scripts"
-                src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
-                width="1280"
-              />
-            </div>
-            <div
-              class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
-            >
-              <span
-                class="text_f1191h"
-              />
-              <div
-                aria-hidden="true"
-                class="default_xu2jcg-o_O-inlineStyles_sc01dy"
-              />
-              <a
-                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
-                href="/transcript/videoNotFound"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                See video transcript
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`video 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"
-      >
-        Watch the Biogeography: Where Life Lives video to find the answer.
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="default_xu2jcg"
-          >
-            <div
-              class="fixed-to-responsive"
-              style="max-width: 1280px; max-height: 720px;"
-            >
-              <div
-                style="padding-bottom: 56.25%;"
-              />
-              <div
-                class="default_xu2jcg-o_O-srOnly_19bpjuy"
-              >
-                Khan Academy video wrapper
-              </div>
-              <iframe
-                allowfullscreen=""
-                class="perseus-video-widget"
-                height="720"
-                sandbox="allow-same-origin allow-scripts"
-                src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
-                width="1280"
-              />
-            </div>
-            <div
-              class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
-            >
-              <span
-                class="text_f1191h"
-              />
-              <div
-                aria-hidden="true"
-                class="default_xu2jcg-o_O-inlineStyles_sc01dy"
-              />
-              <a
-                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
-                href="/transcript/videoNotFound"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                See video transcript
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/widgets/__tests__/categorizer.test.ts

@@ -1,203 +0,0 @@
-import {screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/categorizer.testdata";
-import {Categorizer} from "../categorizer";
-
-import {renderQuestion} from "./renderQuestion";
-
-import type {APIOptions} from "../../types";
-import type {Rubric} from "../categorizer";
-
-describe("categorizer widget", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should snapshot", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-
-        // Assert
-        expect(container).toMatchSnapshot("first render");
-    });
-
-    it("should snapshot on mobile", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: true,
-        };
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-
-        // Assert
-        expect(container).toMatchSnapshot("first mobile render");
-    });
-
-    it("is incorrect when blank", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-        const {renderer} = renderQuestion(question1, apiOptions);
-
-        // Act
-        const [_, score] = renderer.guessAndScore();
-
-        // Assert
-        expect(score).toMatchInlineSnapshot(`
-            {
-              "message": "Make sure you select something for every row.",
-              "type": "invalid",
-            }
-        `);
-    });
-
-    it("can be answered incorrectly", () => {
-        // arrange
-        const {renderer} = renderQuestion(question1);
-
-        const firstItem = screen.getAllByRole("row")[0];
-        userEvent.click(firstItem);
-
-        // act
-        const [_, score] = renderer.guessAndScore();
-
-        // assert
-        expect(score).toMatchInlineSnapshot(`
-            {
-              "message": "Make sure you select something for every row.",
-              "type": "invalid",
-            }
-        `);
-    });
-
-    it("can be answered correctly", () => {
-        // arrange
-        const {renderer} = renderQuestion(question1);
-
-        // act
-        userEvent.click(
-            screen.getAllByRole("button", {name: "No relationship"})[0],
-        );
-        userEvent.click(
-            screen.getAllByRole("button", {
-                name: "Positive linear relationship",
-            })[0],
-        );
-        userEvent.click(
-            screen.getAllByRole("button", {
-                name: "Negative linear relationship",
-            })[1],
-        );
-        userEvent.click(
-            screen.getAllByRole("button", {name: "Nonlinear relationship"})[1],
-        );
-
-        jest.runOnlyPendingTimers();
-        renderer.guessAndScore();
-
-        // assert
-        expect(renderer).toHaveBeenAnsweredCorrectly();
-    });
-});
-
-describe("validating answers", () => {
-    it("gives points when the answer is correct", () => {
-        const rubric: Rubric = {
-            items: ["Graph $1$", "Graph $2$"],
-            values: [1, 3],
-            randomizeItems: false,
-            categories: [
-                "No relationship",
-                "Positive linear relationship",
-                "Negative linear relationship",
-                "Nonlinear relationship",
-            ],
-            highlightLint: false,
-            static: false,
-        };
-
-        const useInput = {
-            values: [1, 3],
-        } as const;
-        const score = Categorizer.validate(useInput, rubric);
-
-        expect(score).toMatchInlineSnapshot(`
-            {
-              "earned": 1,
-              "message": null,
-              "total": 1,
-              "type": "points",
-            }
-        `);
-    });
-
-    it("does not give points when incorrectly answered", () => {
-        const rubric: Rubric = {
-            items: ["Graph $1$", "Graph $2$"],
-            values: [1, 3],
-            randomizeItems: false,
-            categories: [
-                "No relationship",
-                "Positive linear relationship",
-                "Negative linear relationship",
-                "Nonlinear relationship",
-            ],
-            highlightLint: false,
-            static: false,
-        };
-
-        const useInput = {
-            values: [2, 3],
-        } as const;
-        const score = Categorizer.validate(useInput, rubric);
-
-        expect(score).toMatchInlineSnapshot(`
-            {
-              "earned": 0,
-              "message": null,
-              "total": 1,
-              "type": "points",
-            }
-        `);
-    });
-    it("tells the learner its not complete if not selected", () => {
-        const rubric: Rubric = {
-            items: ["Graph $1$", "Graph $2$"],
-            values: [1, 3],
-            randomizeItems: false,
-            categories: [
-                "No relationship",
-                "Positive linear relationship",
-                "Negative linear relationship",
-                "Nonlinear relationship",
-            ],
-            highlightLint: false,
-            static: false,
-        };
-
-        const useInput = {
-            values: [2],
-        } as const;
-        const score = Categorizer.validate(useInput, rubric);
-
-        expect(score).toMatchInlineSnapshot(`
-            {
-              "message": "Make sure you select something for every row.",
-              "type": "invalid",
-            }
-        `);
-    });
-});

package/src/widgets/__tests__/cs-program.test.ts

@@ -1,43 +0,0 @@
-import "@testing-library/jest-dom";
-
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/cs-program.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-describe("cs-program widget", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should snapshot", () => {
-        // Arrange
-        const apiOptions = {
-            isMobile: false,
-        } as const;
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-
-        // Assert
-        expect(container).toMatchSnapshot("first render");
-    });
-
-    it("should snapshot on mobile", () => {
-        // Arrange
-        const apiOptions = {
-            isMobile: true,
-        } as const;
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-
-        // Assert
-        expect(container).toMatchSnapshot("first mobile render");
-    });
-
-    // This widget doesn't have any direct behavior, it just renders an iframe
-});

package/src/widgets/__tests__/definition.test.ts

@@ -1,136 +0,0 @@
-import {screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import "@testing-library/jest-dom"; // Imports custom matchers
-
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-
-import {renderQuestion} from "./renderQuestion";
-
-const question = {
-    content:
-        "Read the excerpt and answer the question below. \n\nThe Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 definition 1]], upon these conditions.",
-    images: {},
-    widgets: {
-        "definition 1": {
-            graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            static: false,
-            type: "definition",
-            options: {
-                definition: "Definition text",
-                togglePrompt: "the Pequots",
-                static: false,
-            },
-            alignment: "default",
-        },
-    },
-} as const;
-
-describe("Definition widget", () => {
-    beforeEach(() => {
-        jest.useRealTimers();
-
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should have a default snapshot", () => {
-        // Arrange & Act
-        const {container} = renderQuestion(question);
-
-        // Assert
-        expect(container).toMatchSnapshot("first render");
-    });
-
-    it("should have an open state snapshot", async () => {
-        // Arrange
-        const {container} = renderQuestion(question);
-
-        // Act
-        const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.click(definitionAnchor);
-
-        // Assert
-        const tooltip = await screen.findByRole("dialog");
-        expect(tooltip).toBeVisible();
-        expect(container).toMatchSnapshot("open state");
-    });
-
-    it("should display the definition on click", async () => {
-        // Arrange
-        renderQuestion(question);
-
-        // Act
-        const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.click(definitionAnchor);
-
-        // Assert
-        const tooltip = await screen.findByRole("dialog");
-        expect(tooltip).toBeVisible();
-        expect(tooltip).toHaveTextContent("Definition text");
-    });
-
-    it("should display the definition on click", async () => {
-        // Arrange
-        renderQuestion(question);
-
-        // Act
-        const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.click(definitionAnchor);
-        const tooltip = await screen.findByRole("dialog");
-
-        // Assert
-        expect(tooltip).toBeVisible();
-        expect(tooltip).toHaveTextContent("Definition text");
-    });
-
-    it("should show via focus on space key", async () => {
-        // Arrange
-        renderQuestion(question);
-
-        // Act - Tab in to set focus
-        const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.type(definitionAnchor, "{space}");
-
-        // Assert
-        const tooltip = await screen.findByRole("dialog");
-        expect(tooltip).toBeVisible();
-        expect(tooltip).toHaveTextContent("Definition text");
-    });
-
-    it("should dimiss by a click on the x when showing", async () => {
-        renderQuestion(question);
-
-        // Act
-        // Click on the anchor
-        const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.click(definitionAnchor);
-
-        // Click close, tooltip is hidden
-        const close = screen.getByTestId("popover-close-btn");
-        userEvent.click(close);
-
-        // Assert
-        expect(screen.queryByRole("dialog")).toBeNull();
-    });
-
-    it("should not affect answerable", () => {
-        // Arrange and act
-        const {renderer} = renderQuestion(question);
-        const result = renderer.scoreWidgets();
-
-        // Assert
-        expect(result["definition 1"]).toMatchObject({
-            type: "points",
-            earned: 0,
-            total: 0,
-            message: null,
-        });
-    });
-});

package/src/widgets/__tests__/dropdown.test.ts

@@ -1,105 +0,0 @@
-import {screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-// TODO(FEI-3857): Include in jest setup so that we don't need to import it everywhere
-import "@testing-library/jest-dom/extend-expect";
-
-import {testDependencies} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/dropdown.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-describe("Dropdown widget", () => {
-    beforeEach(() => {
-        jest.useRealTimers();
-
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should snapshot", () => {
-        // Arrange and Act
-        const {container} = renderQuestion(question1);
-
-        // Assert
-        expect(container).toMatchSnapshot("initial render");
-    });
-
-    it("should snapshot when opened", async () => {
-        // Arrange
-        const {container} = renderQuestion(question1);
-
-        // Act
-        const dropdown = screen.getByRole("button");
-        userEvent.click(dropdown);
-        await screen.findByText("less than or equal to");
-
-        // Assert
-        expect(container).toMatchSnapshot("dropdown open");
-    });
-
-    it("should show placeholder text", () => {
-        // Arrange
-        renderQuestion(question1);
-
-        // Act
-        const dropdown = screen.getByRole("button");
-
-        // Assert
-        // get asserts if it doesn't find a single matching element
-        expect(dropdown).toHaveTextContent("greater/less than or equal to");
-    });
-
-    it("should be answerable correctly", () => {
-        // Arrange
-        const {renderer} = renderQuestion(question1);
-
-        // Act
-        const dropdown = screen.getByRole("button");
-        userEvent.click(dropdown);
-        userEvent.click(screen.getByText("less than or equal to"));
-
-        // Assert
-        expect(dropdown).toHaveTextContent("less than or equal to");
-        expect(renderer).toHaveBeenAnsweredCorrectly();
-    });
-
-    it("should be answerable incorrectly", () => {
-        // Arrange
-        const {renderer} = renderQuestion(question1);
-
-        // Act
-        const dropdown = screen.getByRole("button");
-        userEvent.click(dropdown);
-        userEvent.click(screen.getByText("greater than or equal to"));
-
-        // Assert
-        expect(dropdown).toHaveTextContent("greater than or equal to");
-        expect(renderer).toHaveBeenAnsweredIncorrectly();
-    });
-
-    it("should be invalid on first render", () => {
-        // Arrange and Act
-        const {renderer} = renderQuestion(question1);
-
-        // Assert
-        expect(renderer).toHaveInvalidInput();
-    });
-
-    it("should be return true when focus() called", () => {
-        // Arrange
-        const {renderer} = renderQuestion(question1);
-
-        // Act
-        const focused = renderer.focus();
-
-        // Assert
-        expect(focused).toBeTrue();
-        // TODO(LP-10797): we don't check that the document.activeElement is
-        // actually set because the dropdown widget focuses a <div> (it's root
-        // element), which is not actually focusable because it doesn't have a
-        // tabindex.
-    });
-});