@khanacademy/perseus 0.4.3 → 1.1.0

package/src/widgets/__tests__/group_test.jsx

@@ -347,7 +347,7 @@ describe("group widget", () => {
 
         // Arrange
         const {renderer} = renderQuestion(question1);
-        userEvent.click(screen.getAllByRole("checkbox")[4]);
+        userEvent.click(screen.getAllByRole("radio")[4]);
         userEvent.type(screen.getAllByRole("textbox")[0], "1000");
         userEvent.type(screen.getAllByRole("textbox")[1], "9999");
 
@@ -360,7 +360,7 @@ describe("group widget", () => {
         renderer1.restoreSerializedState(state);
 
         // Assert
-        expect(screen.getAllByRole("checkbox")[4]).toBeChecked();
+        expect(screen.getAllByRole("radio")[4]).toBeChecked();
         expect(screen.getAllByRole("textbox")[0]).toHaveValue("1000");
         expect(screen.getAllByRole("textbox")[1]).toHaveValue("9999");
     });
@@ -369,7 +369,7 @@ describe("group widget", () => {
         // Arrange
         const {renderer} = renderQuestion(question1);
         // Answer all widgets correctly
-        userEvent.click(screen.getAllByRole("checkbox")[4]);
+        userEvent.click(screen.getAllByRole("radio")[4]);
         userEvent.type(screen.getAllByRole("textbox")[0], "230");
         userEvent.type(screen.getAllByRole("textbox")[1], "200");
 
@@ -453,7 +453,7 @@ describe("group widget", () => {
     it("should show rationales for contained widgets", () => {
         // Arrange
         const {renderer} = renderQuestion(question1);
-        userEvent.click(screen.getAllByRole("checkbox")[2]); // Incorrect!
+        userEvent.click(screen.getAllByRole("radio")[2]); // Incorrect!
 
         // Act
         renderer.showRationalesForCurrentlySelectedChoices();

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

@@ -529,14 +529,18 @@ describe("unionAnswerForms utility function", () => {
     it("removes duplicates", () => {
         // arrange
         const forms = [
-            {
-                status: "correct",
-                value: 1,
-            },
-            {
-                status: "correct",
-                value: 1,
-            },
+            [
+                {
+                    simplify: "required",
+                    name: "integer",
+                },
+            ],
+            [
+                {
+                    simplify: "required",
+                    name: "integer",
+                },
+            ],
         ];
 
         // act

package/src/widgets/__tests__/passage_test.jsx

@@ -1,9 +1,12 @@
 // @flow
 
 import "@testing-library/jest-dom";
+import {render, screen} from "@testing-library/react";
+import React from "react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Dependencies from "../../dependencies.js";
+import {ApiOptions} from "../../perseus-api.jsx";
 import {question1, question2} from "../__testdata__/passage_testdata.js";
 import PassageWidgetExport from "../passage.jsx";
 import * as getLineHeightModule from "../passage/get-line-height-for-node.js";
@@ -14,6 +17,40 @@ import type {APIOptions} from "../../types.js";
 
 jest.mock("../passage/get-line-height-for-node.js");
 
+function renderPassage(overwrite) {
+    const widgetPropsBase = {
+        footnotes: "",
+        passageText: "",
+        passageTitle: "",
+        showLineNumbers: false,
+        static: true,
+    };
+
+    const base = {
+        ...widgetPropsBase,
+        alignment: null,
+        apiOptions: {
+            ...ApiOptions.defaults,
+        },
+        containerSizeClass: "small",
+        findWidgets: (callback) => [],
+        isLastUsedWidget: false,
+        onBlur: () => {},
+        onChange: () => {},
+        onFocus: () => {},
+        problemNum: 1,
+        reviewModeRubric: {
+            ...widgetPropsBase,
+        },
+        static: true,
+        trackInteraction: () => {},
+        widgetId: "passage",
+    };
+
+    const extended = {...base, ...overwrite};
+    return render(<PassageWidgetExport.widget {...extended} />);
+}
+
 describe("passage widget", () => {
     beforeEach(() => {
         jest.spyOn(getLineHeightModule, "getLineHeightForNode").mockReturnValue(
@@ -130,4 +167,48 @@ describe("passage widget", () => {
         // Assert
         expect(reference).toBe(null);
     });
+
+    it("should render passage title", () => {
+        renderPassage({passageTitle: "Passage title"});
+
+        expect(screen.getByText("Passage title")).toBeInTheDocument();
+    });
+
+    it("should render passage text", () => {
+        renderPassage({passageText: "Passage text"});
+
+        expect(screen.getByText("Passage text")).toBeInTheDocument();
+    });
+
+    it("should render footnotes", () => {
+        renderPassage({footnotes: "Footnote text"});
+
+        expect(screen.getByText("Footnote text")).toBeInTheDocument();
+    });
+
+    it("should render first question instructions", () => {
+        renderPassage({passageText: "[[test]] Passage text"});
+
+        expect(screen.getByText("The symbol")).toBeInTheDocument();
+        expect(screen.getAllByText("[Marker for question test]")).toHaveLength(
+            2,
+        );
+        expect(
+            screen.getByText(
+                "indicates that question test references this portion of the passage",
+            ),
+        ).toBeInTheDocument();
+    });
+
+    it("should render first sentence instructions", () => {
+        renderPassage({passageText: "[[1]] Passage text"});
+
+        expect(screen.getByText("The symbol")).toBeInTheDocument();
+        expect(screen.getAllByText("[Marker for question 1]")).toHaveLength(2);
+        expect(
+            screen.getByText(
+                "indicates that question 1 references this portion of the passage",
+            ),
+        ).toBeInTheDocument();
+    });
 });

package/src/widgets/__tests__/radio/base-radio_test.jsx

@@ -6,77 +6,327 @@ import * as React from "react";
 
 import "@testing-library/jest-dom"; // Imports custom mathers
 
+import {testDependencies} from "../../../../../../testing/test-dependencies.js";
+import {setDependencies} from "../../../dependencies.js";
+import {generateChoice} from "../../__testdata__/base-radio_testdata.js";
 import BaseRadio from "../../radio/base-radio.jsx";
 
 import type {APIOptions} from "../../../types.js";
 
+function renderBaseRadio(props) {
+    const apiOptions: APIOptions = Object.freeze({});
+
+    const baseProps = {
+        apiOptions,
+        choices: [],
+        deselectEnabled: false,
+        editMode: false,
+        labelWrap: false,
+        countChoices: false,
+        numCorrect: 1,
+        multipleSelect: false,
+
+        // A callback indicating that this choice has changed. Its argument is
+        // an object with two keys: `checked` and `crossedOut`. Each contains
+        // an array of boolean values, specifying the new checked and
+        // crossed-out value of each choice.
+        onChange: ({checked, crossedOut}) => {},
+
+        // Whether this widget was the most recently used widget in this
+        // Renderer. Determines whether we'll auto-scroll the page upon
+        // entering review mode.
+        isLastUsedWidget: false,
+    };
+
+    const overwrittenProps = {...baseProps, ...props};
+
+    return render(<BaseRadio {...overwrittenProps} />);
+}
+
 describe("base-radio", () => {
+    beforeEach(() => {
+        // because choice-none-above uses a Renderer
+        // we need to set dependencies when it's rendered
+        // (this probably needs to be fixed)
+        setDependencies(testDependencies);
+    });
+
+    it("renders a none of the above choice", () => {
+        // Arrange / Act
+        renderBaseRadio({
+            editMode: true,
+            choices: [
+                generateChoice({content: "Option 1", correct: false}),
+                generateChoice({content: "Option B", correct: false}),
+                generateChoice({content: "Option Gamma", correct: false}),
+                generateChoice({content: "Option Delta", correct: false}),
+                generateChoice({
+                    isNoneOfTheAbove: true,
+                    correct: true,
+                }),
+            ],
+        });
+
+        // Assert
+        expect(
+            screen.getByRole("radio", {
+                name: "(Choice E) None of the above",
+            }),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByLabelText("(Choice E) None of the above"),
+        ).toBeInTheDocument();
+        // Note(Tamara): There should be two of these options: one for the
+        // screen reader only radio input and a button for learners
+        // using the visual choices
+        expect(screen.getAllByText("None of the above")).toHaveLength(2);
+    });
+
     describe("edit mode", () => {
         it("should render <li>'s for each choice", () => {
+            // Arrange / Act
+            renderBaseRadio({
+                editMode: true,
+                choices: [
+                    generateChoice({content: "Option 1", correct: false}),
+                    generateChoice({content: "Option B", correct: false}),
+                    generateChoice({content: "Option Gamma", correct: true}),
+                    generateChoice({content: "Option Delta", correct: false}),
+                ],
+            });
+
+            // Assert
+            expect(screen.getAllByRole("listitem")).toHaveLength(4);
+        });
+
+        it("should toggle choice when inner element clicked", () => {
             // Arrange
-            const apiOptions: APIOptions = {
-                styling: {radioStyleVersion: "final"},
+            let updatedValues = null;
+            const onChangeHandler = (newValues) => {
+                updatedValues = newValues;
             };
-            const onChangeHandler = () => {};
+
+            renderBaseRadio({
+                editMode: true,
+                choices: [
+                    generateChoice({content: "Option 1", correct: false}),
+                    generateChoice({content: "Option B", correct: false}),
+                    generateChoice({content: "Option Gamma", correct: true}),
+                    generateChoice({content: "Option Delta", correct: false}),
+                ],
+                onChange: onChangeHandler,
+            });
 
             // Act
-            render(
-                <BaseRadio
-                    multipleSelect={false}
-                    countChoices={false}
-                    numCorrect={1}
-                    editMode={true}
-                    labelWrap={false}
-                    apiOptions={apiOptions}
-                    choices={[
-                        {content: "Option 1", correct: false},
-                        {content: "Option B", correct: false},
-                        {content: "Option Gamma", correct: true},
-                        {content: "Option Delta", correct: false},
-                    ]}
-                    onChange={onChangeHandler}
-                />,
+            userEvent.click(
+                screen.getByRole("radio", {name: "(Choice C) Option Gamma"}),
             );
 
             // Assert
-            expect(screen.getAllByRole("listitem")).toHaveLength(4);
+            expect(updatedValues).toMatchObject({
+                checked: [false, false, true, false],
+            });
         });
+    });
 
-        it("should toggle choice when inner element clicked", () => {
+    describe("selecting and deselecting options", () => {
+        it("deselects multi-select choices", () => {
             // Arrange
-            const apiOptions: APIOptions = {
-                styling: {radioStyleVersion: "final"},
+            let updatedValues = null;
+            const onChangeHandler = (newValues) => {
+                updatedValues = newValues;
             };
+
+            renderBaseRadio({
+                multipleSelect: true,
+                choices: [
+                    generateChoice({
+                        content: "Option 1",
+                        correct: false,
+                        checked: false,
+                    }),
+                    generateChoice({
+                        content: "Option B",
+                        correct: false,
+                        checked: false,
+                    }),
+                    generateChoice({
+                        content: "Option Gamma",
+                        correct: true,
+                        checked: true,
+                    }),
+                    generateChoice({
+                        content: "Option Delta",
+                        correct: false,
+                        checked: false,
+                    }),
+                ],
+                onChange: onChangeHandler,
+            });
+
+            // Act
+            const radioButton = screen.getByRole("checkbox", {
+                name: "(Choice C, Checked) Option Gamma",
+            });
+            userEvent.click(radioButton);
+
+            // Assert
+            expect(updatedValues).toMatchObject({
+                checked: [false, false, false, false],
+            });
+        });
+
+        // Equivalent to "should toggle choice when inner element clicked" but with editMode set to false
+        it("selects single select choices", () => {
+            // Arrange
             let updatedValues = null;
             const onChangeHandler = (newValues) => {
                 updatedValues = newValues;
             };
 
-            render(
-                <BaseRadio
-                    multipleSelect={false}
-                    countChoices={false}
-                    numCorrect={1}
-                    editMode={true}
-                    labelWrap={false}
-                    apiOptions={apiOptions}
-                    choices={[
-                        {content: "Option 1", correct: false},
-                        {content: "Option B", correct: false},
-                        {content: "Option Gamma", correct: true},
-                        {content: "Option Delta", correct: false},
-                    ]}
-                    onChange={onChangeHandler}
-                />,
-            );
+            renderBaseRadio({
+                multipleSelect: false,
+                choices: [
+                    generateChoice({
+                        content: "Option 1",
+                        correct: false,
+                    }),
+                    generateChoice({
+                        content: "Option B",
+                        correct: false,
+                    }),
+                    generateChoice({
+                        content: "Option Gamma",
+                        correct: true,
+                    }),
+                    generateChoice({
+                        content: "Option Delta",
+                        correct: false,
+                    }),
+                ],
+                onChange: onChangeHandler,
+            });
 
             // Act
-            userEvent.click(screen.getByText("(Choice C)", {selector: "div"}));
+            userEvent.click(
+                screen.getByRole("radio", {name: "(Choice C) Option Gamma"}),
+            );
 
             // Assert
             expect(updatedValues).toMatchObject({
                 checked: [false, false, true, false],
             });
         });
+
+        it("deselects single select selected choice", () => {
+            // Arrange
+            let updatedValues = null;
+            const onChangeHandler = (newValues) => {
+                updatedValues = newValues;
+            };
+
+            renderBaseRadio({
+                multipleSelect: false,
+                choices: [
+                    generateChoice({
+                        content: "Option 1",
+                        correct: false,
+                        checked: true,
+                    }),
+                    generateChoice({
+                        content: "Option B",
+                        correct: false,
+                    }),
+                    generateChoice({
+                        content: "Option Gamma",
+                        correct: true,
+                    }),
+                    generateChoice({
+                        content: "Option Delta",
+                        correct: false,
+                    }),
+                ],
+                onChange: onChangeHandler,
+            });
+
+            // Act
+            userEvent.click(screen.getAllByRole("radio")[0]);
+
+            // Assert
+            expect(updatedValues).toMatchObject({
+                checked: [false, false, false, false],
+            });
+        });
+    });
+
+    describe("instruction text", () => {
+        it("displays correct text for single select", () => {
+            // Arrange / Act
+            renderBaseRadio({
+                multipleSelect: false,
+                choices: [
+                    generateChoice({content: "Option 1", correct: false}),
+                    generateChoice({content: "Option B", correct: false}),
+                    generateChoice({content: "Option Gamma", correct: true}),
+                    generateChoice({content: "Option Delta", correct: false}),
+                ],
+            });
+
+            // Assert
+            // note(matthewc) role=group is for the fieldset/legend
+            // https://www.w3.org/TR/html-aria/
+            const group = screen.getByRole("group", {
+                name: "Choose 1 answer:",
+            });
+            expect(group).toBeInTheDocument();
+            expect(group).toBeVisible();
+        });
+
+        it("displays correct text for multi select (count choices off)", () => {
+            // Arrange / Act
+            renderBaseRadio({
+                multipleSelect: true,
+                countChoices: false,
+                choices: [
+                    generateChoice({content: "Option 1", correct: false}),
+                    generateChoice({content: "Option B", correct: false}),
+                    generateChoice({content: "Option Gamma", correct: true}),
+                    generateChoice({content: "Option Delta", correct: true}),
+                ],
+            });
+
+            // Assert
+            // note(matthewc) role=group is for the fieldset/legend
+            // https://www.w3.org/TR/html-aria/
+            const group = screen.getByRole("group", {
+                name: "Choose all answers that apply:",
+            });
+            expect(group).toBeInTheDocument();
+            expect(group).toBeVisible();
+        });
+
+        it("displays correct text for multi select (count choices on)", () => {
+            // Arrange / Act
+            renderBaseRadio({
+                multipleSelect: true,
+                countChoices: true,
+                numCorrect: 2,
+                choices: [
+                    generateChoice({content: "Option 1", correct: false}),
+                    generateChoice({content: "Option B", correct: false}),
+                    generateChoice({content: "Option Gamma", correct: true}),
+                    generateChoice({content: "Option Delta", correct: true}),
+                ],
+            });
+
+            // Assert
+            // note(matthewc) role=group is for the fieldset/legend
+            // https://www.w3.org/TR/html-aria/
+            const group = screen.getByRole("group", {
+                name: "Choose 2 answers:",
+            });
+            expect(group).toBeInTheDocument();
+            expect(group).toBeVisible();
+        });
     });
 });

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

@@ -0,0 +1,67 @@
+// @flow
+
+import {render, screen} from "@testing-library/react";
+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";
+
+function renderChoiceIcon(options) {
+    const defaultOptions = {
+        pos: 0,
+        checked: false,
+        crossedOut: false,
+        focused: false,
+        hovered: false,
+        pressed: false,
+        correct: false,
+        showCorrectness: false,
+        product: "library",
+        multipleSelect: false,
+        reviewMode: false,
+        previouslyAnswered: false,
+        transparentBackground: false,
+    };
+
+    const overwrittenOptions = {...defaultOptions, ...options};
+
+    return render(<ChoiceIcon {...overwrittenOptions} />);
+}
+
+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`,
+                    );
+                });
+            },
+        );
+    });
+});