@khanacademy/perseus 0.4.3 → 1.1.0

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

@@ -0,0 +1,302 @@
+// @flow
+
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom"; // Imports custom mathers
+
+import Choice from "../../radio/choice.jsx";
+
+function renderChoice(options) {
+    const defaultOptions = {
+        checked: false,
+        rationale: "This is a good rationale",
+        content: "This is a possible choice",
+        correct: true,
+        disabled: false,
+        pos: 0,
+        reviewMode: false,
+        showRationale: false,
+        showCorrectness: false,
+        multipleSelect: false,
+        crossedOut: false,
+        previouslyAnswered: false,
+        ref: {current: null},
+    };
+
+    const overwrittenOptions = {...defaultOptions, ...options};
+
+    return render(<Choice {...overwrittenOptions} />);
+}
+
+describe("all choice options", () => {
+    it("renders rationale", () => {
+        // Arrange / Act
+        renderChoice({showRationale: true});
+
+        // Assert
+        expect(screen.getByText("This is a good rationale")).toBeVisible();
+    });
+
+    it("shows correct when in review mode", () => {
+        // Arrange / Act
+        renderChoice({
+            checked: false,
+            correct: true,
+            showCorrectness: true,
+            reviewMode: true,
+        });
+
+        // Assert
+        expect(screen.getByText("Correct")).toBeVisible();
+    });
+
+    it("shows incorrect when in review mode", () => {
+        // Arrange / Act
+        renderChoice({
+            checked: false,
+            correct: false,
+            showCorrectness: true,
+            reviewMode: true,
+        });
+
+        // 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(
+            screen.getByText("(Choice A, Correct) This is a possible choice"),
+        ).toBeVisible();
+    });
+
+    it("shows correct selected when in review mode", () => {
+        // Arrange / Act
+        renderChoice({
+            checked: true,
+            correct: true,
+            showCorrectness: true,
+            reviewMode: true,
+        });
+
+        // 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(screen.getByText("Incorrect (selected)")).toBeVisible();
+    });
+});
+
+// Tests 1 of 2 element types used to select a choice
+describe("choice button", () => {
+    it("selects the choice by clicking the button", () => {
+        // Arrange / Act
+        const onChangeSpy = jest.fn();
+        renderChoice({onChange: onChangeSpy});
+
+        const button = screen.getByRole("button", {hidden: true});
+        userEvent.click(button);
+
+        // Assert
+        expect(onChangeSpy).toHaveBeenCalledWith({
+            checked: true,
+            crossedOut: false,
+        });
+    });
+
+    it("has correct aria-disabled when disabled", () => {
+        // Arrange / Act
+        renderChoice({disabled: true});
+
+        const button = screen.getByRole("button", {hidden: true});
+
+        // Assert
+        expect(button.getAttribute("aria-disabled")).toBe("true");
+    });
+
+    it("has correct aria-disabled when not disabled", () => {
+        // Arrange / Act
+        renderChoice({disabled: false});
+
+        const button = screen.getByRole("button", {hidden: true});
+
+        // Assert
+        expect(button.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("can be checked", () => {
+        // Arrange
+        let checked = false;
+        renderChoice({
+            checked,
+            onChange: (next) => {
+                checked = next.checked;
+            },
+        });
+
+        // Act
+        const button = screen.getByRole("button", {hidden: true});
+        userEvent.click(button);
+
+        // Assert
+        expect(checked).toBeTrue();
+    });
+
+    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,
+            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(input).not.toBeChecked();
+    });
+
+    it("registers as checked with checked set to true", () => {
+        // Arrange / Act
+        renderChoice({checked: true});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Checked) This is a possible choice",
+        });
+
+        // Assert
+        expect(input).toBeChecked();
+    });
+
+    it("has correct a11y text when crossed out", () => {
+        // Arrange / Act
+        renderChoice({crossedOut: true});
+
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Crossed out) This is a possible choice",
+        });
+
+        // Assert
+        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", () => {
+        // Arrange
+        let checked = false;
+        renderChoice({
+            checked,
+            onChange: (next) => {
+                checked = next.checked;
+            },
+        });
+
+        // Act
+        const input = screen.getByRole("radio", {
+            name: "(Choice A) This is a possible choice",
+        });
+        userEvent.click(input);
+
+        // Assert
+        expect(checked).toBe(true);
+    });
+
+    it("can be unchecked", () => {
+        // Arrange
+        let checked = true;
+        renderChoice({
+            checked,
+            onChange: (next) => {
+                checked = next.checked;
+            },
+        });
+
+        // Act
+        const input = screen.getByRole("radio", {
+            name: "(Choice A, Checked) This is a possible choice",
+        });
+        userEvent.click(input);
+
+        // Assert
+        expect(checked).toBeFalse();
+    });
+});

