@khanacademy/perseus 19.1.5 → 19.1.6

package/src/widgets/__tests__/graded-group-set.test.ts

@@ -1,288 +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 {article1} from "../__testdata__/graded-group-set.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-describe("graded group widget", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it("should snapshot", () => {
-        // Arrange and Act
-        const {container} = renderQuestion(article1);
-
-        // Assert
-        expect(container).toMatchSnapshot();
-    });
-
-    it("should render error message when no current group", () => {
-        // Arrange
-        const articleWithNoGradedGroups = {
-            ...article1,
-            widgets: {
-                "graded-group-set 1": {
-                    ...article1.widgets["graded-group-set 1"],
-                    type: "graded-group-set",
-                    options: {
-                        gradedGroups: [],
-                    },
-                },
-            },
-        } as const;
-
-        // Act
-        renderQuestion(articleWithNoGradedGroups);
-
-        // Assert
-        expect(screen.getByText("No current group...")).toBeVisible();
-    });
-
-    it("should show 'Next question' button when answered correctly", () => {
-        // Arrange
-        renderQuestion(article1);
-
-        // Act
-        // Answer first question correctly
-        userEvent.type(screen.getByRole("textbox"), "0.9");
-        userEvent.click(screen.getByRole("button", {name: "Check"}));
-
-        // Assert
-        expect(
-            screen.getByRole("button", {name: "Next question"}),
-        ).toBeVisible();
-    });
-
-    it("should not show 'Next question' button when answered incorrectly", () => {
-        // Arrange
-        renderQuestion(article1);
-
-        // Act
-        // Answer first question IN-correctly
-        userEvent.type(screen.getByRole("textbox"), "0.000000000001");
-        userEvent.click(screen.getByRole("button", {name: "Check"}));
-
-        // Assert
-        expect(screen.getByRole("alert")).toHaveTextContent("Incorrect");
-        expect(
-            screen.queryByRole("button", {name: "Next question"}),
-        ).toBeNull();
-    });
-
-    it("should be able to advance to next group", () => {
-        // Arrange
-        renderQuestion(article1);
-        // Answer first question correctly
-        userEvent.type(screen.getByRole("textbox"), "0.9");
-        userEvent.click(screen.getByRole("button", {name: "Check"}));
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Next question"}));
-
-        // Assert
-        expect(screen.getByText("Problem 1b")).toBeVisible();
-    });
-
-    it("should not allow advancing past the last group", () => {
-        // Arrange
-        renderQuestion(article1);
-
-        userEvent.type(screen.getByRole("textbox"), "0.9");
-        userEvent.click(screen.getByRole("button", {name: "Check"}));
-        userEvent.click(screen.getByRole("button", {name: "Next question"}));
-
-        userEvent.type(screen.getByRole("textbox"), "1");
-        userEvent.click(screen.getByRole("button", {name: "Check"}));
-        userEvent.click(screen.getByRole("button", {name: "Next question"}));
-
-        userEvent.type(screen.getByRole("textbox"), "1.2");
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Check"}));
-
-        // Assert
-        expect(screen.getByRole("alert")).toHaveTextContent("Correct");
-        expect(
-            screen.queryByRole("button", {name: "Next question"}),
-        ).not.toBeInTheDocument();
-    });
-
-    describe("should be able to jump to an arbitrary question using Indicators", () => {
-        it("by click", () => {
-            // Arrange
-            renderQuestion(article1);
-
-            // Act
-            userEvent.click(
-                screen.getByRole("button", {name: "Skip to Problem 1c"}),
-            );
-
-            // Assert
-            expect(screen.getByText("Problem 1c")).toBeVisible();
-        });
-
-        it("by key", () => {
-            // Arrange
-            renderQuestion(article1);
-
-            // Act
-            userEvent.tab(); // 1a
-            userEvent.tab(); // 1b
-            userEvent.keyboard(" ");
-
-            // Assert
-            expect(screen.getByText("Problem 1b")).toBeVisible();
-
-            userEvent.tab(); // 1c
-            userEvent.keyboard("[Enter]");
-
-            expect(screen.getByText("Problem 1c")).toBeVisible();
-        });
-    });
-
-    it("should return input paths", () => {
-        // Arrange
-        const {renderer} = renderQuestion(article1);
-
-        // Act
-        const inputPaths = renderer.getInputPaths();
-
-        // Assert
-        expect(inputPaths).toMatchInlineSnapshot(`
-            [
-              [
-                "graded-group-set 1",
-                "numeric-input 1",
-              ],
-            ]
-        `);
-    });
-
-    it("should be able to set input value on child widget", () => {
-        // Arrange
-        const {renderer} = renderQuestion(article1);
-        const cb = jest.fn();
-
-        // Act
-        renderer.setInputValue(
-            ["graded-group-set 1", "numeric-input 1"],
-            "999",
-            cb,
-        );
-
-        // Assert
-        expect(screen.getByRole("textbox")).toHaveValue("999");
-    });
-
-    it("should be able to focus the widgets", () => {
-        // Arrange
-        const {renderer} = renderQuestion(article1);
-
-        // Act
-        // The first "focusable" widget receives focus...
-        renderer.focus();
-
-        // Assert
-        expect(screen.getByRole("textbox")).toHaveFocus();
-    });
-
-    it("should be able to focus a specific input path", () => {
-        // Arrange
-        const {renderer} = renderQuestion(article1);
-
-        // Act
-        renderer.focusPath(["graded-group-set 1", "numeric-input 1"]);
-
-        // Assert
-        expect(screen.getByRole("textbox")).toHaveFocus();
-    });
-
-    it("should be able to blur a specific input path", () => {
-        // Arrange
-        const {renderer} = renderQuestion(article1);
-        userEvent.click(screen.getByRole("textbox"));
-
-        // Act
-        renderer.blurPath(["graded-group-set 1", "numeric-input 1"]);
-
-        // Assert
-        expect(screen.getByRole("textbox")).not.toHaveFocus();
-    });
-
-    it("should be able to Explain (via mouse)", () => {
-        // Arrange
-        renderQuestion(article1);
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Explain"}));
-
-        // Assert
-        expect(
-            screen.getByRole("button", {name: "Hide explanation"}),
-        ).toBeVisible();
-        expect(
-            screen.getByText(/There are many ways to solve this problem/),
-        ).toBeVisible();
-    });
-
-    it("should be able to Explain (via keyboard)", () => {
-        // Arrange
-        renderQuestion(article1);
-
-        // Act
-        const explainButton = screen.getByRole("button", {name: "Explain"});
-        explainButton.focus();
-        userEvent.type(explainButton, "{enter}");
-
-        // Assert
-        expect(
-            screen.getByRole("button", {name: "Hide explanation"}),
-        ).toBeVisible();
-        expect(
-            screen.getByText(/There are many ways to solve this problem/),
-        ).toBeVisible();
-    });
-
-    it("should be able to hide explanation (via mouse)", () => {
-        // Arrange
-        renderQuestion(article1);
-        userEvent.click(screen.getByRole("button", {name: "Explain"}));
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Hide explanation"}));
-
-        // Assert
-        expect(screen.getByRole("button", {name: "Explain"})).toBeVisible();
-        expect(
-            screen.queryByRole("button", {name: "Hide explanation"}),
-        ).not.toBeInTheDocument();
-    });
-
-    it("should be able to hide explanation (via keyboard)", () => {
-        // Arrange
-        renderQuestion(article1);
-        userEvent.click(screen.getByRole("button", {name: "Explain"}));
-
-        // Act
-        const hideExplanationButton = screen.getByRole("button", {
-            name: "Hide explanation",
-        });
-        hideExplanationButton.focus();
-        userEvent.type(hideExplanationButton, "{enter}");
-
-        // Assert
-        expect(screen.getByRole("button", {name: "Explain"})).toBeVisible();
-        expect(
-            screen.queryByRole("button", {name: "Hide explanation"}),
-        ).not.toBeInTheDocument();
-    });
-});

