@khanacademy/wonder-blocks-form 4.9.2 → 4.9.4

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);
-        },
-    );
-});

package/src/components/__tests__/field-heading.test.tsx

@@ -1,225 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {StyleSheet} from "aphrodite";
-
-import {I18nInlineMarkup} from "@khanacademy/wonder-blocks-i18n";
-import {Body} from "@khanacademy/wonder-blocks-typography";
-
-import FieldHeading from "../field-heading";
-import TextField from "../text-field";
-
-describe("FieldHeading", () => {
-    it("fieldheading renders the label text", () => {
-        // Arrange
-        const label = "Label";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label={label}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByText(label)).toBeInTheDocument();
-    });
-
-    it("fieldheading renders the description text", () => {
-        // Arrange
-        const description = "Description";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                description={description}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByText(description)).toBeInTheDocument();
-    });
-
-    it("fieldheading renders the error text", () => {
-        // Arrange
-        const error = "Error";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                error={error}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByRole("alert")).toBeInTheDocument();
-    });
-
-    it("fieldheading adds testId to label", () => {
-        // Arrange
-        const testId = "testid";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                testId={testId}
-            />,
-        );
-
-        // Assert
-        const label = screen.getByTestId(`${testId}-label`);
-        expect(label).toBeInTheDocument();
-    });
-
-    it("fieldheading adds testId to description", () => {
-        // Arrange
-        const testId = "testid";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                description="Description"
-                testId={testId}
-            />,
-        );
-
-        // Assert
-        const description = screen.getByTestId(`${testId}-description`);
-        expect(description).toBeInTheDocument();
-    });
-
-    it("fieldheading adds testId to error", () => {
-        // Arrange
-        const testId = "testid";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                error="Error"
-                testId={testId}
-            />,
-        );
-
-        // Assert
-        const error = screen.getByTestId(`${testId}-error`);
-        expect(error).toBeInTheDocument();
-    });
-
-    it("fieldheading adds the correctly formatted id to label's htmlFor", () => {
-        // Arrange
-        const id = "exampleid";
-        const testId = "testid";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                id={id}
-                testId={testId}
-            />,
-        );
-
-        // Assert
-        const label = screen.getByTestId(`${testId}-label`);
-        expect(label).toHaveAttribute("for", `${id}-field`);
-    });
-
-    it("fieldheading adds the correctly formatted id to error's id", () => {
-        // Arrange
-        const id = "exampleid";
-        const testId = "testid";
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                error="Error"
-                id={id}
-                testId={testId}
-            />,
-        );
-
-        // Assert
-        const error = screen.getByRole("alert");
-        expect(error).toHaveAttribute("id", `${id}-error`);
-    });
-
-    it("stype prop applies to the fieldheading container", () => {
-        // Arrange
-        const styles = StyleSheet.create({
-            style1: {
-                flexGrow: 1,
-                background: "blue",
-            },
-        });
-
-        // Act
-        const {container} = render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label="Label"
-                error="Error"
-                style={styles.style1}
-            />,
-        );
-
-        // Assert
-        const fieldHeading = container.childNodes[0];
-        expect(fieldHeading).toHaveStyle("background: blue");
-    });
-
-    it("should render a LabelMedium when the 'label' prop is a I18nInlineMarkup", () => {
-        // Arrange
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label={
-                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
-                        {"<b>Test</b> Hello, world!"}
-                    </I18nInlineMarkup>
-                }
-            />,
-        );
-
-        // Assert
-        const label = screen.getByText("Hello, world!");
-        // LabelMedium has a font-size of 16px
-        expect(label).toHaveStyle("font-size: 16px");
-    });
-
-    it("should render a LabelSmall when the 'description' prop is a I18nInlineMarkup", () => {
-        // Arrange
-
-        // Act
-        render(
-            <FieldHeading
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label={<Body>Hello, world</Body>}
-                description={
-                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
-                        {"<b>Test</b> description"}
-                    </I18nInlineMarkup>
-                }
-            />,
-        );
-
-        // Assert
-        const description = screen.getByText("description");
-        // LabelSmall has a font-size of 16px
-        expect(description).toHaveStyle("font-size: 14px");
-    });
-});