@khanacademy/perseus 1.0.0 → 1.1.1

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

@@ -69,9 +69,17 @@ describe("base-radio", () => {
 
         // Assert
         expect(
-            screen.getByRole("checkbox", {name: "Select Choice E"}),
+            screen.getByRole("radio", {
+                name: "(Choice E) None of the above",
+            }),
         ).toBeInTheDocument();
-        expect(screen.getByText("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", () => {
@@ -111,7 +119,7 @@ describe("base-radio", () => {
 
             // Act
             userEvent.click(
-                screen.getByRole("checkbox", {name: "Select Choice C"}),
+                screen.getByRole("radio", {name: "(Choice C) Option Gamma"}),
             );
 
             // Assert
@@ -158,7 +166,7 @@ describe("base-radio", () => {
 
             // Act
             const radioButton = screen.getByRole("checkbox", {
-                name: "Select Choice C",
+                name: "(Choice C, Checked) Option Gamma",
             });
             userEvent.click(radioButton);
 
@@ -169,7 +177,7 @@ describe("base-radio", () => {
         });
 
         // Equivalent to "should toggle choice when inner element clicked" but with editMode set to false
-        it("select single select choices", () => {
+        it("selects single select choices", () => {
             // Arrange
             let updatedValues = null;
             const onChangeHandler = (newValues) => {
@@ -177,7 +185,7 @@ describe("base-radio", () => {
             };
 
             renderBaseRadio({
-                multipleSelect: true,
+                multipleSelect: false,
                 choices: [
                     generateChoice({
                         content: "Option 1",
@@ -201,7 +209,7 @@ describe("base-radio", () => {
 
             // Act
             userEvent.click(
-                screen.getByRole("checkbox", {name: "Select Choice C"}),
+                screen.getByRole("radio", {name: "(Choice C) Option Gamma"}),
             );
 
             // Assert
@@ -209,6 +217,46 @@ describe("base-radio", () => {
                 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", () => {

package/src/widgets/__tests__/radio/choice_test.jsx

@@ -30,66 +30,105 @@ function renderChoice(options) {
     return render(<Choice {...overwrittenOptions} />);
 }
 
-describe("choice", () => {
-    it("renders choice content", () => {
+describe("all choice options", () => {
+    it("renders rationale", () => {
         // Arrange / Act
-        renderChoice();
+        renderChoice({showRationale: true});
 
         // Assert
-        expect(screen.getByText("This is a possible choice")).toBeVisible();
+        expect(screen.getByText("This is a good rationale")).toBeVisible();
     });
 
-    it("renders rationale", () => {
+    it("shows correct when in review mode", () => {
         // Arrange / Act
-        renderChoice({showRationale: true});
+        renderChoice({
+            checked: false,
+            correct: true,
+            showCorrectness: true,
+            reviewMode: true,
+        });
 
         // Assert
-        expect(screen.getByText("This is a good rationale")).toBeVisible();
+        expect(screen.getByText("Correct")).toBeVisible();
     });
 
-    it("renders choice button", () => {
+    it("shows incorrect when in review mode", () => {
         // Arrange / Act
-        renderChoice();
+        renderChoice({
+            checked: false,
+            correct: false,
+            showCorrectness: true,
+            reviewMode: true,
+        });
 
-        const button = screen.getByRole("checkbox", {
-            name: "Select Choice A",
+        // Assert
+        expect(screen.getByText("Incorrect")).toBeVisible();
+    });
+
+    it("shows correct a11y text when in review mode", () => {
+        // Arrange / Act
+        renderChoice({
+            checked: false,
+            correct: true,
+            showCorrectness: true,
+            reviewMode: true,
         });
 
         // Assert
-        expect(button).toBeVisible();
+        expect(
+            screen.getByText("(Choice A, Correct) This is a possible choice"),
+        ).toBeVisible();
     });
 
-    it("has correct aria-checked when checked", () => {
+    it("shows correct selected when in review mode", () => {
         // Arrange / Act
-        renderChoice({checked: true});
+        renderChoice({
+            checked: true,
+            correct: true,
+            showCorrectness: true,
+            reviewMode: true,
+        });
 
-        const button = screen.getByRole("checkbox", {
-            name: "Select Choice A",
+        // Assert
+        expect(screen.getByText("Correct (selected)")).toBeVisible();
+    });
+
+    it("shows incorrect selected when in review mode", () => {
+        // Arrange / Act
+        renderChoice({
+            checked: true,
+            correct: false,
+            showCorrectness: true,
+            reviewMode: true,
         });
 
         // Assert
-        expect(button).toBeChecked();
+        expect(screen.getByText("Incorrect (selected)")).toBeVisible();
     });
+});
 
-    it("has correct aria-checked when unchecked", () => {
+// Tests 1 of 2 element types used to select a choice
+describe("choice button", () => {
+    it("selects the choice by clicking the button", () => {
         // Arrange / Act
-        renderChoice({checked: false});
+        const onChangeSpy = jest.fn();
+        renderChoice({onChange: onChangeSpy});
 
-        const button = screen.getByRole("checkbox", {
-            name: "Select Choice A",
-        });
+        const button = screen.getByRole("button", {hidden: true});
+        userEvent.click(button);
 
         // Assert
-        expect(button).not.toBeChecked();
+        expect(onChangeSpy).toHaveBeenCalledWith({
+            checked: true,
+            crossedOut: false,
+        });
     });
 
     it("has correct aria-disabled when disabled", () => {
         // Arrange / Act
         renderChoice({disabled: true});
 
-        const button = screen.getByRole("checkbox", {
-            name: "Select Choice A",
-        });
+        const button = screen.getByRole("button", {hidden: true});
 
         // Assert
         expect(button.getAttribute("aria-disabled")).toBe("true");
@@ -99,64 +138,126 @@ describe("choice", () => {
         // Arrange / Act
         renderChoice({disabled: false});
 
-        const button = screen.getByRole("checkbox", {
-            name: "Select Choice A",
-        });
+        const button = screen.getByRole("button", {hidden: true});
 
         // Assert
         expect(button.getAttribute("aria-disabled")).toBe("false");
     });
 
-    it("shows correct when in review mode", () => {
-        // Arrange / Act
+    it("can be checked", () => {
+        // Arrange
+        let checked = false;
         renderChoice({
-            checked: false,
-            correct: true,
-            showCorrectness: true,
-            reviewMode: true,
+            checked,
+            onChange: (next) => {
+                checked = next.checked;
+            },
         });
 
+        // Act
+        const button = screen.getByRole("button", {hidden: true});
+        userEvent.click(button);
+
         // Assert
-        expect(screen.getByText("Correct")).toBeVisible();
+        expect(checked).toBeTrue();
     });
 
-    it("shows correct selected when in review mode", () => {
-        // Arrange / Act
+    it("can be unchecked", () => {
+        // Arrange
+        let checked = true;
         renderChoice({
+            checked,
+            onChange: (next) => {
+                checked = next.checked;
+            },
+        });
+
+        // Act
+        const button = screen.getByRole("button", {hidden: true});
+        userEvent.click(button);
+
+        // Assert
+        expect(checked).toBeFalse();
+    });
+});
+
+// Tests 2 of 2 element types used to select a choice
+describe("choice input (screen reader only)", () => {
+    it("selects the choice by clicking the input", () => {
+        // Arrange / Act
+        const onChangeSpy = jest.fn();
+        renderChoice({onChange: onChangeSpy});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A) This is a possible choice",
+        });
+        userEvent.click(input);
+
+        // Assert
+        expect(onChangeSpy).toHaveBeenCalledWith({
             checked: true,
-            correct: true,
-            showCorrectness: true,
-            reviewMode: true,
+            crossedOut: false,
+        });
+    });
+
+    it("registers as unchecked with checked set to false", () => {
+        // Arrange / Act
+        renderChoice({checked: false});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A) This is a possible choice",
         });
 
         // Assert
-        expect(screen.getByText("Correct (selected)")).toBeVisible();
+        expect(input).not.toBeChecked();
     });
 
-    it("shows incorrect when in review mode", () => {
+    it("registers as checked with checked set to true", () => {
         // Arrange / Act
-        renderChoice({
-            checked: false,
-            correct: false,
-            showCorrectness: true,
-            reviewMode: true,
+        renderChoice({checked: true});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Checked) This is a possible choice",
         });
 
         // Assert
-        expect(screen.getByText("Incorrect")).toBeVisible();
+        expect(input).toBeChecked();
     });
 
-    it("shows incorrect selected when in review mode", () => {
+    it("has correct a11y text when crossed out", () => {
         // Arrange / Act
-        renderChoice({
-            checked: true,
-            correct: false,
-            showCorrectness: true,
-            reviewMode: true,
+        renderChoice({crossedOut: true});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Crossed out) This is a possible choice",
         });
 
         // Assert
-        expect(screen.getByText("Incorrect (selected)")).toBeVisible();
+        expect(input).toBeVisible();
+    });
+
+    it("has correct a11y text when incorrect, crossed out, and showCorrectness is true", () => {
+        // Arrange / Act
+        renderChoice({crossedOut: true, correct: false, showCorrectness: true});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Crossed out, Incorrect) This is a possible choice",
+        });
+
+        // Assert
+        expect(input).toBeVisible();
+    });
+
+    it("has correct a11y text when correct, crossed out, and showCorrectness is true", () => {
+        // Arrange / Act
+        renderChoice({crossedOut: true, correct: true, showCorrectness: true});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Crossed out, Correct) This is a possible choice",
+        });
+
+        // Assert
+        expect(input).toBeVisible();
     });
 
     it("can be checked", () => {
@@ -170,13 +271,13 @@ describe("choice", () => {
         });
 
         // Act
-        const button = screen.getByRole("checkbox", {
-            name: "Select Choice A",
+        const input = screen.getByRole("radio", {
+            name: "(Choice A) This is a possible choice",
         });
-        userEvent.click(button);
+        userEvent.click(input);
 
         // Assert
-        expect(checked).toBeTrue();
+        expect(checked).toBe(true);
     });
 
     it("can be unchecked", () => {
@@ -190,10 +291,10 @@ describe("choice", () => {
         });
 
         // Act
-        const button = screen.getByRole("checkbox", {
-            name: "Select Choice A",
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Checked) This is a possible choice",
         });
-        userEvent.click(button);
+        userEvent.click(input);
 
         // Assert
         expect(checked).toBeFalse();