@khanacademy/perseus 0.0.1 → 0.2.1

package/src/widgets/__tests__/explanation_test.js

@@ -0,0 +1,199 @@
+// @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__/explanation_testdata.js";
+import ExplanationWidgetExports from "../explanation.jsx";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+import type {PerseusExplanationWidgetOptions} from "../../perseus-types.js";
+
+describe("Explanation", function () {
+    beforeEach(() => {
+        // We mock out `console.error` because the explanation widget adds
+        // `javascript:void(0);` to the `onClick` handler which triggers an
+        // error in our test env.
+        jest.spyOn(console, "error").mockImplementation(() => {});
+
+        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 expanded", () => {
+        // Arrange
+        const {container} = renderQuestion(question1);
+
+        // Act
+        userEvent.click(screen.getByRole("button"));
+
+        // Assert
+        expect(container).toMatchSnapshot("expanded");
+    });
+
+    it("should snapshot for mobile", () => {
+        // Arrange and Act
+        const {container} = renderQuestion(question1, {
+            isMobile: true,
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot("initial render");
+    });
+
+    it("should snapshot for mobile when expanded", () => {
+        // Arrange
+        const {container} = renderQuestion(question1, {
+            isMobile: true,
+        });
+
+        // Act
+        userEvent.click(screen.getByRole("button"));
+
+        // Assert
+        expect(container).toMatchSnapshot("expanded");
+    });
+
+    it("should snapshot for article", () => {
+        // Arrange and Act
+        const {container} = renderQuestion(question1, {
+            isArticle: true,
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot("initial render");
+    });
+
+    it("should snapshot for article when expanded", () => {
+        // Arrange
+        const {container} = renderQuestion(question1, {
+            isArticle: true,
+        });
+
+        // Act
+        userEvent.click(screen.getByRole("button"));
+
+        // Assert
+        expect(container).toMatchSnapshot("expanded");
+    });
+
+    it("should snapshot for article+mobile", () => {
+        // Arrange and Act
+        const {container} = renderQuestion(question1, {
+            isMobile: true,
+            isArticle: true,
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot("initial render");
+    });
+
+    it("should snapshot for article+mobile when expanded", () => {
+        // Arrange
+        const {container} = renderQuestion(question1, {
+            isMobile: true,
+            isArticle: true,
+        });
+
+        // Act
+        userEvent.click(screen.getByRole("button"));
+
+        // Assert
+        expect(container).toMatchSnapshot("expanded");
+    });
+
+    it("can be expanded", function () {
+        // Arrange
+        renderQuestion(question1);
+
+        // Act
+        const expandLink = screen.getByRole("button", {expanded: false});
+        userEvent.click(expandLink);
+
+        // Assert
+        // get asserts if it doesn't find a single matching element
+        expect(screen.getByText("This is an explanation")).toBeVisible();
+    });
+
+    it("can be collapsed", function () {
+        // Arrange
+        renderQuestion(question1);
+
+        // Act
+        const expandLink = screen.getByRole("button", {expanded: false});
+        userEvent.click(expandLink); // expand and then
+        const collapseLink = screen.getByRole("button", {expanded: true});
+        userEvent.click(collapseLink); // collapse
+
+        // Assert
+        expect(screen.queryByText("This is an explanation")).toBeNull();
+    });
+
+    it("should return an empty object for getUserInput()", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+
+        // Act
+        const userInput = renderer.getUserInput();
+
+        // Assert
+        expect(userInput).toMatchInlineSnapshot(`
+            Array [
+              Object {},
+            ]
+        `);
+    });
+
+    it("should return a zero score for simpleValidate()", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+
+        // Act
+        const score = renderer.scoreWidgets();
+
+        // Assert
+        expect(score).toMatchInlineSnapshot(`
+            Object {
+              "explanation 1": Object {
+                "earned": 0,
+                "message": null,
+                "total": 0,
+                "type": "points",
+              },
+            }
+        `);
+    });
+
+    describe("static validate", () => {
+        it("should always return 0 points", () => {
+            const result = ExplanationWidgetExports.widget.validate(
+                {},
+                ((question1.widgets["explanation 1"]
+                    .options: any): PerseusExplanationWidgetOptions),
+            );
+
+            expect(result).toMatchInlineSnapshot(`
+                Object {
+                  "earned": 0,
+                  "message": null,
+                  "total": 0,
+                  "type": "points",
+                }
+            `);
+        });
+    });
+});

package/src/widgets/__tests__/expression_test.jsx

@@ -0,0 +1,439 @@
+// @flow
+import {screen, fireEvent} 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 {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing.js";
+import {
+    expressionItem2,
+    expressionItem3,
+    expressionItem3Options,
+} from "../__testdata__/expression_testdata.js";
+import {Expression} from "../expression.jsx";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+const assertComplete = (itemData, input, isCorrect) => {
+    const {renderer} = renderQuestion(itemData.question);
+    userEvent.type(screen.getByRole("textbox"), input);
+    const [_, score] = renderer.guessAndScore();
+    expect(score).toMatchObject({
+        type: "points",
+        earned: isCorrect ? 1 : 0,
+    });
+};
+
+const assertCorrect = (itemData, input) =>
+    assertComplete(itemData, input, true);
+const assertIncorrect = (itemData, input) =>
+    assertComplete(itemData, input, false);
+
+// TODO: actually Assert that message is being set on the score object.
+const assertInvalid = (itemData, input, message?: string) => {
+    const {renderer} = renderQuestion(itemData.question);
+    if (input.length) {
+        userEvent.type(screen.getByRole("textbox"), input);
+    }
+    const [_, score] = renderer.guessAndScore();
+    expect(score).toMatchObject({type: "invalid"});
+};
+
+describe("Expression Widget", function () {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+        registerAllWidgetsForTesting();
+    });
+
+    describe("grading", function () {
+        it("should not grade a thing that doesn't parse", function () {
+            assertInvalid(expressionItem2, "+++");
+        });
+
+        it("should not grade a thing that is empty", function () {
+            assertInvalid(expressionItem2, "");
+        });
+    });
+
+    describe("fallthrough", function () {
+        it("should grade answers which don't match anything as wrong", function () {
+            assertIncorrect(expressionItem2, "500");
+        });
+    });
+
+    describe("variables", function () {
+        it.each(["123-X", "X-123"])(
+            "should not grade answers that are correct except for the " +
+                "variable case",
+            function (input) {
+                assertInvalid(expressionItem2, input);
+            },
+        );
+
+        // This isn't necessarily the ideal behavior; it's just what was the
+        // easiest to implement
+        it(
+            "should not grade answers that have the wrong variable case, " +
+                "even if the answer has got other errors",
+            function () {
+                assertInvalid(expressionItem2, "123+X");
+            },
+        );
+
+        it.each(["123-y", "123-Y"])(
+            "should not not grade answers that use the wrong variable",
+            function (input) {
+                assertInvalid(expressionItem2, input);
+            },
+        );
+    });
+
+    describe("multiple answers", function () {
+        it.each(["x-123", "123-x"])(
+            "should recognize either of two possibilities",
+            (input) => {
+                assertCorrect(expressionItem2, input);
+            },
+        );
+
+        /* For the tests below, here are the three answer forms:
+         *
+         *     considered: "ungraded"
+         *     value: x+1
+         *
+         *     considered: "incorrect"
+         *     value: y+1
+         *
+         *     considered: "correct"
+         *     value: z+1
+         */
+
+        it("should match from top to bottom", function () {
+            assertInvalid(expressionItem3, "x+1");
+        });
+
+        it("should match from top to bottom (2)", function () {
+            assertIncorrect(expressionItem3, "y+1");
+        });
+
+        it("should match from top to bottom (3)", function () {
+            assertCorrect(expressionItem3, "z+1");
+        });
+
+        it.each([["X+1"], ["Y+1"], ["Z+1"]])(
+            "should give casing or variable name error only relative to the " +
+                "correct answer",
+            (input) => {
+                assertInvalid(expressionItem3, input);
+            },
+        );
+    });
+
+    describe("ungraded", function () {
+        it("should handle ungraded answers with no error callback", function () {
+            const err = Expression.validate("x+1", expressionItem3Options);
+            expect(err).toStrictEqual({message: "", type: "invalid"});
+        });
+    });
+
+    describe("invalid", function () {
+        it("should handle ungraded answers with no error callback", function () {
+            const err = Expression.validate("x+^1", expressionItem3Options);
+            expect(err).toStrictEqual({message: null, type: "invalid"});
+        });
+    });
+});
+
+describe("getOneCorrectAnswerFromRubric", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should return undefined if rubric.value is null/undefined", () => {
+        // Arrange
+        const rubric = {
+            answerForms: [],
+            buttonSets: [],
+            functions: [],
+            times: true,
+        };
+
+        // Act
+        const result = Expression.getOneCorrectAnswerFromRubric(rubric);
+
+        // Assert
+        expect(result).toBeUndefined();
+    });
+
+    it("returns a correct answer when there is one correct answer", () => {
+        // Arrange
+        const rubric = {
+            answerForms: [
+                {
+                    value: "123",
+                    form: true,
+                    simplify: false,
+                    considered: "correct",
+                },
+            ],
+            buttonSets: [],
+            functions: [],
+            times: true,
+        };
+
+        // Act
+        const result = Expression.getOneCorrectAnswerFromRubric(rubric);
+
+        // Assert
+        expect(result).toEqual("123");
+    });
+
+    it("returns the first correct answer when there are multiple correct answers", () => {
+        // Arrange
+        const rubric = {
+            answerForms: [
+                {
+                    value: "123",
+                    form: true,
+                    simplify: false,
+                    considered: "correct",
+                },
+                {
+                    value: "456",
+                    form: true,
+                    simplify: false,
+                    considered: "correct",
+                },
+            ],
+            buttonSets: [],
+            functions: [],
+            times: true,
+        };
+
+        // Act
+        const result = Expression.getOneCorrectAnswerFromRubric(rubric);
+
+        // Assert
+        expect(result).toEqual("123");
+    });
+});
+
+describe("focus state", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("supports directly focusing", () => {
+        //  Arrange
+        renderQuestion(expressionItem2.question);
+
+        // Act
+        const expressionInput = screen.getByRole("textbox");
+        expressionInput.focus();
+
+        // Assert
+        expect(expressionInput).toHaveFocus();
+    });
+
+    it("supports directly blurring", () => {
+        //  Arrange
+        renderQuestion(expressionItem2.question);
+
+        // Act
+        const expressionInput = screen.getByRole("textbox");
+        expressionInput.focus();
+        expressionInput.blur();
+
+        // Assert
+        expect(expressionInput).not.toHaveFocus();
+    });
+
+    it("can be focused via a function", () => {
+        // arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+
+        // act
+        expression.focusInputPath();
+
+        // Assert
+        const expressionInput = screen.getByRole("textbox");
+        expect(expressionInput).toHaveFocus();
+    });
+});
+
+describe("rendering", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("supports mobile rendering", async () => {
+        // arrange and act
+        renderQuestion(expressionItem2.question, {
+            // Setting this triggers mobile rendering
+            // it would be nice if this was more clear in the code
+            customKeypad: true,
+        });
+
+        // Assert
+        const mobileInput = await screen.findByRole("textbox");
+        expect(mobileInput).toBeVisible();
+    });
+
+    it("static renders", () => {
+        // arrange and act
+        const {container} = renderQuestion(expressionItem2.question, {
+            staticRender: true,
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot("static render");
+    });
+});
+
+describe("interaction", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("sets input value directly", () => {
+        // arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+
+        // act
+        renderer.setInputValue(["expression 1"], "123-x", () => {});
+        const score = renderer.guessAndScore()[1];
+
+        // Assert
+        expect(score.type).toBe("points");
+        // Score.total doesn't exist if the input is invalid
+        // In this case we know that it'll be valid so we can assert directly
+        // $FlowFixMe[prop-missing]
+        expect(score.earned).toBe(score.total);
+    });
+
+    it("has a developer facility for inserting", () => {
+        // arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+        expression.insert("x+1");
+
+        // act
+        const score = renderer.score();
+
+        // Assert
+        // Score.total doesn't exist if the input is invalid
+        // In this case we know that it'll be valid so we can assert directly
+        // $FlowFixMe[prop-missing]
+        expect(score.total).toBe(1);
+    });
+});
+
+describe("error tooltip", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("shows on error", () => {
+        // Arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+
+        // Act
+        expression.insert("x&&&&&^1");
+        renderer.guessAndScore();
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        const errorMessage = screen.getByText(
+            "Sorry, I don't understand that!",
+        );
+        expect(errorMessage).not.toBeUndefined();
+    });
+
+    it("shows error text on mouse over", async () => {
+        // Arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+
+        // Act
+        expression.insert("x&&&&&^1");
+        renderer.guessAndScore();
+        jest.runOnlyPendingTimers();
+
+        const tooltip = await screen.findByTestId("test-error-icon");
+
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseEnter(tooltip);
+
+        // Assert
+        expect(
+            screen.getByText("Sorry, I don't understand that!"),
+        ).toBeVisible();
+    });
+    it("hides error text on mouse leave", async () => {
+        // Arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+
+        expression.insert("x&&&&&^1");
+        renderer.guessAndScore();
+        jest.runOnlyPendingTimers();
+
+        const tooltip = await screen.findByTestId("test-error-icon");
+
+        // Act
+        // NOTE(Nicole): The existing perseus code requires explicit events
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseEnter(tooltip);
+        // NOTE(Nicole): The existing perseus code requires explicit events
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseLeave(tooltip);
+
+        // Assert
+        expect(
+            screen.getByText("Sorry, I don't understand that!"),
+        ).not.toBeVisible();
+    });
+
+    it("toggles error text on click", async () => {
+        // Arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+
+        expression.insert("x&&&&&^1");
+        renderer.guessAndScore();
+        jest.runOnlyPendingTimers();
+
+        const tooltip = await screen.findByTestId("test-error-icon");
+
+        // Act & Assert
+        // NOTE(Nicole): The existing perseus code requires explicit events
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.click(tooltip);
+        expect(
+            screen.getByText("Sorry, I don't understand that!"),
+        ).toBeVisible();
+
+        // Act & Assert
+        // NOTE(Nicole): The existing perseus code requires explicit events
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.click(tooltip);
+        expect(
+            screen.getByText("Sorry, I don't understand that!"),
+        ).not.toBeVisible();
+    });
+});

package/src/widgets/__tests__/graded-group-set-jipt_test.jsx

@@ -0,0 +1,33 @@
+// @flow
+
+/**
+ * These GradedGroupSet tests are specifically for the JIPT integration.
+ * This widget renders differently when JIPT is active to make translation
+ * easier for translators.
+ */
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import * as Dependencies from "../../dependencies.js";
+import {article1} from "../__testdata__/graded-group-set_testdata.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+describe("graded-group-set", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            JIPT: {
+                useJIPT: true,
+                domInsertChecks: [],
+            },
+        });
+    });
+
+    it("should render all graded groups", () => {
+        // Arrange and Act
+        const {container} = renderQuestion(article1);
+
+        // Assert
+        expect(container).toMatchSnapshot();
+    });
+});