@khanacademy/wonder-blocks-form 4.9.1 → 4.9.3

package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap

@@ -1,247 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CheckboxCore type:default checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:default checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:default checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="false"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="false"
-    checked=""
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="true"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #1865f2;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    checked=""
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-  <span
-    style="position: absolute; top: 4px; left: 4px; height: 8px; width: 8px; border-radius: 50%; background-color: rgba(33, 36, 44, 0.32);"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;

package/src/__tests__/custom-snapshot.test.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import CheckboxCore from "../components/checkbox-core";
-import RadioCore from "../components/radio-core";
-
-const states = ["default", "error", "disabled"];
-const checkedStates = [false, true, null];
-
-describe("CheckboxCore", () => {
-    states.forEach((state: any) => {
-        checkedStates.forEach((checked: any) => {
-            test(`type:${state} checked:${String(checked)}`, () => {
-                const disabled = state === "disabled";
-                const {container} = render(
-                    <CheckboxCore
-                        checked={checked}
-                        disabled={disabled}
-                        error={state === "error"}
-                        onClick={() => {}}
-                    />,
-                );
-
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-});
-
-describe("RadioCore", () => {
-    states.forEach((state: any) => {
-        checkedStates.forEach((checked: any) => {
-            test(`type:${state} checked:${String(checked)}`, () => {
-                const disabled = state === "disabled";
-                const {container} = render(
-                    <RadioCore
-                        checked={checked}
-                        disabled={disabled}
-                        error={state === "error"}
-                        onClick={() => {}}
-                    />,
-                );
-
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-});

package/src/components/__tests__/checkbox-group.test.tsx

@@ -1,162 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import CheckboxGroup from "../checkbox-group";
-import Choice from "../choice";
-
-describe("CheckboxGroup", () => {
-    describe("behavior", () => {
-        const TestComponent = ({errorMessage}: {errorMessage?: string}) => {
-            const [selectedValues, setSelectedValue] = React.useState([
-                "a",
-                "b",
-            ]);
-            const handleChange = (selectedValues: any) => {
-                setSelectedValue(selectedValues);
-            };
-            return (
-                <CheckboxGroup
-                    label="Test"
-                    description="test description"
-                    groupName="test"
-                    onChange={handleChange}
-                    selectedValues={selectedValues}
-                    errorMessage={errorMessage}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    <Choice label="b" value="b" aria-labelledby="test-b" />
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                </CheckboxGroup>
-            );
-        };
-
-        it("has the correct items checked", async () => {
-            // Arrange, Act
-            render(<TestComponent />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Assert
-            // a starts off checked
-            expect(checkboxes[0]).toBeChecked();
-            expect(checkboxes[1]).toBeChecked();
-            expect(checkboxes[2]).not.toBeChecked();
-        });
-
-        it("clicking a selected choice deselects it", async () => {
-            // Arrange
-            render(<TestComponent />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Act
-            await userEvent.click(checkboxes[0]);
-
-            // Assert
-            expect(checkboxes[0]).not.toBeChecked();
-            expect(checkboxes[1]).toBeChecked();
-            expect(checkboxes[2]).not.toBeChecked();
-        });
-
-        it("should set aria-invalid on choices when there's an error message", async () => {
-            // Arrange, Act
-            render(<TestComponent errorMessage="there's an error" />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Assert
-            expect(checkboxes[0]).toHaveAttribute("aria-invalid", "true");
-            expect(checkboxes[1]).toHaveAttribute("aria-invalid", "true");
-            expect(checkboxes[2]).toHaveAttribute("aria-invalid", "true");
-        });
-
-        it("checks that aria attributes have been added correctly", async () => {
-            // Arrange, Act
-            render(<TestComponent />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Assert
-            expect(checkboxes[0]).toHaveAttribute("aria-labelledby", "test-a");
-            expect(checkboxes[1]).toHaveAttribute("aria-labelledby", "test-b");
-            expect(checkboxes[2]).toHaveAttribute("aria-labelledby", "test-c");
-        });
-    });
-
-    describe("flexible props", () => {
-        it("should render with a React.Node label", async () => {
-            // Arrange, Act
-            render(
-                <CheckboxGroup
-                    label={
-                        <span>
-                            label with <strong>strong</strong> text
-                        </span>
-                    }
-                    groupName="test"
-                    onChange={() => {}}
-                    selectedValues={[]}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    <Choice label="b" value="b" aria-labelledby="test-b" />
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                </CheckboxGroup>,
-            );
-
-            // Assert
-            expect(await screen.findByText("strong")).toBeInTheDocument();
-        });
-
-        it("should render with a React.Node description", async () => {
-            // Arrange, Act
-            render(
-                <CheckboxGroup
-                    label="label"
-                    description={
-                        <span>
-                            description with <strong>strong</strong> text
-                        </span>
-                    }
-                    groupName="test"
-                    onChange={() => {}}
-                    selectedValues={[]}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    <Choice label="b" value="b" aria-labelledby="test-b" />
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                </CheckboxGroup>,
-            );
-
-            // Assert
-            expect(await screen.findByText("strong")).toBeInTheDocument();
-        });
-
-        it("should filter out false-y children when rendering", async () => {
-            // Arrange, Act
-            render(
-                <CheckboxGroup
-                    label="label"
-                    description="description"
-                    groupName="test"
-                    onChange={() => {}}
-                    selectedValues={[]}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    {/* eslint-disable-next-line no-constant-condition */}
-                    {false ? (
-                        <Choice label="b" value="b" aria-labelledby="test-b" />
-                    ) : null}
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                    {undefined}
-                    {null}
-                </CheckboxGroup>,
-            );
-
-            // Assert
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            expect(checkboxes).toHaveLength(2);
-        });
-    });
-});

package/src/components/__tests__/checkbox.test.tsx

@@ -1,138 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import Checkbox from "../checkbox";
-
-describe("Checkbox", () => {
-    test("uses the ID prop when it is specified", () => {
-        // Arrange, Act
-        render(
-            <Checkbox
-                id="specified-checkbox-id"
-                label="Receive assignment reminders for Algebra"
-                description="You will receive a reminder 24 hours before each deadline"
-                checked={false}
-                onChange={() => {}}
-            />,
-        );
-
-        const checkbox = screen.getByRole("checkbox");
-
-        // Assert
-        expect(checkbox).toHaveAttribute("id", "specified-checkbox-id");
-    });
-
-    test("provides a unique ID when the ID prop is not specified", () => {
-        // Arrange, Act
-        render(
-            <Checkbox
-                label="Receive assignment reminders for Algebra"
-                description="You will receive a reminder 24 hours before each deadline"
-                checked={false}
-                onChange={() => {}}
-            />,
-        );
-
-        const checkbox = screen.getByRole("checkbox");
-
-        // Assert
-        expect(checkbox).toHaveAttribute("id", "uid-choice-1-main");
-    });
-
-    test("clicking the checkbox triggers `onChange`", () => {
-        // Arrange
-        const onChangeSpy = jest.fn();
-        render(
-            <Checkbox
-                label="Receive assignment reminders for Algebra"
-                description="You will receive a reminder 24 hours before each deadline"
-                checked={false}
-                onChange={onChangeSpy}
-            />,
-        );
-
-        // Act
-        const checkbox = screen.getByRole("checkbox");
-        checkbox.click();
-
-        // Assert
-        expect(onChangeSpy).toHaveBeenCalled();
-    });
-
-    test("clicks the label triggers `onChange`", () => {
-        // Arrange
-        const onChangeSpy = jest.fn();
-        render(
-            <Checkbox
-                label="Receive assignment reminders for Algebra"
-                description="You will receive a reminder 24 hours before each deadline"
-                checked={false}
-                onChange={onChangeSpy}
-            />,
-        );
-
-        // Act
-        const checkboxLabel = screen.getByText(
-            "Receive assignment reminders for Algebra",
-        );
-        checkboxLabel.click();
-
-        // Assert
-        expect(onChangeSpy).toHaveBeenCalled();
-    });
-
-    test.each`
-        indeterminateValue | checkedValue
-        ${true}            | ${null}
-        ${false}           | ${true}
-        ${false}           | ${false}
-    `(
-        "sets the indeterminate property to $indeterminateValue when checked is $checkedValue (with ref)",
-        ({indeterminateValue, checkedValue}) => {
-            // Arrange
-            const ref = React.createRef<HTMLInputElement>();
-
-            // Act
-            render(
-                <Checkbox
-                    label="Some label"
-                    description="Some description"
-                    checked={checkedValue}
-                    onChange={() => {}}
-                    ref={ref}
-                />,
-            );
-
-            // Assert
-            expect(ref?.current?.indeterminate).toBe(indeterminateValue);
-        },
-    );
-
-    test.each`
-        indeterminateValue | checkedValue
-        ${true}            | ${null}
-        ${false}           | ${true}
-        ${false}           | ${false}
-    `(
-        "sets the indeterminate property to $indeterminateValue when checked is $checkedValue (innerRef)",
-        ({indeterminateValue, checkedValue}) => {
-            // Arrange
-            render(
-                <Checkbox
-                    label="Some label"
-                    description="Some description"
-                    checked={checkedValue}
-                    onChange={() => {}}
-                />,
-            );
-
-            // Act
-            const inputElement = screen.getByRole(
-                "checkbox",
-            ) as HTMLInputElement;
-
-            // Assert
-            expect(inputElement.indeterminate).toBe(indeterminateValue);
-        },
-    );
-});