@khanacademy/wonder-blocks-form 4.9.2 → 4.9.3

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