@khanacademy/wonder-blocks-form 4.9.1 → 4.9.3

package/src/components/__tests__/text-area.test.tsx

@@ -1,1286 +0,0 @@
-/* eslint-disable max-lines */
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {userEvent} from "@testing-library/user-event";
-import TextArea from "../text-area";
-
-const defaultOptions = {
-    wrapper: RenderStateRoot,
-};
-
-const wrapOptions: Array<"soft" | "hard" | "off"> = ["soft", "hard", "off"];
-
-describe("TextArea", () => {
-    describe("Attributes", () => {
-        it("should use the id prop for the textarea", async () => {
-            // Arrange
-            const testId = "test-id";
-            // Act
-            render(
-                <TextArea id={testId} value="" onChange={() => {}} />,
-                defaultOptions,
-            );
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("id", testId);
-        });
-
-        it("should use an auto-generated id for the textarea when id prop is not set", async () => {
-            // Arrange
-
-            // Act
-            render(<TextArea value="" onChange={() => {}} />, defaultOptions);
-
-            // Assert
-            // Since the generated id is unique, we cannot know what it will be. We
-            // only test if the id attribute starts with "uid-", then followed by
-            // "text-field-" as the scope assigned to IDProvider.
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea.getAttribute("id")).toMatch(/uid-text-area-.*$/);
-        });
-
-        it("should use the testId prop for the textarea element", async () => {
-            // Arrange
-            const testId = "test-id";
-            render(
-                <TextArea value="Text" onChange={() => {}} testId={testId} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("data-testid", testId);
-        });
-
-        it("should set the placeholder when the prop when provided", async () => {
-            // Arrange
-            const placeholder = "Test placeholder";
-            render(
-                <TextArea
-                    placeholder={placeholder}
-                    value="Text"
-                    onChange={() => {}}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("placeholder", placeholder);
-        });
-
-        it("should set the aria-disabled attribute when the disabled prop is true", async () => {
-            // Arrange
-            render(
-                <TextArea disabled={true} value="Text" onChange={() => {}} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("aria-disabled", "true");
-        });
-
-        it("should set the aria-disabled attribute when the disabled prop is false", async () => {
-            // Arrange
-            render(
-                <TextArea disabled={false} value="Text" onChange={() => {}} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("aria-disabled", "false");
-        });
-
-        it("should not set the aria-disabled attribute if the disabled prop is not provided", async () => {
-            // Arrange
-            render(
-                <TextArea value="Text" onChange={() => {}} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).not.toHaveAttribute("aria-disabled");
-        });
-
-        it("should not set the disabled attribute when the disabled prop is true", async () => {
-            // Arrange
-            render(
-                <TextArea disabled={true} value="Text" onChange={() => {}} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).not.toHaveAttribute("disabled");
-        });
-
-        it("should set the readonly attribute when the readOnly prop is provided", async () => {
-            // Arrange
-            render(
-                <TextArea value="Text" onChange={() => {}} readOnly={true} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("readonly");
-        });
-
-        it("should set the readonly attribute if the disabled prop is true", async () => {
-            // Arrange
-            render(
-                <TextArea value="Text" onChange={() => {}} disabled={true} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("readonly");
-        });
-
-        it("should set the autocomplete attribute when the autoComplete prop is provided", async () => {
-            // Arrange
-            render(
-                <TextArea value="Text" onChange={() => {}} autoComplete="on" />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("autocomplete", "on");
-        });
-
-        it("should set the name attribute when the name prop is provided", async () => {
-            // Arrange
-            const name = "Test name";
-            render(
-                <TextArea value="Text" onChange={() => {}} name={name} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("name", name);
-        });
-
-        it("should set the class when the className prop is provided", async () => {
-            // Arrange
-            const className = "Test class name";
-            render(
-                <TextArea
-                    value="Text"
-                    onChange={() => {}}
-                    className={className}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveClass(className);
-        });
-
-        it("should set the rows attribute when the rows prop is provided", async () => {
-            // Arrange
-            const rows = 10;
-            render(
-                <TextArea value="Text" onChange={() => {}} rows={rows} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("rows", `${rows}`);
-        });
-
-        it("should set the spellcheck attribute when spellCheck prop is set to true", async () => {
-            // Arrange
-            render(
-                <TextArea value="Text" onChange={() => {}} spellCheck={true} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("spellcheck", "true");
-        });
-
-        it("should set the spellcheck attribute when spellCheck prop is set to false", async () => {
-            // Arrange
-            render(
-                <TextArea
-                    value="Text"
-                    onChange={() => {}}
-                    spellCheck={false}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("spellcheck", "false");
-        });
-
-        it.each(wrapOptions)(
-            "should set the wrap attribute when the spellCheck prop is set to '%s' ",
-            async (wrap) => {
-                // Arrange
-                render(
-                    <TextArea value="Text" onChange={() => {}} wrap={wrap} />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("wrap", wrap);
-            },
-        );
-
-        it("should set the minlength attribute when the minLength prop is used", async () => {
-            // Arrange
-            const minLength = 3;
-            render(
-                <TextArea
-                    value="Text"
-                    onChange={() => {}}
-                    minLength={minLength}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("minlength", `${minLength}`);
-        });
-
-        it("should set the maxlength attribute when the maxLength prop is used", async () => {
-            // Arrange
-            const maxLength = 3;
-            render(
-                <TextArea
-                    value="Text"
-                    onChange={() => {}}
-                    maxLength={maxLength}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("maxlength", `${maxLength}`);
-        });
-
-        it("should set the required attribute when the required prop is used", async () => {
-            // Arrange
-            render(
-                <TextArea value="Text" onChange={() => {}} required={true} />,
-                defaultOptions,
-            );
-
-            // Act
-
-            // Assert
-            const textArea = await screen.findByRole("textbox");
-            expect(textArea).toHaveAttribute("required");
-        });
-    });
-
-    it("should use the value prop", async () => {
-        // Arrange
-        const testValue = "test value";
-        render(
-            <TextArea value={testValue} onChange={() => {}} />,
-            defaultOptions,
-        );
-
-        // Act
-
-        // Assert
-        const textArea = await screen.findByRole("textbox");
-        expect(textArea).toHaveValue(testValue);
-    });
-
-    it("should forward the ref to the textarea element", async () => {
-        // Arrange
-        const ref = React.createRef<HTMLTextAreaElement>();
-        render(
-            <TextArea value="Text" onChange={() => {}} ref={ref} />,
-            defaultOptions,
-        );
-
-        // Act
-
-        // Assert
-        expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
-        expect(await screen.findByRole("textbox")).toBe(ref.current);
-    });
-
-    describe("Event Handlers", () => {
-        it("should call the onChange prop when the textarea value changes", async () => {
-            // Arrange
-            const onChangeMock = jest.fn();
-            render(
-                <TextArea value="" onChange={onChangeMock} />,
-                defaultOptions,
-            );
-
-            // Act
-            // Type one letter
-            const letterToType = "X";
-            await userEvent.type(
-                await screen.findByRole("textbox"),
-                letterToType,
-            );
-
-            // Assert
-            expect(onChangeMock).toHaveBeenCalledExactlyOnceWith(letterToType);
-        });
-
-        it("should not call the onChange prop when the textarea value changes and it is disabled", async () => {
-            // Arrange
-            const onChangeMock = jest.fn();
-            render(
-                <TextArea value="" onChange={onChangeMock} disabled={true} />,
-                defaultOptions,
-            );
-
-            // Act
-            // Type one letter
-            const letterToType = "X";
-            await userEvent.type(
-                await screen.findByRole("textbox"),
-                letterToType,
-            );
-
-            // Assert
-            expect(onChangeMock).not.toHaveBeenCalled();
-        });
-
-        it("should call the onClick prop when the textarea is clicked", async () => {
-            // Arrange
-            const onClickMock = jest.fn();
-            render(
-                <TextArea value="" onChange={() => {}} onClick={onClickMock} />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.click(await screen.findByRole("textbox"));
-
-            // Assert
-            expect(onClickMock).toHaveBeenCalledOnce();
-        });
-
-        it("should not call the onClick prop when the textarea is clicked and it is disabled", async () => {
-            // Arrange
-            const onClickMock = jest.fn();
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onClick={onClickMock}
-                    disabled={true}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.click(await screen.findByRole("textbox"));
-
-            // Assert
-            expect(onClickMock).not.toHaveBeenCalled();
-        });
-
-        it("should call the onKeyDown prop when a key is typed in the textarea", async () => {
-            // Arrange
-            const handleOnKeyDown = jest.fn(
-                (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-                    return event.key;
-                },
-            );
-
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onKeyDown={handleOnKeyDown}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.type(await screen.findByRole("textbox"), "{enter}");
-
-            // Assert
-            expect(handleOnKeyDown).toHaveReturnedWith("Enter");
-        });
-
-        it("should not call the onKeyDown prop when a key is typed in the textarea and it is disabled", async () => {
-            // Arrange
-            const handleOnKeyDown = jest.fn();
-
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onKeyDown={handleOnKeyDown}
-                    disabled={true}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.type(await screen.findByRole("textbox"), "{enter}");
-
-            // Assert
-            expect(handleOnKeyDown).not.toHaveBeenCalled();
-        });
-
-        it("should call the onKeyUp prop when a key is typed in the textarea", async () => {
-            // Arrange
-            const handleOnKeyUp = jest.fn(
-                (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-                    return event.key;
-                },
-            );
-
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onKeyUp={handleOnKeyUp}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.type(await screen.findByRole("textbox"), "{enter}");
-
-            // Assert
-            expect(handleOnKeyUp).toHaveReturnedWith("Enter");
-        });
-
-        it("should not call the onKeyUp prop when a key is typed in the textarea and it is disabled", async () => {
-            // Arrange
-            const handleOnKeyUp = jest.fn();
-
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onKeyUp={handleOnKeyUp}
-                    disabled={true}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.type(await screen.findByRole("textbox"), "{enter}");
-
-            // Assert
-            expect(handleOnKeyUp).not.toHaveBeenCalled();
-        });
-
-        it("should call the onFocus prop when the textarea is focused", async () => {
-            // Arrange
-            const handleOnFocus = jest.fn();
-
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onFocus={handleOnFocus}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.tab();
-
-            // Assert
-            expect(handleOnFocus).toHaveBeenCalledOnce();
-        });
-
-        it("should continue to call the onFocus prop when the textarea is focused and it is disabled", async () => {
-            // Arrange
-            const handleOnFocus = jest.fn();
-
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onFocus={handleOnFocus}
-                    disabled={true}
-                />,
-                defaultOptions,
-            );
-
-            // Act
-            await userEvent.tab();
-
-            // Assert
-            expect(handleOnFocus).toHaveBeenCalledOnce();
-        });
-
-        it("should call the onBlur prop when the textarea is blurred", async () => {
-            // Arrange
-            const handleOnBlur = jest.fn();
-
-            render(
-                <TextArea value="" onChange={() => {}} onBlur={handleOnBlur} />,
-                defaultOptions,
-            );
-            // Tab to focus on textarea
-            await userEvent.tab();
-
-            // Act
-            // Tab to move focus away
-            await userEvent.tab();
-
-            // Assert
-            expect(handleOnBlur).toHaveBeenCalledOnce();
-        });
-
-        it("should continue to call the onBlur prop when the textarea is blurred and it is disabled", async () => {
-            // Arrange
-            const handleOnBlur = jest.fn();
-
-            render(
-                <TextArea
-                    value=""
-                    onChange={() => {}}
-                    onBlur={handleOnBlur}
-                    disabled={true}
-                />,
-                defaultOptions,
-            );
-            // Tab to focus on textarea
-            await userEvent.tab();
-
-            // Act
-            // Tab to move focus away
-            await userEvent.tab();
-
-            // Assert
-            expect(handleOnBlur).toHaveBeenCalledOnce();
-        });
-    });
-
-    describe("Accessibility", () => {
-        describe("Axe", () => {
-            test("has no accessibility violations", async () => {
-                // Arrange
-                // Use with label to demonstrate how it should be used with the
-                // TextArea component
-                const {container} = render(
-                    <>
-                        <label htmlFor="text-area">Test label</label>
-                        <TextArea
-                            value="Text"
-                            onChange={() => {}}
-                            id="text-area"
-                        />
-                    </>,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                await expect(container).toHaveNoA11yViolations();
-            });
-        });
-        describe("Focus", () => {
-            it("should focus on the textarea by default when the autoFocus prop is provided", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        autoFocus={true}
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveFocus();
-            });
-
-            it("should be focusable", async () => {
-                // Arrange
-                render(
-                    <TextArea value="Text" onChange={() => {}} />,
-                    defaultOptions,
-                );
-
-                // Act
-                await userEvent.tab();
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveFocus();
-            });
-
-            it("should be focusable if it is disabled", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        disabled={true}
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-                await userEvent.tab();
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveFocus();
-            });
-        });
-
-        describe("ARIA", () => {
-            it("should set the aria-label attribute when provided", async () => {
-                // Arrange
-                const ariaLabel = "Test Aria Label";
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        aria-label={ariaLabel}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-label", ariaLabel);
-            });
-
-            it("should set the aria-labelledby attribute when provided", async () => {
-                // Arrange
-                const ariaLabelledBy = "test-label-id";
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        aria-labelledby={ariaLabelledBy}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute(
-                    "aria-labelledby",
-                    ariaLabelledBy,
-                );
-            });
-
-            it("should set the aria-describedby attribute when provided", async () => {
-                // Arrange
-                const ariaDescribedBy = "test-label-id";
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        aria-describedby={ariaDescribedBy}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute(
-                    "aria-describedby",
-                    ariaDescribedBy,
-                );
-            });
-
-            it("should set the aria-details attribute when provided", async () => {
-                // Arrange
-                const ariaDetails = "details-id";
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        aria-details={ariaDetails}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute(
-                    "aria-details",
-                    `${ariaDetails}`,
-                );
-            });
-
-            it("should set aria-invalid to true if the validate prop returns an error message", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="text"
-                        onChange={() => {}}
-                        // If the validate function returns a string or true,
-                        // then the text area is in an error state. For this
-                        // test, we always return a string upon validation
-                        // to trigger the error state. Since the textarea is
-                        // being mounted with a non-empty value, it is validated
-                        // on initial render. Because the text area is in
-                        // an error state, it will have aria-invalid=true
-                        validate={() => "Error"}
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "true");
-            });
-            it("should set aria-invalid to true if the validate prop returns an error message", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="text"
-                        onChange={() => {}}
-                        validate={() => null}
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "false");
-            });
-        });
-    });
-
-    describe("Validation", () => {
-        describe("validate prop", () => {
-            it("should be in an error state if the initial value is not empty and not valid", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="tooShort"
-                        onChange={() => {}}
-                        validate={(value) => {
-                            if (value.length < 10) {
-                                return "Error: value should be >= 10";
-                            }
-                        }}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "true");
-            });
-
-            it("should not be in an error state if the initial value is empty and not valid", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value=""
-                        onChange={() => {}}
-                        validate={(value) => {
-                            if (value.length < 10) {
-                                return "Error: value should be >= 10";
-                            }
-                        }}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "false");
-            });
-
-            it("should not be in an error state if the initial value is valid", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="LongerThan10"
-                        onChange={() => {}}
-                        validate={(value) => {
-                            if (value.length < 10) {
-                                return "Error: value should be >= 10";
-                            }
-                        }}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "false");
-            });
-
-            it("should be able to change from a valid state to an error state", async () => {
-                // Arrange
-                const Controlled = () => {
-                    const [value, setValue] = React.useState("text");
-                    return (
-                        <TextArea
-                            value={value}
-                            onChange={setValue}
-                            validate={(value) => {
-                                if (value.length > 4) {
-                                    return "Error";
-                                }
-                            }}
-                        />
-                    );
-                };
-                render(<Controlled />, defaultOptions);
-
-                // Act
-                // Add a character to make it longer than the validation limit
-                await userEvent.type(await screen.findByRole("textbox"), "s");
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "true");
-            });
-
-            it("should be able to change from an error state to a valid state", async () => {
-                // Arrange
-                const Controlled = () => {
-                    const [value, setValue] = React.useState("texts");
-                    return (
-                        <TextArea
-                            value={value}
-                            onChange={setValue}
-                            validate={(value) => {
-                                if (value.length > 4) {
-                                    return "Error";
-                                }
-                            }}
-                        />
-                    );
-                };
-                render(<Controlled />, defaultOptions);
-
-                // Act
-                // Remove a character to make it within the validation limit
-                await userEvent.type(
-                    await screen.findByRole("textbox"),
-                    "{backspace}",
-                );
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "false");
-            });
-
-            it("should call the validate function when it is first rendered", async () => {
-                // Arrange
-                const validate = jest.fn();
-                render(
-                    <TextArea
-                        value="text"
-                        onChange={() => {}}
-                        validate={validate}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                expect(validate).toHaveBeenCalledExactlyOnceWith("text");
-            });
-
-            it("should not call the validate function when it is first rendered if the value is empty", async () => {
-                // Arrange
-                const validate = jest.fn();
-                render(
-                    <TextArea
-                        value=""
-                        onChange={() => {}}
-                        validate={validate}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                expect(validate).not.toHaveBeenCalled();
-            });
-
-            it("should call the validate function when the value is updated", async () => {
-                // Arrange
-                const validate = jest.fn();
-                const Controlled = () => {
-                    const [value, setValue] = React.useState("text");
-                    return (
-                        <TextArea
-                            value={value}
-                            onChange={setValue}
-                            validate={validate}
-                        />
-                    );
-                };
-                render(<Controlled />, defaultOptions);
-                // Reset mock after initial render
-                validate.mockReset();
-
-                // Act
-                // Update value
-                await userEvent.type(await screen.findByRole("textbox"), "s");
-
-                // Assert
-                expect(validate).toHaveBeenCalledExactlyOnceWith("texts");
-            });
-
-            it("should call the validate function when the value is updated to an empty string", async () => {
-                // Arrange
-                const validate = jest.fn();
-                const Controlled = () => {
-                    const [value, setValue] = React.useState("t");
-                    return (
-                        <TextArea
-                            value={value}
-                            onChange={setValue}
-                            validate={validate}
-                        />
-                    );
-                };
-                render(<Controlled />, defaultOptions);
-                // Reset mock after initial render
-                validate.mockReset();
-
-                // Act
-                // Erase value
-                await userEvent.type(
-                    await screen.findByRole("textbox"),
-                    "{backspace}",
-                );
-
-                // Assert
-                expect(validate).toHaveBeenCalledExactlyOnceWith("");
-            });
-        });
-        describe("onValidate prop", () => {
-            it("should call the onValidate prop with the error message when the textarea is validated", () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                const errorMsg = "error message";
-                render(
-                    <TextArea
-                        value="text"
-                        onChange={() => {}}
-                        validate={() => errorMsg}
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
-                    errorMsg,
-                );
-            });
-
-            it("should call the onValidate prop with null if the validate prop returns null", () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                render(
-                    <TextArea
-                        value="text"
-                        onChange={() => {}}
-                        validate={() => null}
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
-            });
-
-            it("should call the onValidate prop with null if the validate prop is a void function", () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                render(
-                    <TextArea
-                        value="text"
-                        onChange={() => {}}
-                        validate={() => {}}
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-                // Act
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
-            });
-        });
-
-        describe("required prop", () => {
-            it("should initially render with no error if it is required and the value is empty", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value=""
-                        onChange={() => {}}
-                        required="Required"
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "false");
-            });
-
-            it("should initially render with no error if it is required and the value is not empty", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        required="Required"
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "false");
-            });
-
-            it("shound update with error if it is required and the value changes to an empty string", async () => {
-                // Arrange
-                render(
-                    <TextArea
-                        value="T"
-                        onChange={() => {}}
-                        required="Required"
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-                await userEvent.type(
-                    await screen.findByRole("textbox"),
-                    "{backspace}",
-                );
-                // Assert
-                const textArea = await screen.findByRole("textbox");
-                expect(textArea).toHaveAttribute("aria-invalid", "true");
-            });
-
-            it("should not call onValidate on first render if the value is empty and required prop is used", async () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                render(
-                    <TextArea
-                        value=""
-                        onChange={() => {}}
-                        required="Required"
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-
-                // Assert
-                expect(handleValidate).not.toHaveBeenCalled();
-            });
-
-            it("should call onValidate with no error message on first render if the value is not empty and required prop is used", async () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                render(
-                    <TextArea
-                        value="Text"
-                        onChange={() => {}}
-                        required="Required"
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-
-                // Act
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
-            });
-
-            it("should call onValidate when the value is cleared", async () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                render(
-                    <TextArea
-                        value="T"
-                        onChange={() => {}}
-                        required="Required"
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-                // Reset mock after initial render
-                handleValidate.mockReset();
-
-                // Act
-                await userEvent.type(
-                    await screen.findByRole("textbox"),
-                    "{backspace}",
-                );
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledOnce();
-            });
-
-            it("should call onValidate with the custom error message from the required prop when it is a string", async () => {
-                // Arrange
-                const requiredErrorMsg = "Custom required error message";
-                const handleValidate = jest.fn();
-                render(
-                    <TextArea
-                        value="T"
-                        onChange={() => {}}
-                        required={requiredErrorMsg}
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-                // Reset mock after initial render
-                handleValidate.mockReset();
-
-                // Act
-                await userEvent.type(
-                    await screen.findByRole("textbox"),
-                    "{backspace}",
-                );
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
-                    requiredErrorMsg,
-                );
-            });
-
-            it("should call onValidate with a default error message if required is not a string", async () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                render(
-                    <TextArea
-                        value="T"
-                        onChange={() => {}}
-                        required={true}
-                        onValidate={handleValidate}
-                    />,
-                    defaultOptions,
-                );
-                // Reset mock after initial render
-                handleValidate.mockReset();
-
-                // Act
-                await userEvent.type(
-                    await screen.findByRole("textbox"),
-                    "{backspace}",
-                );
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
-                    "This field is required.",
-                );
-            });
-
-            it("should prioritize validate prop over required prop if both are provided", async () => {
-                // Arrange
-                const handleValidate = jest.fn();
-                const requiredErrorMessage = "Error because it is required";
-                const validateErrorMessage = "Error because of validation";
-                render(
-                    <TextArea
-                        value="T"
-                        onChange={() => {}}
-                        required={requiredErrorMessage}
-                        onValidate={handleValidate}
-                        validate={() => validateErrorMessage}
-                    />,
-                    defaultOptions,
-                );
-                // Reset mock after initial render
-                handleValidate.mockReset();
-
-                // Act
-                await userEvent.type(
-                    await screen.findByRole("textbox"),
-                    "{backspace}",
-                );
-
-                // Assert
-                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
-                    validateErrorMessage,
-                );
-            });
-        });
-    });
-});