From f3a8d9972c2c4019b71a45416056ed6deaa988d3 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 29 Dec 2024 13:49:29 -0800 Subject: [PATCH] test: add unit tests for `AspectRatio`, `Tag` --- tests/Accordion/Accordion.test.ts | 22 ++++-- tests/App.test.svelte | 12 ++++ tests/AspectRatio.test.svelte | 7 -- tests/AspectRatio/AspectRatio.test.svelte | 13 ++++ tests/AspectRatio/AspectRatio.test.ts | 15 ++++ tests/{ => Tag}/Tag.test.svelte | 17 ++++- tests/Tag/Tag.test.ts | 85 +++++++++++++++++++++++ 7 files changed, 158 insertions(+), 13 deletions(-) delete mode 100644 tests/AspectRatio.test.svelte create mode 100644 tests/AspectRatio/AspectRatio.test.svelte create mode 100644 tests/AspectRatio/AspectRatio.test.ts rename tests/{ => Tag}/Tag.test.svelte (75%) create mode 100644 tests/Tag/Tag.test.ts diff --git a/tests/Accordion/Accordion.test.ts b/tests/Accordion/Accordion.test.ts index d7288e3d..b86abd95 100644 --- a/tests/Accordion/Accordion.test.ts +++ b/tests/Accordion/Accordion.test.ts @@ -104,11 +104,25 @@ describe("Accordion", () => { expect(items).toHaveLength(4); // First item is open. - expect(items[0]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item bx--accordion__item--active")); + expect(items[0]).toHaveAttribute( + "class", + expect.stringContaining( + "bx--accordion__item bx--accordion__item--active", + ), + ); // All other items are collapsed. - expect(items[1]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item")); - expect(items[2]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item")); - expect(items[3]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item")); + expect(items[1]).toHaveAttribute( + "class", + expect.not.stringContaining("bx--accordion__item--active"), + ); + expect(items[2]).toHaveAttribute( + "class", + expect.not.stringContaining("bx--accordion__item--active"), + ); + expect(items[3]).toHaveAttribute( + "class", + expect.not.stringContaining("bx--accordion__item--active"), + ); }); }); diff --git a/tests/App.test.svelte b/tests/App.test.svelte index 71142b09..0e1066e5 100644 --- a/tests/App.test.svelte +++ b/tests/App.test.svelte @@ -1,5 +1,6 @@ - - - Content - diff --git a/tests/AspectRatio/AspectRatio.test.svelte b/tests/AspectRatio/AspectRatio.test.svelte new file mode 100644 index 00000000..bb147588 --- /dev/null +++ b/tests/AspectRatio/AspectRatio.test.svelte @@ -0,0 +1,13 @@ + + +2x1 +2x3 +16x9 +4x3 +1x1 +3x4 +3x2 +9x16 +1x2 diff --git a/tests/AspectRatio/AspectRatio.test.ts b/tests/AspectRatio/AspectRatio.test.ts new file mode 100644 index 00000000..7362d90b --- /dev/null +++ b/tests/AspectRatio/AspectRatio.test.ts @@ -0,0 +1,15 @@ +import { render, screen } from "@testing-library/svelte"; +import AspectRatio from "./AspectRatio.test.svelte"; + +describe("AspectRatio", () => { + it("renders correctly", () => { + render(AspectRatio); + + ["2x1", "2x3", "16x9", "4x3", "1x1", "3x4", "3x2", "9x16", "1x2"].forEach( + (ratio) => { + const boundingElement = screen.getByText(ratio).parentElement; + expect(boundingElement).toHaveClass(`bx--aspect-ratio--${ratio}`); + }, + ); + }); +}); diff --git a/tests/Tag.test.svelte b/tests/Tag/Tag.test.svelte similarity index 75% rename from tests/Tag.test.svelte rename to tests/Tag/Tag.test.svelte index 4812f5f3..2a5710e1 100644 --- a/tests/Tag.test.svelte +++ b/tests/Tag/Tag.test.svelte @@ -29,10 +29,23 @@ outline -Filterable + { + console.log("click"); + }} + on:close={() => { + console.log("close"); + }}>Filterable Custom icon -Text + { + console.log("click"); + }}>Text diff --git a/tests/Tag/Tag.test.ts b/tests/Tag/Tag.test.ts new file mode 100644 index 00000000..6a2dcce1 --- /dev/null +++ b/tests/Tag/Tag.test.ts @@ -0,0 +1,85 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Tag from "./Tag.test.svelte"; + +describe("Tag", () => { + afterEach(() => { + vi.clearAllMocks(); + }); + + it("renders all tag variants with correct styles", () => { + render(Tag); + + const basicTag = screen.getByText("IBM Cloud"); + expect(basicTag.parentElement).toHaveClass("my-class"); + expect(basicTag.parentElement).toHaveStyle({ margin: "1rem" }); + + [ + "red", + "magenta", + "purple", + "blue", + "cyan", + "teal", + "green", + "gray", + "cool-gray", + "warm-gray", + "high-contrast", + "outline", + ].forEach((color) => { + const tag = screen.getByText(color); + expect(tag.parentElement).toHaveClass(`bx--tag--${color}`); + }); + }); + + it("renders and handles filterable tag correctly", async () => { + const consoleLog = vi.spyOn(console, "log"); + + render(Tag); + + const filterableTag = screen.getByText("Filterable"); + expect(filterableTag).toHaveClass("bx--tag--filter"); + + const closeButton = filterableTag.querySelector("button")!; + expect(closeButton).toHaveClass("bx--tag__close-icon"); + expect(closeButton).toHaveAttribute("title", "Clear filter"); + + await user.click(closeButton); + expect(consoleLog).toHaveBeenCalledWith("close"); + expect(consoleLog).toHaveBeenCalledWith("click"); + }); + + it("renders custom icon tag correctly", () => { + render(Tag); + + const iconTag = screen.getByText("Custom icon"); + const iconContainer = iconTag.parentElement?.querySelector( + ".bx--tag__custom-icon", + ); + expect(iconContainer).toBeInTheDocument(); + }); + + it("renders interactive tag as a button", () => { + render(Tag); + + const interactiveTag = screen.getByRole("button", { name: "Text" }); + expect(interactiveTag).toHaveClass("bx--tag--interactive"); + }); + + it("renders skeleton state", () => { + render(Tag); + + const skeleton = document.querySelector(".bx--skeleton"); + expect(skeleton).toBeInTheDocument(); + }); + + it("handles click events on interactive tag", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Tag); + + const interactiveTag = screen.getByRole("button", { name: "Text" }); + await user.click(interactiveTag); + expect(consoleLog).toHaveBeenCalledWith("click"); + }); +});