@khanacademy/perseus 19.1.5 → 19.1.7

package/src/widgets/__tests__/radio/choice.test.tsx

@@ -1,310 +0,0 @@
-import {describe, it} from "@jest/globals";
-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";
-
-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},
-    } as const;
-
-    const overwrittenOptions = {...defaultOptions, ...options} as const;
-
-    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.each([[true], [false]])(
-        "selects the choice by clicking the option when multiple select is: %s",
-        (multipleSelect: boolean) => {
-            // Arrange / Act
-            const onChangeSpy = jest.fn();
-            renderChoice({onChange: onChangeSpy, multipleSelect});
-
-            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.each([[true], [false]])(
-        "selects the choice by clicking the option when multiple select is: %s",
-        (multipleSelect: boolean) => {
-            // Arrange / Act
-            const onChangeSpy = jest.fn();
-            renderChoice({onChange: onChangeSpy, multipleSelect});
-
-            const input = screen.getByRole(
-                multipleSelect ? "checkbox" : "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.tsx

@@ -1,22 +0,0 @@
-import {describe, it} from "@jest/globals";
-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";
-
-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.tsx

@@ -1,77 +0,0 @@
-import {describe, it} from "@jest/globals";
-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";
-
-function renderOptionStatus(
-    options:
-        | {
-              checked: any;
-              correct: boolean;
-          }
-        | {
-              correct: any;
-          }
-        | {
-              correct: boolean;
-              crossedOut: boolean;
-          },
-) {
-    const defaultOptions = {
-        correct: false,
-        checked: false,
-        crossedOut: false,
-        previouslyAnswered: false,
-        reviewMode: true,
-    } as const;
-
-    const overwrittenOptions = {...defaultOptions, ...options} as const;
-
-    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();
-    });
-});