diff --git a/tests/ProgressBar.test.svelte b/tests/ProgressBar.test.svelte deleted file mode 100644 index 3ab6d75d..00000000 --- a/tests/ProgressBar.test.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - - - - diff --git a/tests/ProgressBar/ProgressBar.test.svelte b/tests/ProgressBar/ProgressBar.test.svelte new file mode 100644 index 00000000..cb5f46ed --- /dev/null +++ b/tests/ProgressBar/ProgressBar.test.svelte @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/ProgressBar/ProgressBar.test.ts b/tests/ProgressBar/ProgressBar.test.ts new file mode 100644 index 00000000..5be9ae76 --- /dev/null +++ b/tests/ProgressBar/ProgressBar.test.ts @@ -0,0 +1,85 @@ +import { render, screen, within } from "@testing-library/svelte"; +import ProgressBar from "./ProgressBar.test.svelte"; + +describe("ProgressBar", () => { + it("should render indeterminate if status is active", () => { + render(ProgressBar); + + const progressBar = screen.getByTestId("indeterminate-progress"); + expect(progressBar.closest("div")).toHaveClass( + "bx--progress-bar--indeterminate", + ); + expect(progressBar).not.toHaveAttribute("aria-valuenow"); + expect(progressBar).not.toHaveAttribute("aria-valuemin"); + expect(progressBar).not.toHaveAttribute("aria-valuemax"); + }); + + it("should render with helper text", () => { + render(ProgressBar); + + const helperText = screen.getByText("Loading..."); + expect(helperText).toHaveClass("bx--progress-bar__helper-text"); + }); + + it("should render with specified value and max", () => { + render(ProgressBar); + + const progressBar = within(screen.getByTestId("progress-40%")).getByRole( + "progressbar", + ); + expect(progressBar).toHaveAttribute("aria-valuenow", "40"); + expect(progressBar).toHaveAttribute("aria-valuemin", "0"); + expect(progressBar).toHaveAttribute("aria-valuemax", "100"); + }); + + it("should render different sizes", () => { + render(ProgressBar); + + const smallBar = screen.getByTestId("small-progress"); + const mediumBar = screen.getByTestId("medium-progress"); + + expect(smallBar).toHaveClass("bx--progress-bar--small"); + expect(mediumBar).toHaveClass("bx--progress-bar--big"); + }); + + it("should render different kinds", () => { + render(ProgressBar); + + const inlineBar = screen.getByTestId("inline-progress"); + const indentedBar = screen.getByTestId("indented-progress"); + + expect(inlineBar).toHaveClass("bx--progress-bar--inline"); + expect(indentedBar).toHaveClass("bx--progress-bar--indented"); + }); + + it("should handle different statuses", () => { + render(ProgressBar); + + const errorBar = screen.getByTestId("error-progress"); + const finishedBar = screen.getByTestId("finished-progress"); + + expect(errorBar).toHaveClass("bx--progress-bar--error"); + expect(finishedBar).toHaveClass("bx--progress-bar--finished"); + }); + + it("should handle hidden label", () => { + render(ProgressBar); + + const label = screen.getByText("Hidden label"); + expect(label).toHaveClass("bx--visually-hidden"); + }); + + it("should cap values appropriately", () => { + render(ProgressBar); + + const overMax = within(screen.getByTestId("over-max")).getByRole( + "progressbar", + ); + expect(overMax).toHaveAttribute("aria-valuenow", "100"); + + const underZero = within(screen.getByTestId("under-zero")).getByRole( + "progressbar", + ); + expect(underZero).toHaveAttribute("aria-valuenow", "0"); + }); +});