package/src/widgets/__tests__/radio/focus-ring_test.jsx

@@ -0,0 +1,23 @@
+// @flow
+
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import "@testing-library/jest-dom"; // Imports custom mathers
+
+import FocusRing from "../../radio/focus-ring.jsx";
+
+describe("choice icon", () => {
+    describe.each([[true], [false]])("multipleSelect: %s", (multipleSelect) => {
+        it("renders with the correct border radius", () => {
+            // Arrange/Act
+            render(<FocusRing multipleSelect={multipleSelect} />);
+
+            const focusRing = screen.getByTestId("focus-ring");
+
+            // Assert
+            const expectedRadius = multipleSelect ? "5px" : "50%";
+            expect(focusRing).toHaveStyle(`border-radius: ${expectedRadius}`);
+        });
+    });
+});

package/src/widgets/__tests__/radio/option-status_test.jsx

@@ -0,0 +1,65 @@
+// @flow
+
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import "@testing-library/jest-dom"; // Imports custom mathers
+
+import OptionStatus from "../../radio/option-status.jsx";
+
+function renderOptionStatus(options) {
+    const defaultOptions = {
+        correct: false,
+        checked: false,
+        crossedOut: false,
+        previouslyAnswered: false,
+        reviewMode: true,
+    };
+
+    const overwrittenOptions = {...defaultOptions, ...options};
+
+    return render(<OptionStatus {...overwrittenOptions} />);
+}
+
+describe("answer text", () => {
+    it.each([
+        [true, "Correct"],
+        [false, "Incorrect"],
+    ])(
+        "renders with the correct text based on 'correct' prop: %s => %s",
+        (correct, expectedText) => {
+            // Arrange/Act
+            renderOptionStatus({correct: correct});
+            const optionStatus = screen.getByText(expectedText);
+
+            // Assert
+            expect(optionStatus).toBeVisible();
+        },
+    );
+
+    it.each([
+        [true, "Incorrect (selected)"],
+        [false, "Incorrect"],
+    ])(
+        "renders with the correct text based on 'checked' prop: %s => %s",
+        (checked, expectedText) => {
+            // Arrange/Act
+            renderOptionStatus({correct: false, checked: checked});
+            const optionStatus = screen.getByText(expectedText);
+
+            // Assert
+            expect(optionStatus).toBeVisible();
+        },
+    );
+
+    it("renders correctly based on 'crossedOut' and 'correct'", () => {
+        // Arrange/Act
+        renderOptionStatus({crossedOut: true, correct: true});
+        const optionStatus = screen.getByText(
+            "Correct (but you crossed it out)",
+        );
+
+        // Assert
+        expect(optionStatus).toBeVisible();
+    });
+});

package/src/widgets/__tests__/radio_test.jsx

