diff --git a/tests/Popover.test.svelte b/tests/Popover.test.svelte deleted file mode 100644 index 3ca51da8..00000000 --- a/tests/Popover.test.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - - { - console.log("on:click:outside"); - }} -> -
Content
-
diff --git a/tests/Popover/Popover.test.svelte b/tests/Popover/Popover.test.svelte new file mode 100644 index 00000000..b21cc440 --- /dev/null +++ b/tests/Popover/Popover.test.svelte @@ -0,0 +1,41 @@ + + +
+ Parent + { + console.log("click:outside", e.detail); + }} + > +
Content
+
+
diff --git a/tests/Popover/Popover.test.ts b/tests/Popover/Popover.test.ts new file mode 100644 index 00000000..686cce18 --- /dev/null +++ b/tests/Popover/Popover.test.ts @@ -0,0 +1,154 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Popover from "./Popover.test.svelte"; + +describe("Popover", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("should render when open", () => { + render(Popover, { props: { open: true } }); + + expect(screen.getByTestId("content")).toBeVisible(); + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--open", + ); + }); + + it("should not render when closed", () => { + render(Popover, { props: { open: false } }); + + const popover = screen.getByTestId("parent").firstElementChild; + expect(popover).not.toHaveClass("bx--popover--open"); + }); + + it("should handle outside clicks", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Popover, { + props: { + open: true, + closeOnOutsideClick: true, + }, + }); + + await user.click(document.body); + expect(consoleLog).toHaveBeenCalledWith( + "click:outside", + expect.any(Object), + ); + }); + + it("should not close on outside click when closeOnOutsideClick is false", async () => { + render(Popover, { + props: { + open: true, + closeOnOutsideClick: false, + }, + }); + + const popover = screen.getByTestId("parent").firstElementChild; + + await user.click(document.body); + expect(popover).toHaveClass("bx--popover--open"); + }); + + test.each([ + "top", + "top-left", + "top-right", + "bottom", + "bottom-left", + "bottom-right", + "left", + "left-bottom", + "left-top", + "right", + "right-bottom", + "right-top", + ] as const)("should handle %s alignment", (align) => { + render(Popover, { + props: { open: true, align }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + `bx--popover--${align}`, + ); + }); + + it("should render with caret", () => { + render(Popover, { + props: { open: true, caret: true }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--caret", + ); + }); + + it("should handle light variant", () => { + render(Popover, { + props: { open: true, light: true }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--light", + ); + }); + + it("should handle high contrast variant", () => { + render(Popover, { + props: { open: true, highContrast: true }, + }); + + expect(screen.getByTestId("parent").firstElementChild).toHaveClass( + "bx--popover--high-contrast", + ); + }); + + it("should handle relative positioning", () => { + render(Popover, { + props: { open: true, relative: true }, + }); + + const popover = screen.getByTestId("parent").firstElementChild; + expect(popover).toHaveClass("bx--popover--relative"); + expect(popover).toHaveStyle({ position: "relative" }); + }); + + it("should not dispatch click:outside event when clicking inside", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Popover, { + props: { open: true, closeOnOutsideClick: true }, + }); + + await user.click(screen.getByTestId("content")); + expect(consoleLog).not.toHaveBeenCalled(); + }); + + it("should not handle outside clicks when closed", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Popover, { + props: { open: false, closeOnOutsideClick: true }, + }); + + await user.click(document.body); + expect(consoleLog).not.toHaveBeenCalled(); + }); + + it("should handle multiple variants simultaneously", () => { + render(Popover, { + props: { + open: true, + caret: true, + light: true, + align: "bottom-right", + }, + }); + + const popover = screen.getByTestId("parent").firstElementChild; + expect(popover).toHaveClass("bx--popover--caret"); + expect(popover).toHaveClass("bx--popover--light"); + expect(popover).toHaveClass("bx--popover--bottom-right"); + }); +});