@khanacademy/perseus 0.4.3 → 1.0.0

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

@@ -6,72 +6,203 @@ 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("checkbox", {name: "Select Choice E"}),
+        ).toBeInTheDocument();
+        expect(screen.getByText("None of the above")).toBeInTheDocument();
+    });
+
     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("checkbox", {name: "Select Choice C"}),
             );
 
             // 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: "Select Choice C",
+            });
+            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("select 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: 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
-            userEvent.click(screen.getByText("(Choice C)", {selector: "div"}));
+            userEvent.click(
+                screen.getByRole("checkbox", {name: "Select Choice C"}),
+            );
 
             // Assert
             expect(updatedValues).toMatchObject({
@@ -79,4 +210,75 @@ describe("base-radio", () => {
             });
         });
     });
+
+    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`,
+                    );
+                });
+            },
+        );
+    });
+});

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

@@ -0,0 +1,201 @@
+// @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("choice", () => {
+    it("renders choice content", () => {
+        // Arrange / Act
+        renderChoice();
+
+        // Assert
+        expect(screen.getByText("This is a possible choice")).toBeVisible();
+    });
+
+    it("renders rationale", () => {
+        // Arrange / Act
+        renderChoice({showRationale: true});
+
+        // Assert
+        expect(screen.getByText("This is a good rationale")).toBeVisible();
+    });
+
+    it("renders choice button", () => {
+        // Arrange / Act
+        renderChoice();
+
+        const button = screen.getByRole("checkbox", {
+            name: "Select Choice A",
+        });
+
+        // Assert
+        expect(button).toBeVisible();
+    });
+
+    it("has correct aria-checked when checked", () => {
+        // Arrange / Act
+        renderChoice({checked: true});
+
+        const button = screen.getByRole("checkbox", {
+            name: "Select Choice A",
+        });
+
+        // Assert
+        expect(button).toBeChecked();
+    });
+
+    it("has correct aria-checked when unchecked", () => {
+        // Arrange / Act
+        renderChoice({checked: false});
+
+        const button = screen.getByRole("checkbox", {
+            name: "Select Choice A",
+        });
+
+        // Assert
+        expect(button).not.toBeChecked();
+    });
+
+    it("has correct aria-disabled when disabled", () => {
+        // Arrange / Act
+        renderChoice({disabled: true});
+
+        const button = screen.getByRole("checkbox", {
+            name: "Select Choice A",
+        });
+
+        // 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("checkbox", {
+            name: "Select Choice A",
+        });
+
+        // Assert
+        expect(button.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    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 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 when in review mode", () => {
+        // Arrange / Act
+        renderChoice({
+            checked: false,
+            correct: false,
+            showCorrectness: true,
+            reviewMode: true,
+        });
+
+        // Assert
+        expect(screen.getByText("Incorrect")).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();
+    });
+
+    it("can be checked", () => {
+        // Arrange
+        let checked = false;
+        renderChoice({
+            checked,
+            onChange: (next) => {
+                checked = next.checked;
+            },
+        });
+
+        // Act
+        const button = screen.getByRole("checkbox", {
+            name: "Select Choice A",
+        });
+        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("checkbox", {
+            name: "Select Choice A",
+        });
+        userEvent.click(button);
+
+        // 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();
+    });
+});