@@ -25,7 +25,7 @@ import type {
 import type {APIOptions} from "../../types.js";
 
 const selectOption = (index: number) => {
-    const options = screen.getAllByRole("checkbox");
+    const options = screen.getAllByRole("radio");
 
     // element that is null/undefined (ie. if the index is invalid) so we
     // manually check and throw here to protect future me, and others :)
@@ -101,8 +101,7 @@ describe("single-choice question", () => {
                 it("should accept the right answer (touch)", () => {
                     // Arrange
                     const {renderer} = renderQuestion(question, apiOptions);
-                    const correctRadio =
-                        screen.getAllByRole("checkbox")[correct];
+                    const correctRadio = screen.getAllByRole("radio")[correct];
 
                     // Act
                     fireEvent.touchStart(correctRadio);
@@ -157,7 +156,7 @@ describe("single-choice question", () => {
                     renderer.deselectIncorrectSelectedChoices();
 
                     // Assert
-                    screen.getAllByRole("checkbox").forEach((r) => {
+                    screen.getAllByRole("radio").forEach((r) => {
                         expect(r).not.toBeChecked();
                     });
                 });
@@ -181,9 +180,14 @@ describe("single-choice question", () => {
 
                     // Assert
                     // Everything's read-only so no selections made
-                    screen.getAllByRole("checkbox").forEach((r) => {
-                        expect(r).toHaveAttribute("aria-disabled", "true");
-                    });
+                    // Note(TB): The visual buttons are hidden from screen readers
+                    // so they need to be identified as hidden
+                    // The visual button has the aria attributes
+                    screen
+                        .getAllByRole("button", {hidden: true})
+                        .forEach((r) => {
+                            expect(r).toHaveAttribute("aria-disabled", "true");
+                        });
                 });
             },
         );
@@ -194,11 +198,18 @@ describe("single-choice question", () => {
 
             // Act
             userEvent.tab();
-            expect(screen.getAllByRole("checkbox")[0]).toHaveFocus();
+            // Note(TB): The visual buttons are hidden from screen readers
+            // so they need to be identified as hidden;
+            // cannot access screen reader buttons via tabbing
+            expect(
+                screen.getAllByRole("button", {hidden: true})[0],
+            ).toHaveFocus();
             userEvent.tab();
 
             // Assert
-            expect(screen.getAllByRole("checkbox")[1]).toHaveFocus();
+            expect(
+                screen.getAllByRole("button", {hidden: true})[1],
+            ).toHaveFocus();
         });
 
         it("should be able to navigate up by keyboard", () => {
@@ -207,13 +218,23 @@ describe("single-choice question", () => {
 
             // Act
             userEvent.tab();
-            expect(screen.getAllByRole("checkbox")[0]).toHaveFocus();
+            // Note(TB): The visual buttons are hidden from screen readers
+            // so they need to be identified as hidden
+            expect(
+                screen.getAllByRole("button", {hidden: true})[0],
+            ).toHaveFocus();
+
             userEvent.tab();
-            expect(screen.getAllByRole("checkbox")[1]).toHaveFocus();
+            expect(
+                screen.getAllByRole("button", {hidden: true})[1],
+            ).toHaveFocus();
+
             userEvent.tab({shift: true});
 
             // Assert
-            expect(screen.getAllByRole("checkbox")[0]).toHaveFocus();
+            expect(
+                screen.getAllByRole("button", {hidden: true})[0],
+            ).toHaveFocus();
         });
 
         it("should be able to navigate through 'None of the above' choice by keyboard", () => {
@@ -229,7 +250,11 @@ describe("single-choice question", () => {
             userEvent.tab();
 
             // Assert
-            expect(screen.getAllByRole("checkbox")[2]).toHaveFocus();
+            // Note(TB): The visual buttons are hidden from screen readers
+            // so they need to be identified as hidden
+            expect(
+                screen.getAllByRole("button", {hidden: true})[2],
+            ).toHaveFocus();
         });
 
         it.each([
@@ -251,7 +276,7 @@ describe("single-choice question", () => {
             // We click on the first item, which was the second (index == 1)
             // item in the original choices. But because of enforced ordering,
             // it is now at the top of the list (and thus our correct answer).
-            userEvent.click(screen.getAllByRole("checkbox")[0]);
+            userEvent.click(screen.getAllByRole("radio")[0]);
 
             // Assert
             const items = screen.getAllByRole("listitem");
@@ -393,7 +418,6 @@ describe("single-choice question", () => {
 
             it("should cross-out selection and dismiss button when clicked", async () => {
                 // Arrange
-
                 renderQuestion(question, crossOutApiOptions);
                 userEvent.click(
                     screen.getByRole("button", {

package/src/widgets/definition.jsx

@@ -72,7 +72,7 @@ class Definition extends React.Component<DefinitionProps> {
                     >
                         <span className="perseus-widget-definition">
                             <Button
-                                size="small"
+                                size="medium"
                                 kind="tertiary"
                                 onClick={() => {
                                     this.props.trackInteraction();