@khanacademy/perseus 0.0.1 → 0.1.0

package/src/widgets/__tests__/__snapshots__/video_test.jsx.snap

@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`video widget should snapshot on mobile: first mobile render 1`] = `
+<div>
+  <span
+    class="mock-KatexProvider"
+  >
+    <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_1ff70zb-o_O-default_nelfll visited-no-recolor"
+                  href="/transcript/videoNotFound"
+                  rel="noopener noreferrer"
+                  tabindex="0"
+                  target="_blank"
+                >
+                  See video transcript
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`video widget should snapshot: first render 1`] = `
+<div>
+  <span
+    class="mock-KatexProvider"
+  >
+    <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_1ff70zb-o_O-default_nelfll visited-no-recolor"
+                  href="/transcript/videoNotFound"
+                  rel="noopener noreferrer"
+                  tabindex="0"
+                  target="_blank"
+                >
+                  See video transcript
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </span>
+</div>
+`;

package/src/widgets/__tests__/categorizer_test.jsx

@@ -0,0 +1,205 @@
+// @flow
+
+import {screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import * as Dependencies from "../../dependencies.js";
+import {question1} from "../__testdata__/categorizer_testdata.js";
+import {Categorizer} from "../categorizer.jsx";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+import type {APIOptions} from "../../types.js";
+import type {Rubric} from "../categorizer.jsx";
+
+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(`
+            Object {
+              "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(`
+            Object {
+              "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],
+        };
+        const score = Categorizer.validate(useInput, rubric);
+
+        expect(score).toMatchInlineSnapshot(`
+            Object {
+              "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],
+        };
+        const score = Categorizer.validate(useInput, rubric);
+
+        expect(score).toMatchInlineSnapshot(`
+            Object {
+              "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],
+        };
+        const score = Categorizer.validate(useInput, rubric);
+
+        expect(score).toMatchInlineSnapshot(`
+            Object {
+              "message": "Make sure you select something for every row.",
+              "type": "invalid",
+            }
+        `);
+    });
+});

package/src/widgets/__tests__/cs-program_test.jsx

@@ -0,0 +1,45 @@
+// @flow
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import * as Dependencies from "../../dependencies.js";
+import {question1} from "../__testdata__/cs-program_testdata.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+describe("cs-program widget", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should snapshot", () => {
+        // Arrange
+        const apiOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should snapshot on mobile", () => {
+        // Arrange
+        const apiOptions = {
+            isMobile: true,
+        };
+
+        // 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.js

@@ -0,0 +1,152 @@
+// @flow
+import {screen, waitForElementToBeRemoved} 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.js";
+import * as Dependencies from "../../dependencies.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+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",
+        },
+    },
+};
+
+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", () => {
+        // Arrange
+        const {container} = renderQuestion(question);
+
+        // Act
+        const definitionAnchor = screen.getByText("the Pequots");
+        userEvent.hover(definitionAnchor);
+
+        // Assert
+        expect(container).toMatchSnapshot("open state");
+    });
+
+    it("should display the definition on hover", async () => {
+        // Arrange
+        renderQuestion(question);
+
+        // Act
+        const definitionAnchor = screen.getByText("the Pequots");
+        userEvent.hover(definitionAnchor);
+
+        // Assert
+        const tooltip = await screen.findByRole("tooltip");
+        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("tooltip");
+
+        // Assert
+        expect(tooltip).toBeVisible();
+        expect(tooltip).toHaveTextContent("Definition text");
+    });
+
+    it("should show via focus by the tab key", async () => {
+        // Arrange
+        renderQuestion(question);
+
+        // Act - Tab in to set focus
+        userEvent.tab();
+
+        // Assert
+        const tooltip = await screen.findByRole("tooltip");
+        expect(tooltip).toBeVisible();
+        expect(tooltip).toHaveTextContent("Definition text");
+    });
+
+    it("should hide and blur by the tab key", async () => {
+        // Arrange
+        renderQuestion(question);
+
+        // Act - Tab in to set focus, tab out to blur
+        userEvent.tab();
+        await screen.findByRole("tooltip");
+        userEvent.tab();
+        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
+
+        // Assert
+        expect(screen.queryByRole("tooltip")).toBeNull();
+    });
+
+    it("should dimiss by a click when showing", async () => {
+        renderQuestion(question);
+
+        // Act
+        // Click on the anchor
+        const definitionAnchor = screen.getByText("the Pequots");
+        userEvent.click(definitionAnchor);
+
+        // Move the mouse away and make sure text is still visible
+        userEvent.unhover(definitionAnchor);
+        await screen.findByRole("tooltip");
+
+        // Click to elsewhere, tooltip is hidden
+        userEvent.click((document.body: any));
+        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
+
+        // Assert
+        expect(screen.queryByRole("tooltip")).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.jsx

@@ -0,0 +1,106 @@
+// @flow
+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.js";
+import * as Dependencies from "../../dependencies.js";
+import {question1} from "../__testdata__/dropdown_testdata.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+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.
+    });
+});