package/src/widgets/__tests__/graded-group.test.ts

@@ -1,232 +0,0 @@
-import {describe, beforeEach, it} from "@jest/globals";
-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__/graded-group.testdata";
-
-import {renderQuestion} from "./renderQuestion";
-
-import type {APIOptions} from "../../types";
-
-const checkAnswer = () => {
-    // NOTE(jeremy): The graded-group widget does not participate in
-    // Renderer grading. So we can't call `renderer.score()` and see that
-    // the widget is answered correctly. The only route to check the answer
-    // is to use the "Check" button that is embedded _inside_ the widget.
-    userEvent.click(screen.getByRole("button", {name: "Check"}));
-};
-
-describe("graded-group", () => {
-    beforeEach(() => {
-        // Suppress message from Link component: "Warning: A future version of
-        // React will block javascript: URLs as a security precaution. Use
-        // event handlers instead if you can. If you need to generate unsafe
-        // HTML try using dangerouslySetInnerHTML instead. React was passed
-        // "javascript:void(0)""
-        jest.spyOn(console, "error").mockImplementation(() => {});
-
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    it.each([true, false])("should snapshot", (isMobile: boolean) => {
-        // Arrange and Act
-        const {container} = renderQuestion(question1, {
-            isMobile,
-        });
-
-        // Assert
-        expect(container).toMatchSnapshot(
-            `initial render (mobile: ${isMobile.toString()})`,
-        );
-    });
-
-    describe("on desktop", () => {
-        it("should be able to be answered correctly", () => {
-            // Arrange
-            renderQuestion(question1);
-
-            userEvent.click(screen.getAllByRole("button", {name: "True"})[0]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[1]);
-            userEvent.click(screen.getAllByRole("button", {name: "True"})[2]);
-            userEvent.click(screen.getAllByRole("button", {name: "True"})[3]);
-
-            // Act
-            checkAnswer();
-
-            // Assert
-            expect(screen.getByRole("alert", {name: "Correct"})).toBeVisible();
-            expect(
-                screen.queryByRole("alert", {name: "Incorrect"}),
-            ).not.toBeInTheDocument();
-        });
-
-        it("should be able to be answered incorrectly", () => {
-            // Arrange
-            renderQuestion(question1);
-
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[0]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[1]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[2]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[3]);
-
-            // Act
-            checkAnswer();
-
-            // Assert
-            expect(
-                screen.queryByRole("alert", {name: "Correct"}),
-            ).not.toBeInTheDocument();
-            expect(
-                screen.getByRole("alert", {name: "Incorrect"}),
-            ).toBeVisible();
-        });
-
-        it("should display an error if not fully answered", () => {
-            // Arrange
-            renderQuestion(question1);
-
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[1]);
-
-            // Act
-            checkAnswer();
-
-            // Assert
-            expect(
-                screen.getByText(
-                    "We couldn't grade your answer. Make sure you select something for every row.",
-                ),
-            ).toBeVisible();
-        });
-
-        it("should be able to reveal the hint", () => {
-            // Arrange
-            renderQuestion(question1);
-
-            // Act
-            userEvent.click(screen.getByRole("button", {name: "[Hint]"}));
-            jest.runOnlyPendingTimers();
-
-            // Assert
-            expect(
-                screen.getByText(/Some bacteria synthesize their own fuel/),
-            ).toBeVisible();
-        });
-
-        it("should be able to hide the hint", () => {
-            // Arrange
-            renderQuestion(question1);
-            userEvent.click(screen.getByRole("button", {name: "[Hint]"}));
-            jest.runOnlyPendingTimers();
-
-            // Act
-            userEvent.click(screen.getByRole("button", {name: "[Hide hint]"}));
-
-            // Assert
-            expect(
-                screen.queryByText(/Some bacteria synthesize their own fuel/),
-            ).not.toBeInTheDocument();
-        });
-    });
-
-    // The Graded Group on mobile has some different functionality from
-    // desktop, so we have a completely different set of tests.
-    // Hint titling is also not exactly the same ("Hint" vs "[Hint]")
-    describe("on mobile", () => {
-        const apiOptions: APIOptions = {
-            isMobile: true,
-        };
-
-        it("should be able to be answered correctly", () => {
-            // Arrange
-            renderQuestion(question1, apiOptions);
-
-            userEvent.click(screen.getAllByRole("button", {name: "True"})[0]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[1]);
-            userEvent.click(screen.getAllByRole("button", {name: "True"})[2]);
-            userEvent.click(screen.getAllByRole("button", {name: "True"})[3]);
-            jest.runOnlyPendingTimers();
-
-            // Act
-            checkAnswer();
-
-            // Assert
-            expect(screen.getByRole("alert", {name: "Correct!"})).toBeVisible();
-            // On mobile, you can't interact with the widget at all once you
-            // answer correctly.
-            expect(
-                screen.queryByRole("button", {name: "Check"}),
-            ).not.toBeInTheDocument();
-        });
-
-        it("should be able to be answered incorrectly", () => {
-            // Arrange
-            renderQuestion(question1, apiOptions);
-
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[0]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[1]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[2]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[3]);
-            jest.runOnlyPendingTimers();
-
-            // Act
-            checkAnswer();
-
-            // Assert
-            expect(
-                screen.getByRole("button", {name: "Try again"}),
-            ).toBeVisible();
-            expect(screen.getByText("Keep trying")).toBeVisible();
-        });
-
-        it("should let the user retry when checked if not fully answered", () => {
-            // Arrange
-            renderQuestion(question1, apiOptions);
-
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[0]);
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[1]);
-            jest.runOnlyPendingTimers();
-
-            checkAnswer();
-
-            // Act
-            userEvent.click(screen.getAllByRole("button", {name: "False"})[2]);
-            jest.runOnlyPendingTimers();
-
-            // Assert
-            expect(screen.getByRole("button", {name: "Check"})).toBeVisible();
-        });
-
-        it("should be able to reveal the hint", () => {
-            // Arrange
-            renderQuestion(question1, apiOptions);
-
-            // Act
-            userEvent.click(screen.getByRole("button", {name: "Hint"}));
-
-            // Assert
-            expect(
-                screen.getByText(/Some bacteria synthesize their own fuel/),
-            ).toBeVisible();
-        });
-
-        it("should be able to hide the hint", () => {
-            // Arrange
-            renderQuestion(question1, apiOptions);
-            userEvent.click(screen.getByRole("button", {name: "Hint"}));
-
-            // Act
-            userEvent.click(screen.getByRole("button", {name: "Hide hint"}));
-
-            // Assert
-            expect(
-                screen.queryByText(/Some bacteria synthesize their own fuel./),
-            ).not.toBeInTheDocument();
-        });
-    });
-});