@octopusdeploy/design-system-components/dist/src/components/Form/Textarea/__testing__/Textarea.spec.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
const vitest_1 = require("vitest");
const Textarea_1 = require("../Textarea");
(0, vitest_1.describe)("<Textarea />", () => {
    (0, vitest_1.describe)("label and description", () => {
        (0, vitest_1.test)("renders with correct label", () => {
            const textarea = renderTextarea({ label: "Test Label" });
            textarea.shouldHaveLabel("Test Label");
        });
        (0, vitest_1.test)("renders with description", () => {
            const description = "This is a helpful description";
            const textarea = renderTextarea({ label: "Test Label", description });
            textarea.shouldHaveDescription(description);
        });
    });
    (0, vitest_1.describe)("field properties", () => {
        (0, vitest_1.test)("renders with placeholder text", () => {
            const placeholder = "Enter your text here";
            const textarea = renderTextarea({ label: "Test Label", placeholder });
            textarea.shouldHavePlaceholder(placeholder);
        });
        (0, vitest_1.test)("renders with initial value", () => {
            const value = "Initial value";
            const textarea = renderTextarea({ label: "Test Label", value });
            textarea.shouldHaveValue(value);
        });
        (0, vitest_1.describe)("validationState", () => {
            (0, vitest_1.test)("defaults to error state when validationMessage is provided without validationState", () => {
                const validationMessage = "This field is required";
                const textarea = renderTextarea({ label: "Test Label", validationMessage });
                textarea.shouldHaveValidationMessage(validationMessage);
                textarea.shouldShowErrorValidationState();
            });
            (0, vitest_1.test)("renders error state when validationState=error and a validationMessage is provided", () => {
                const validationMessage = "This field is required";
                const textarea = renderTextarea({ label: "Test Label", validationMessage, validationState: "error" });
                textarea.shouldHaveValidationMessage(validationMessage);
                textarea.shouldShowErrorValidationState();
            });
            (0, vitest_1.test)("renders success state when validationState=success and a validationMessage is provided", () => {
                const validationMessage = "Looks good";
                const textarea = renderTextarea({ label: "Test Label", validationMessage, validationState: "success" });
                textarea.shouldHaveValidationMessage(validationMessage);
                textarea.shouldShowSuccessValidationState();
            });
            (0, vitest_1.test)("does not render any validation state when validationState=error but no validationMessage is provided", () => {
                const textarea = renderTextarea({ label: "Test Label", validationState: "error" });
                textarea.shouldNotShowAnyValidationState();
            });
            (0, vitest_1.test)("does not render any validation state when validationState=success but no validationMessage is provided", () => {
                const textarea = renderTextarea({ label: "Test Label", validationState: "success" });
                textarea.shouldNotShowAnyValidationState();
            });
        });
        (0, vitest_1.test)("uses provided name attribute", () => {
            const name = "custom-name";
            const textarea = renderTextarea({ label: "Test Label", name });
            textarea.shouldHaveName(name);
        });
        (0, vitest_1.test)("has autofocus when autoFocus is true", () => {
            const textarea = renderTextarea({ label: "Test Label", autoFocus: true });
            textarea.shouldHaveFocus();
        });
        (0, vitest_1.test)("handles onChange gracefully", async () => {
            const textarea = renderTextarea({ label: "Test Label" });
            textarea.shouldBeInDocument();
        });
        (0, vitest_1.test)("supports different rows", () => {
            const textarea3Rows = renderTextarea({ label: "Textarea 3 Rows", rows: 3 });
            const textarea5Rows = renderTextarea({ label: "Textarea 5 Rows", rows: 5 });
            textarea3Rows.shouldHaveRows(3);
            textarea5Rows.shouldHaveRows(5);
        });
        (0, vitest_1.test)("supports maxLength and minLength", () => {
            const textarea = renderTextarea({
                label: "Test Label",
                maxLength: 100,
                minLength: 10,
            });
            textarea.shouldHaveMaxLength(100);
            textarea.shouldHaveMinLength(10);
        });
        (0, vitest_1.test)("supports autoResize", () => {
            const textarea = renderTextarea({ label: "Test Label", autoResize: true });
            textarea.shouldHaveAutoResize();
        });
    });
    (0, vitest_1.describe)("disabled and readonly properties", () => {
        (0, vitest_1.test)("renders as disabled when disabled prop is true", () => {
            const textarea = renderTextarea({ label: "Test Label", disabled: true });
            textarea.shouldBeDisabled();
        });
        (0, vitest_1.test)("disabled textarea cannot be typed in", async () => {
            const textarea = renderTextarea({ label: "Test Label", disabled: true });
            await textarea.attemptToType("should not work");
            textarea.shouldNotHaveCalledOnChange();
        });
        (0, vitest_1.test)("renders as readonly when readOnly prop is true", () => {
            const textarea = renderTextarea({ label: "Test Label", readOnly: true });
            textarea.shouldBeReadOnly();
        });
        (0, vitest_1.test)("readonly textarea cannot be typed in", async () => {
            const textarea = renderTextarea({ label: "Test Label", readOnly: true });
            await textarea.attemptToType("should not work");
            textarea.shouldNotHaveCalledOnChange();
        });
    });
    (0, vitest_1.describe)("default, required and optional marker properties", () => {
        (0, vitest_1.test)("renders with required marker when hasRequiredMarker is true", () => {
            const textarea = renderTextarea({ label: "Test Label", hasRequiredMarker: true });
            textarea.shouldHaveRequiredMarker();
        });
        (0, vitest_1.test)("renders with optional marker when hasOptionalMarker is true", () => {
            const textarea = renderTextarea({ label: "Test Label", hasOptionalMarker: true });
            textarea.shouldHaveOptionalMarker();
        });
    });
    (0, vitest_1.describe)("accessibility attributes", () => {
        (0, vitest_1.test)("has correct accessibility attributes when error is present", () => {
            const validationMessage = "Invalid input";
            const textarea = renderTextarea({ label: "Test Label", validationMessage });
            textarea.shouldHaveAriaInvalid(true);
            textarea.shouldHaveAriaDescribedByError();
        });
        (0, vitest_1.test)("has correct accessibility attributes when description is present", () => {
            const description = "Help text";
            const textarea = renderTextarea({ label: "Test Label", description });
            textarea.shouldHaveAriaDescribedByDescription();
        });
        (0, vitest_1.test)("has correct accessibility attributes when both description and error are present", () => {
            const description = "Help text";
            const validationMessage = "Error message";
            const textarea = renderTextarea({ label: "Test Label", description, validationMessage });
            textarea.shouldHaveAriaDescribedByBoth();
            textarea.shouldHaveAriaInvalid(true);
        });
    });
});
function renderTextarea(options) {
    const onChange = vitest_1.vi.fn();
    (0, react_1.render)((0, jsx_runtime_1.jsx)(Textarea_1.Textarea, { ...options, onChange: onChange, name: options.name || "test-textarea" }));
    return getTextareaInteractions(options.label, onChange);
}
function getAriaDescribedBy(element) {
    return element.getAttribute("aria-describedby") || "";
}
function getTextareaInteractions(label, onChange) {
    const textarea = () => react_1.screen.getByLabelText(label);
    const user = user_event_1.default.setup();
    return {
        shouldBeInDocument: () => {
            (0, vitest_1.expect)(textarea()).toBeInTheDocument();
        },
        shouldHaveLabel: (labelText) => {
            (0, vitest_1.expect)(react_1.screen.getByLabelText(labelText)).toBeInTheDocument();
        },
        shouldHavePlaceholder: (placeholder) => {
            (0, vitest_1.expect)(textarea()).toHaveAttribute("placeholder", placeholder);
        },
        shouldHaveValue: (value) => {
            (0, vitest_1.expect)(textarea()).toHaveValue(value);
        },
        shouldHaveDescription: (description) => {
            (0, vitest_1.expect)(react_1.screen.getByText(description)).toBeInTheDocument();
        },
        shouldHaveError: (error) => {
            (0, vitest_1.expect)(react_1.screen.getByText(error)).toBeInTheDocument();
        },
        shouldHaveValidationMessage: (message) => {
            (0, vitest_1.expect)(react_1.screen.getByText(message)).toBeInTheDocument();
        },
        shouldShowErrorValidationState: () => {
            (0, vitest_1.expect)(react_1.screen.getByRole("img", { name: "Error" })).toBeInTheDocument();
        },
        shouldShowSuccessValidationState: () => {
            (0, vitest_1.expect)(react_1.screen.getByRole("img", { name: "Success" })).toBeInTheDocument();
        },
        shouldNotShowAnyValidationState: () => {
            (0, vitest_1.expect)(react_1.screen.queryByRole("img", { name: "Error" })).not.toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.queryByRole("img", { name: "Success" })).not.toBeInTheDocument();
        },
        shouldBeDisabled: () => {
            (0, vitest_1.expect)(textarea()).toBeDisabled();
        },
        shouldBeReadOnly: () => {
            (0, vitest_1.expect)(textarea()).toHaveAttribute("readonly");
        },
        shouldHaveFocus: () => {
            (0, vitest_1.expect)(textarea()).toHaveFocus();
        },
        shouldHaveRequiredMarker: () => {
            (0, vitest_1.expect)(react_1.screen.getByText(/\(required\)/)).toBeInTheDocument();
        },
        shouldHaveOptionalMarker: () => {
            (0, vitest_1.expect)(react_1.screen.getByText(/\(optional\)/)).toBeInTheDocument();
        },
        shouldHaveRows: (rows) => {
            (0, vitest_1.expect)(textarea()).toHaveAttribute("rows", rows.toString());
        },
        shouldHaveMaxLength: (maxLength) => {
            (0, vitest_1.expect)(textarea()).toHaveAttribute("maxLength", maxLength.toString());
        },
        shouldHaveMinLength: (minLength) => {
            (0, vitest_1.expect)(textarea()).toHaveAttribute("minLength", minLength.toString());
        },
        shouldHaveAutoResize: () => {
            // Check that the textarea has the auto-resize behavior by verifying
            // it has resize: none and overflow: hidden styles applied
            const element = textarea();
            const computedStyle = window.getComputedStyle(element);
            (0, vitest_1.expect)(computedStyle.resize).toBe("none");
            (0, vitest_1.expect)(computedStyle.overflow).toBe("hidden");
        },
        shouldHaveName: (name) => {
            (0, vitest_1.expect)(textarea()).toHaveAttribute("name", name);
        },
        shouldHaveAriaInvalid: (invalid) => {
            (0, vitest_1.expect)(textarea()).toHaveAttribute("aria-invalid", invalid.toString());
        },
        shouldHaveAriaDescribedByError: () => {
            const ariaDescribedBy = getAriaDescribedBy(textarea());
            (0, vitest_1.expect)(ariaDescribedBy).toContain("validation");
        },
        shouldHaveAriaDescribedByDescription: () => {
            const ariaDescribedBy = getAriaDescribedBy(textarea());
            (0, vitest_1.expect)(ariaDescribedBy).toContain("description");
        },
        shouldHaveAriaDescribedByBoth: () => {
            const ariaDescribedBy = getAriaDescribedBy(textarea());
            (0, vitest_1.expect)(ariaDescribedBy).toContain("description");
            (0, vitest_1.expect)(ariaDescribedBy).toContain("validation");
        },
        type: async (text) => {
            await user.clear(textarea());
            await user.type(textarea(), text);
        },
        attemptToType: async (text) => {
            await user.type(textarea(), text);
        },
        shouldHaveCalledOnChangeWith: (value) => {
            (0, vitest_1.expect)(onChange).toHaveBeenCalledWith(value);
        },
        shouldNotHaveCalledOnChange: () => {
            (0, vitest_1.expect)(onChange).not.toHaveBeenCalled();
        },
    };
}