test(search): add unit tests

tests/Search.test.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { Search } from "carbon-components-svelte";
-</script>
-
-<Search on:paste />
-
-<Search placeholder="Search catalog..." value="Cloud functions" />
-
-<Search light name="search" />
-
-<Search size="lg" />
-
-<Search size="sm" />
-
-<Search disabled />
-
-<Search skeleton />
-
-<Search size="lg" skeleton />
-
-<Search size="sm" skeleton />

tests/Search/Search.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Search } from "carbon-components-svelte";
+
+  let value = "";
+</script>
+
+<Search
+  bind:value
+  labelText="Default search"
+  placeholder="Search"
+  closeButtonLabelText="Clear value"
+  on:clear={() => {
+    console.log("clear");
+  }}
+/>
+
+<Search disabled labelText="Disabled search" placeholder="Search disabled..." />

tests/Search/Search.test.ts

@@ -0,0 +1,82 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import Search from "./Search.test.svelte";
+import SearchExpandable from "./SearchExpandable.test.svelte";
+import SearchSkeleton from "./SearchSkeleton.test.svelte";
+
+describe("Search", () => {
+  const getSearchInput = (label?: string | RegExp) =>
+    screen.getByRole("searchbox", { name: label });
+  const getClearButton = (label = "Clear search input") =>
+    screen.getByRole("button", { name: label });
+
+  it("renders and functions correctly", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Search);
+
+    const search = getSearchInput("Default search");
+    expect(search).toHaveValue("");
+    expect(search).toHaveAttribute("placeholder", "Search");
+
+    await user.type(search, "test");
+    expect(search).toHaveValue("test");
+
+    const clearButton = getClearButton("Clear value");
+    await user.click(clearButton);
+    expect(search).toHaveValue("");
+    expect(consoleLog).toHaveBeenCalledWith("clear");
+    expect(consoleLog).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders disabled state", async () => {
+    render(Search);
+
+    const search = getSearchInput("Disabled search");
+    expect(search).toBeDisabled();
+  });
+
+  it("handles expandable variant", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(SearchExpandable);
+
+    const search = getSearchInput("Expandable search");
+    const searchWrapper = search.closest(".bx--search");
+    assert(searchWrapper);
+
+    expect(searchWrapper).toHaveClass("bx--search--expandable");
+    expect(searchWrapper).not.toHaveClass("bx--search--expanded");
+
+    const magnifier = searchWrapper.querySelector(".bx--search-magnifier");
+    assert(magnifier);
+
+    await user.click(magnifier);
+    expect(searchWrapper).toHaveClass("bx--search--expanded");
+    expect(consoleLog).toHaveBeenCalledWith("expanded");
+
+    await user.click(document.body);
+    expect(searchWrapper).not.toHaveClass("bx--search--expanded");
+    expect(consoleLog).toHaveBeenCalledWith("collapsed");
+
+    // Don't collapse when has value
+    await user.click(magnifier);
+    await user.type(search, "test");
+    await user.click(document.body);
+    expect(searchWrapper).toHaveClass("bx--search--expanded");
+  });
+
+  it("renders skeleton states", () => {
+    render(SearchSkeleton);
+
+    const skeletons = document.querySelectorAll(".bx--skeleton");
+    expect(skeletons).toHaveLength(3);
+
+    // Default (xl) skeleton
+    expect(skeletons[0]).toHaveClass("bx--search--xl");
+
+    // Large (lg) skeleton
+    expect(skeletons[1]).toHaveClass("bx--search--lg");
+
+    // Small (sm) skeleton
+    expect(skeletons[2]).toHaveClass("bx--search--sm");
+  });
+});

tests/Search/SearchExpandable.test.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Search } from "carbon-components-svelte";
+
+  let expanded = false;
+  let value = "";
+</script>
+
+<Search
+  bind:expanded
+  bind:value
+  expandable
+  labelText="Expandable search"
+  placeholder="Search expandable..."
+  on:expand={() => {
+    console.log("expanded");
+  }}
+  on:collapse={() => {
+    console.log("collapsed");
+  }}
+/>
+
+<div>Status: {expanded ? "expanded" : "collapsed"}</div>

tests/Search/SearchSkeleton.test.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search skeleton labelText="Default skeleton" />
+
+<Search size="lg" skeleton labelText="Large skeleton" />
+
+<Search size="sm" skeleton labelText="Small skeleton" />