test(text-area): add unit tests

tests/TextArea.test.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { TextArea, TextAreaSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextArea
-  value=""
-  hideLabel
-  light
-  rows={10}
-  labelText="App description"
-  helperText="A rich description helps us better recommend related products and services"
-  placeholder="Enter a description..."
-  invalid
-  invalidText="Only plain text characters are allowed"
-  disabled
-  on:paste
-/>
-
-<TextAreaSkeleton hideLabel />

tests/TextArea/TextArea.test.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { TextArea } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let value: ComponentProps<TextArea>["value"] = "";
+  export let placeholder = "";
+  export let cols = 50;
+  export let rows = 4;
+  export let maxCount: ComponentProps<TextArea>["maxCount"] = undefined;
+  export let light = false;
+  export let disabled = false;
+  export let readonly = false;
+  export let helperText = "";
+  export let labelText = "App description";
+  export let hideLabel = false;
+  export let invalid = false;
+  export let invalidText = "";
+  export let id = "ccs-test";
+  export let name: ComponentProps<TextArea>["name"] = undefined;
+  export let ref: ComponentProps<TextArea>["ref"] = null;
+</script>
+
+<TextArea
+  bind:value
+  {placeholder}
+  {cols}
+  {rows}
+  {maxCount}
+  {light}
+  {disabled}
+  {readonly}
+  {helperText}
+  {labelText}
+  {hideLabel}
+  {invalid}
+  {invalidText}
+  {id}
+  {name}
+  {ref}
+  on:change
+  on:input
+  on:keydown
+  on:keyup
+  on:focus
+  on:blur
+  on:paste
+/>
+
+<div data-testid="value">{value}</div>

tests/TextArea/TextArea.test.ts

@@ -0,0 +1,153 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import TextArea from "./TextArea.test.svelte";
+import TextAreaCustom from "./TextAreaCustom.test.svelte";
+
+describe("TextArea", () => {
+  it("should render with default props", () => {
+    render(TextArea);
+
+    expect(screen.getByLabelText("App description")).toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toHaveAttribute("cols", "50");
+    expect(screen.getByRole("textbox")).toHaveAttribute("rows", "4");
+  });
+
+  it("should handle placeholder text", () => {
+    render(TextArea, { props: { placeholder: "Enter description..." } });
+
+    expect(
+      screen.getByPlaceholderText("Enter description..."),
+    ).toBeInTheDocument();
+  });
+
+  it("should handle custom rows and cols", () => {
+    render(TextArea, {
+      props: { rows: 10, cols: 100 },
+    });
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("rows", "10");
+    expect(textarea).toHaveAttribute("cols", "100");
+  });
+
+  it("should handle max character count", () => {
+    render(TextArea, { props: { maxCount: 100, value: "Test text" } });
+
+    expect(screen.getByText("9/100")).toBeInTheDocument();
+  });
+
+  it("should handle light variant", () => {
+    render(TextArea, { props: { light: true } });
+
+    expect(screen.getByRole("textbox")).toHaveClass("bx--text-area--light");
+  });
+
+  it("should handle disabled state", () => {
+    render(TextArea, { props: { disabled: true } });
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeDisabled();
+    expect(screen.getByText("App description")).toHaveClass(
+      "bx--label--disabled",
+    );
+  });
+
+  it("should handle readonly state", () => {
+    render(TextArea, { props: { readonly: true } });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("readonly");
+  });
+
+  it("should handle helper text", () => {
+    render(TextArea, { props: { helperText: "Helper text" } });
+
+    expect(screen.getByText("Helper text")).toHaveClass(
+      "bx--form__helper-text",
+    );
+  });
+
+  it("should handle invalid state", () => {
+    render(TextArea, {
+      props: { invalid: true, invalidText: "Invalid input" },
+    });
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("bx--text-area--invalid");
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+    expect(screen.getByText("Invalid input")).toHaveClass(
+      "bx--form-requirement",
+    );
+  });
+
+  // TODO(bug): hidden label should still be rendered.
+  it.skip("should handle hidden label", () => {
+    render(TextArea, { props: { hideLabel: true } });
+
+    expect(screen.getByLabelText("App description")).toBeInTheDocument();
+  });
+
+  it("should handle custom id", () => {
+    render(TextArea, { props: { id: "custom-id" } });
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("id", "custom-id");
+    expect(screen.getByText("App description")).toHaveAttribute(
+      "for",
+      "custom-id",
+    );
+  });
+
+  it("should handle custom name", () => {
+    render(TextArea, {
+      props: { name: "custom-name" },
+    });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("name", "custom-name");
+  });
+
+  it("should handle custom slots", () => {
+    render(TextAreaCustom);
+
+    expect(screen.getByText("Custom Label Text").tagName).toBe("SPAN");
+  });
+
+  it("should handle value binding", async () => {
+    render(TextArea);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "Test value");
+    expect(screen.getByTestId("value").textContent).toBe("Test value");
+  });
+
+  it("should handle maxlength attribute when maxCount is set", () => {
+    render(TextArea, { props: { maxCount: 100 } });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("maxlength", "100");
+  });
+
+  it("should not show helper text when invalid", () => {
+    render(TextArea, {
+      props: {
+        invalid: true,
+        invalidText: "Invalid input",
+        helperText: "Helper text",
+      },
+    });
+
+    expect(screen.queryByText("Helper text")).not.toBeInTheDocument();
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  it("should handle disabled helper text", () => {
+    render(TextArea, {
+      props: {
+        disabled: true,
+        helperText: "Helper text",
+      },
+    });
+
+    expect(screen.getByText("Helper text")).toHaveClass(
+      "bx--form__helper-text--disabled",
+    );
+  });
+});

tests/TextArea/TextAreaCustom.test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea labelText="Custom label">
+  <span slot="labelText">Custom Label Text</span>
+</TextArea>