@khanacademy/perseus 1.4.0 → 2.0.0

package/src/widgets/__tests__/numeric-input_test.jsx

@@ -1,13 +1,10 @@
 // @flow
 
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {render, screen} from "@testing-library/react";
+import {screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import * as React from "react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Dependencies from "../../dependencies.js";
-import * as Perseus from "../../index.js";
 import {
     question1AndAnswer,
     multipleAnswers,
@@ -23,95 +20,53 @@ import {
     unionAnswerForms,
 } from "../numeric-input.jsx";
 
-import type {APIOptions} from "../../types.js";
+import {renderQuestion} from "./renderQuestion.jsx";
+
 import type {Rubric} from "../numeric-input.jsx";
 
-const renderQuestion = (question, apiOptions: APIOptions) => {
-    // Perseus.init() registers all of the widgets synchronously so
-    // it's okay to ignore the promise it returns.
-    Perseus.init({skipMathJax: true});
-
-    let renderer = null;
-    const {container} = render(
-        <RenderStateRoot>
-            <Perseus.Renderer
-                ref={(node) => (renderer = node)}
-                content={question.content}
-                images={question.images}
-                widgets={question.widgets}
-                problemNum={0}
-                apiOptions={apiOptions}
-            />
-        </RenderStateRoot>,
-    );
-    if (!renderer) {
-        throw new Error(`Not rendered`);
-    }
-    return {container, renderer};
-};
-
-const options: $ReadOnlyArray<APIOptions> = [
-    {satStyling: true},
-    {satStyling: false},
-];
-
-describe.each(options)(
-    "numeric-input widget (options: %j)",
-    (apiOptions: APIOptions) => {
-        describe("question", () => {
-            const [question, correct, incorrect] = question1AndAnswer;
-
-            beforeEach(() => {
-                jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-                    testDependencies,
-                );
-            });
-
-            it("Should accept the right answer", () => {
-                // Arrange
-                const {renderer} = renderQuestion(question, apiOptions);
-
-                // Act
-                userEvent.paste(
-                    screen.getByRole("textbox", {hidden: true}),
-                    correct,
-                );
-
-                // Assert
-                expect(renderer).toHaveBeenAnsweredCorrectly();
-            });
-
-            it("Should render predictably", () => {
-                // Arrange
-                const {container} = renderQuestion(question, apiOptions);
-                expect(container).toMatchSnapshot("first render");
-
-                // Act
-                userEvent.paste(
-                    screen.getByRole("textbox", {hidden: true}),
-                    correct,
-                );
-
-                // Assert
-                expect(container).toMatchSnapshot("after interaction");
-            });
-
-            it("should reject an incorrect answer", () => {
-                // Arrange
-                const {renderer} = renderQuestion(question, apiOptions);
-
-                // Act
-                userEvent.paste(
-                    screen.getByRole("textbox", {hidden: true}),
-                    incorrect,
-                );
-
-                // Assert
-                expect(renderer).toHaveBeenAnsweredIncorrectly();
-            });
-        });
-    },
-);
+describe("numeric-input widget", () => {
+    const [question, correct, incorrect] = question1AndAnswer;
+
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("Should accept the right answer", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question);
+
+        // Act
+        userEvent.paste(screen.getByRole("textbox", {hidden: true}), correct);
+
+        // Assert
+        expect(renderer).toHaveBeenAnsweredCorrectly();
+    });
+
+    it("Should render predictably", () => {
+        // Arrange
+        const {container} = renderQuestion(question);
+        expect(container).toMatchSnapshot("first render");
+
+        // Act
+        userEvent.paste(screen.getByRole("textbox", {hidden: true}), correct);
+
+        // Assert
+        expect(container).toMatchSnapshot("after interaction");
+    });
+
+    it("should reject an incorrect answer", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question);
+
+        // Act
+        userEvent.paste(screen.getByRole("textbox", {hidden: true}), incorrect);
+
+        // Assert
+        expect(renderer).toHaveBeenAnsweredIncorrectly();
+    });
+});
 
 describe("static function getOneCorrectAnswerFromRubric", () => {
     beforeEach(() => {
@@ -371,9 +326,7 @@ describe("Numeric input widget", () => {
 
     it("can handle multiple correct answers (Part one)", () => {
         // Arrange
-        const {renderer} = renderQuestion(multipleAnswers, {
-            satStyling: false,
-        });
+        const {renderer} = renderQuestion(multipleAnswers);
 
         // Act
         userEvent.paste(screen.getByRole("textbox", {hidden: true}), "1");
@@ -384,9 +337,7 @@ describe("Numeric input widget", () => {
 
     it("can handle multiple correct answers (Part two)", () => {
         // Arrange
-        const {renderer} = renderQuestion(multipleAnswers, {
-            satStyling: false,
-        });
+        const {renderer} = renderQuestion(multipleAnswers);
 
         // Act
         userEvent.paste(screen.getByRole("textbox", {hidden: true}), "2");
@@ -397,9 +348,7 @@ describe("Numeric input widget", () => {
 
     it("can handle duplicated answers", () => {
         // Arrange
-        const {renderer} = renderQuestion(duplicatedAnswers, {
-            satStyling: false,
-        });
+        const {renderer} = renderQuestion(duplicatedAnswers);
 
         // Act
         userEvent.paste(screen.getByRole("textbox", {hidden: true}), "2.4");
@@ -410,9 +359,7 @@ describe("Numeric input widget", () => {
 
     it("can handle coefficients", () => {
         // Arrange
-        const {renderer} = renderQuestion(withCoefficient, {
-            satStyling: false,
-        });
+        const {renderer} = renderQuestion(withCoefficient);
 
         // Act
         userEvent.paste(screen.getByRole("textbox", {hidden: true}), "1.0");
@@ -423,9 +370,7 @@ describe("Numeric input widget", () => {
 
     it("handles answers that are percentages", () => {
         // Arrange
-        const {renderer} = renderQuestion(percentageProblem, {
-            satStyling: false,
-        });
+        const {renderer} = renderQuestion(percentageProblem);
 
         // Act
         userEvent.paste(screen.getByRole("textbox", {hidden: true}), "33%");
@@ -436,9 +381,7 @@ describe("Numeric input widget", () => {
 
     it("handles answers that are decimals", () => {
         // Arrange
-        const {renderer} = renderQuestion(multipleAnswersWithDecimals, {
-            satStyling: false,
-        });
+        const {renderer} = renderQuestion(multipleAnswersWithDecimals);
 
         // Act
         userEvent.paste(screen.getByRole("textbox", {hidden: true}), "12.2");
@@ -450,7 +393,6 @@ describe("Numeric input widget", () => {
     it("supports being static", () => {
         // Arrange
         renderQuestion(multipleAnswersWithDecimals, {
-            satStyling: false,
             staticRender: true,
         });
 
@@ -461,7 +403,6 @@ describe("Numeric input widget", () => {
 
     it("styles differently on mobile", () => {
         const {container} = renderQuestion(multipleAnswersWithDecimals, {
-            satStyling: false,
             // I wish this was more clear but this is how mobile
             // rendering is triggered
             customKeypad: true,
@@ -471,9 +412,7 @@ describe("Numeric input widget", () => {
     });
 
     it("can be focused", () => {
-        const {renderer} = renderQuestion(question1, {
-            satStyling: true,
-        });
+        const {renderer} = renderQuestion(question1);
 
         // Act
         const gotFocus = renderer.focus();
@@ -490,7 +429,6 @@ describe("Numeric input widget", () => {
         const testCallback = jest.fn();
 
         const {renderer} = renderQuestion(question1, {
-            satStyling: true,
             interactionCallback: testCallback,
         });
 
@@ -502,9 +440,7 @@ describe("Numeric input widget", () => {
     });
 
     it("can be blurred", () => {
-        const {renderer} = renderQuestion(question1, {
-            satStyling: true,
-        });
+        const {renderer} = renderQuestion(question1);
 
         // Act
         const input = screen.getByRole("textbox", {hidden: true});

package/src/widgets/__tests__/radio/choice-icon_test.jsx

@@ -6,10 +6,7 @@ import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom mathers
 
 import ChoiceIcon from "../../radio/choice-icon/choice-icon.jsx";
-import {
-    SAT_ICON_SIZE,
-    LIBRARY_ICON_SIZE,
-} from "../../radio/choice-icon/shared-styles.js";
+import {CHOICE_ICON_SIZE} from "../../radio/choice-icon/shared-styles.js";
 
 function renderChoiceIcon(options) {
     const defaultOptions = {
@@ -21,11 +18,9 @@ function renderChoiceIcon(options) {
         pressed: false,
         correct: false,
         showCorrectness: false,
-        product: "library",
         multipleSelect: false,
         reviewMode: false,
         previouslyAnswered: false,
-        transparentBackground: false,
     };
 
     const overwrittenOptions = {...defaultOptions, ...options};
@@ -34,41 +29,33 @@ function renderChoiceIcon(options) {
 }
 
 describe("choice icon", () => {
-    describe.each([["sat"], ["library"]])("product: %s", (product) => {
-        describe.each([[true], [false]])(
-            "multipleSelect: %s",
-            (multipleSelect) => {
-                it("renders with the correct border radius", () => {
-                    // Arrange
-                    let expectedRadius;
-                    if (multipleSelect) {
-                        expectedRadius = 3;
-                    } else if (product === "sat") {
-                        expectedRadius = SAT_ICON_SIZE;
-                    } else {
-                        expectedRadius = LIBRARY_ICON_SIZE;
-                    }
-
-                    // Act
-                    renderChoiceIcon({product, multipleSelect});
-
-                    const choiceWrapper = screen.getByTestId(
-                        `choice-icon__${product}-choice-icon`,
-                    );
-
-                    // Assert
-                    expect(choiceWrapper).toHaveStyle(
-                        `border-radius: ${expectedRadius}px`,
-                    );
-                });
-            },
-        );
+    describe.each([[true], [false]])("multipleSelect: %s", (multipleSelect) => {
+        it("renders with the correct border radius", () => {
+            // Arrange
+            let expectedRadius;
+            if (multipleSelect) {
+                expectedRadius = 3;
+            } else {
+                expectedRadius = CHOICE_ICON_SIZE;
+            }
+
+            // Act
+            renderChoiceIcon({multipleSelect});
+
+            const choiceWrapper = screen.getByTestId(
+                `choice-icon__library-choice-icon`,
+            );
+
+            // Assert
+            expect(choiceWrapper).toHaveStyle(
+                `border-radius: ${expectedRadius}px`,
+            );
+        });
     });
 
-    it("shows a checkmark for correct answers when product is set to library", () => {
+    it("shows a checkmark for correct answers", () => {
         // Arrange & Act
         renderChoiceIcon({
-            product: "library",
             correct: true,
             reviewMode: true,
             checked: true,
@@ -84,10 +71,9 @@ describe("choice icon", () => {
         expect(choiceAttrib).toContain("circleCorrect");
     });
 
-    it("shows a dash for incorrect answers when product is set to library", () => {
+    it("shows a dash for incorrect answers", () => {
         // Arrange & Act
         renderChoiceIcon({
-            product: "library",
             correct: false,
             reviewMode: true,
             checked: true,
@@ -102,40 +88,4 @@ describe("choice icon", () => {
         // Assert
         expect(choiceAttrib).toContain("circleIncorrect");
     });
-
-    it("displays green border for correct answers when product is set to sat", () => {
-        // Arrange & Act
-        renderChoiceIcon({
-            product: "sat",
-            correct: true,
-            reviewMode: true,
-            checked: true,
-        });
-
-        const choiceWrapper = screen.getByTestId(
-            `choice-icon__sat-choice-icon`,
-        );
-        const choiceStyle = choiceWrapper.getAttribute("style");
-
-        // Assert
-        expect(choiceStyle).toContain("border-color: #009900");
-    });
-
-    it("displays red border for incorrect answers when product is set to sat", () => {
-        // Arrange & Act
-        renderChoiceIcon({
-            product: "sat",
-            correct: false,
-            reviewMode: true,
-            checked: true,
-        });
-
-        const choiceWrapper = screen.getByTestId(
-            `choice-icon__sat-choice-icon`,
-        );
-        const choiceStyle = choiceWrapper.getAttribute("style");
-
-        // Assert
-        expect(choiceStyle).toContain("border-color: #990000");
-    });
 });