diff --git a/tests/Search.test.svelte b/tests/Search.test.svelte deleted file mode 100644 index 9def9e12..00000000 --- a/tests/Search.test.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/tests/Search/Search.test.svelte b/tests/Search/Search.test.svelte new file mode 100644 index 00000000..635d3f31 --- /dev/null +++ b/tests/Search/Search.test.svelte @@ -0,0 +1,17 @@ + + + { + console.log("clear"); + }} +/> + + diff --git a/tests/Search/Search.test.ts b/tests/Search/Search.test.ts new file mode 100644 index 00000000..a266b940 --- /dev/null +++ b/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"); + }); +}); diff --git a/tests/Search/SearchExpandable.test.svelte b/tests/Search/SearchExpandable.test.svelte new file mode 100644 index 00000000..68f2ca88 --- /dev/null +++ b/tests/Search/SearchExpandable.test.svelte @@ -0,0 +1,22 @@ + + + { + console.log("expanded"); + }} + on:collapse={() => { + console.log("collapsed"); + }} +/> + +
Status: {expanded ? "expanded" : "collapsed"}
diff --git a/tests/Search/SearchSkeleton.test.svelte b/tests/Search/SearchSkeleton.test.svelte new file mode 100644 index 00000000..e4c965e6 --- /dev/null +++ b/tests/Search/SearchSkeleton.test.svelte @@ -0,0 +1,9 @@ + + + + + + +