diff --git a/tests/Loading.test.svelte b/tests/Loading.test.svelte deleted file mode 100644 index 2095cd4e..00000000 --- a/tests/Loading.test.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/tests/Loading/Loading.test.svelte b/tests/Loading/Loading.test.svelte new file mode 100644 index 00000000..aa152744 --- /dev/null +++ b/tests/Loading/Loading.test.svelte @@ -0,0 +1,28 @@ + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
diff --git a/tests/Loading/Loading.test.ts b/tests/Loading/Loading.test.ts new file mode 100644 index 00000000..68d4f561 --- /dev/null +++ b/tests/Loading/Loading.test.ts @@ -0,0 +1,93 @@ +import { render, screen } from "@testing-library/svelte"; +import Loading from "./Loading.test.svelte"; + +describe("Loading", () => { + it("renders with default props", () => { + render(Loading); + const wrapper = screen.getByTestId("default-loader"); + + // Should have overlay by default + expect(wrapper.querySelector(".bx--loading-overlay")).toBeInTheDocument(); + + // Should be active by default + const loader = wrapper.querySelector(".bx--loading"); + expect(loader).toBeInTheDocument(); + expect(loader).not.toHaveClass("bx--loading--stop"); + + // Should have correct ARIA attributes + expect(loader).toHaveAttribute("aria-atomic", "true"); + expect(loader).toHaveAttribute("aria-live", "assertive"); + + // Should have default description + const title = wrapper.querySelector("title"); + expect(title).toHaveTextContent("loading"); + }); + + it("renders without overlay", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-no-overlay"); + + // Should not have overlay + expect( + wrapper.querySelector(".bx--loading-overlay"), + ).not.toBeInTheDocument(); + + // Should still have loader + expect(wrapper.querySelector(".bx--loading")).toBeInTheDocument(); + }); + + it("supports small variant", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-small"); + + const loader = wrapper.querySelector(".bx--loading"); + expect(loader).toHaveClass("bx--loading--small"); + + // Small variant should have background circle + const backgroundCircle = wrapper.querySelector(".bx--loading__background"); + expect(backgroundCircle).toBeInTheDocument(); + expect(backgroundCircle).toHaveAttribute("r", "42"); + + // Should have stroke circle with correct radius + const strokeCircle = wrapper.querySelector(".bx--loading__stroke"); + expect(strokeCircle).toHaveAttribute("r", "42"); + }); + + it("supports inactive state", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-inactive"); + + // Overlay should have stop class + const overlay = wrapper.querySelector(".bx--loading-overlay"); + expect(overlay).toHaveClass("bx--loading-overlay--stop"); + + // Loader should have stop class + const loader = wrapper.querySelector(".bx--loading"); + expect(loader).toHaveClass("bx--loading--stop"); + + // ARIA live should be off when inactive + expect(loader).toHaveAttribute("aria-live", "off"); + }); + + it("supports custom description", () => { + render(Loading); + const wrapper = screen.getByTestId("loader-description"); + + const title = wrapper.querySelector("title"); + expect(title).toHaveTextContent("Processing data..."); + }); + + it("renders with correct spinner radius", () => { + render(Loading); + + // Default (large) spinner + const defaultWrapper = screen.getByTestId("default-loader"); + const defaultStroke = defaultWrapper.querySelector(".bx--loading__stroke"); + expect(defaultStroke).toHaveAttribute("r", "44"); + + // Small spinner + const smallWrapper = screen.getByTestId("loader-small"); + const smallStroke = smallWrapper.querySelector(".bx--loading__stroke"); + expect(smallStroke).toHaveAttribute("r", "42"); + }); +});