diff --git a/tests/Checkbox/Checkbox.test.ts b/tests/Checkbox/Checkbox.test.ts index 25b6bee8..f4779541 100644 --- a/tests/Checkbox/Checkbox.test.ts +++ b/tests/Checkbox/Checkbox.test.ts @@ -1,9 +1,9 @@ import { render, screen } from "@testing-library/svelte"; import { user } from "../setup-tests"; -import Checkbox from "./Checkbox.test.svelte"; -import CheckboxSkeleton from "./Checkbox.skeleton.test.svelte"; import CheckboxGroup from "./Checkbox.group.test.svelte"; +import CheckboxSkeleton from "./Checkbox.skeleton.test.svelte"; import CheckboxSlot from "./Checkbox.slot.test.svelte"; +import Checkbox from "./Checkbox.test.svelte"; describe("Checkbox", () => { beforeEach(() => { @@ -17,13 +17,15 @@ describe("Checkbox", () => { expect(checkbox).toBeInTheDocument(); const input = checkbox.querySelector("input[type='checkbox']"); + assert(input); expect(input).not.toBeChecked(); expect(input).not.toBeDisabled(); expect(input).not.toHaveAttribute("indeterminate"); const label = checkbox.querySelector("label"); + assert(label); expect(label).toHaveTextContent("Checkbox label"); - const hiddenElement = label?.querySelector(".bx--visually-hidden"); + const hiddenElement = label.querySelector(".bx--visually-hidden"); expect(hiddenElement).not.toBeInTheDocument(); }); @@ -33,6 +35,7 @@ describe("Checkbox", () => { const input = screen .getByTestId("checkbox") .querySelector("input[type='checkbox']"); + assert(input); expect(input).toBeChecked(); }); @@ -42,7 +45,8 @@ describe("Checkbox", () => { const input = screen .getByTestId("checkbox") - .querySelector("input[type='checkbox']") as HTMLInputElement; + .querySelector("input[type='checkbox']"); + assert(input); await user.click(input); expect(consoleLog).toHaveBeenCalledWith("check"); expect(consoleLog).toHaveBeenCalledWith("click"); @@ -54,7 +58,9 @@ describe("Checkbox", () => { const input = screen .getByTestId("checkbox") - .querySelector("input[type='checkbox']") as HTMLInputElement; + .querySelector("input[type='checkbox']"); + assert(input); + assert(input instanceof HTMLInputElement); expect(input.indeterminate).toBe(true); }); @@ -64,6 +70,7 @@ describe("Checkbox", () => { const input = screen .getByTestId("checkbox") .querySelector("input[type='checkbox']"); + assert(input); expect(input).toBeDisabled(); }); @@ -71,7 +78,8 @@ describe("Checkbox", () => { render(Checkbox, { hideLabel: true }); const label = screen.getByTestId("checkbox").querySelector("label"); - const hiddenElement = label?.querySelector(".bx--visually-hidden"); + assert(label); + const hiddenElement = label.querySelector(".bx--visually-hidden"); expect(hiddenElement).toBeInTheDocument(); }); @@ -79,6 +87,7 @@ describe("Checkbox", () => { render(Checkbox, { labelText: "Custom label" }); const label = screen.getByTestId("checkbox").querySelector("label"); + assert(label); expect(label).toHaveTextContent("Custom label"); }); @@ -101,13 +110,16 @@ describe("Checkbox", () => { const checkbox1 = screen .getByTestId("checkbox-1") - .querySelector("input[type='checkbox']") as HTMLInputElement; + .querySelector("input[type='checkbox']"); const checkbox2 = screen .getByTestId("checkbox-2") - .querySelector("input[type='checkbox']") as HTMLInputElement; + .querySelector("input[type='checkbox']"); const checkbox3 = screen .getByTestId("checkbox-3") - .querySelector("input[type='checkbox']") as HTMLInputElement; + .querySelector("input[type='checkbox']"); + assert(checkbox1); + assert(checkbox2); + assert(checkbox3); expect(checkbox1).not.toBeChecked(); expect(checkbox2).toBeChecked(); diff --git a/tests/Select/Select.test.ts b/tests/Select/Select.test.ts index 0805ae6b..499450f1 100644 --- a/tests/Select/Select.test.ts +++ b/tests/Select/Select.test.ts @@ -1,9 +1,9 @@ import { render, screen } from "@testing-library/svelte"; import { user } from "../setup-tests"; -import Select from "./Select.test.svelte"; +import SelectFalsy from "./Select.falsy.test.svelte"; import SelectGroup from "./Select.group.test.svelte"; import SelectSkeleton from "./Select.skeleton.test.svelte"; -import SelectFalsy from "./Select.falsy.test.svelte"; +import Select from "./Select.test.svelte"; describe("Select", () => { beforeEach(() => { @@ -17,10 +17,12 @@ describe("Select", () => { expect(select).toBeInTheDocument(); const label = select.querySelector("label"); + assert(label); expect(label).toHaveTextContent("Select label"); expect(label).not.toHaveClass("bx--visually-hidden"); - const selectElement = select.querySelector("select") as HTMLSelectElement; + const selectElement = select.querySelector("select"); + assert(selectElement); expect(selectElement).not.toBeDisabled(); expect(selectElement).not.toHaveAttribute("aria-invalid"); @@ -33,9 +35,8 @@ describe("Select", () => { it("renders with selected value", () => { render(Select, { selected: "option-2" }); - const selectElement = screen - .getByTestId("select") - .querySelector("select") as HTMLSelectElement; + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); expect(selectElement).toHaveValue("option-2"); }); @@ -43,9 +44,8 @@ describe("Select", () => { const consoleLog = vi.spyOn(console, "log"); render(Select); - const selectElement = screen - .getByTestId("select") - .querySelector("select") as HTMLSelectElement; + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); await user.selectOptions(selectElement, "option-2"); expect(consoleLog).toHaveBeenCalledWith("change"); @@ -56,27 +56,24 @@ describe("Select", () => { it("renders default size", () => { render(Select); - const selectElement = screen - .getByTestId("select") - .querySelector("select") as HTMLSelectElement; + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); expect(selectElement).not.toHaveClass("bx--select-input--sm"); expect(selectElement).not.toHaveClass("bx--select-input--xl"); }); it("renders small size variant", () => { render(Select, { size: "sm" }); - const selectElement = screen - .getByTestId("select") - .querySelector("select") as HTMLSelectElement; + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); expect(selectElement).toHaveClass("bx--select-input--sm"); expect(selectElement).not.toHaveClass("bx--select-input--xl"); }); it("renders extra large size variant", () => { render(Select, { size: "xl" }); - const selectElement = screen - .getByTestId("select") - .querySelector("select") as HTMLSelectElement; + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); expect(selectElement).not.toHaveClass("bx--select-input--sm"); expect(selectElement).toHaveClass("bx--select-input--xl"); }); @@ -85,7 +82,8 @@ describe("Select", () => { render(Select); const selectWrapper = screen .getByTestId("select") - .querySelector(".bx--select") as HTMLElement; + .querySelector(".bx--select"); + assert(selectWrapper); expect(selectWrapper).not.toHaveClass("bx--select--inline"); }); @@ -93,7 +91,8 @@ describe("Select", () => { render(Select, { inline: true }); const selectWrapper = screen .getByTestId("select") - .querySelector(".bx--select") as HTMLElement; + .querySelector(".bx--select"); + assert(selectWrapper); expect(selectWrapper).toHaveClass("bx--select--inline"); }); @@ -101,7 +100,8 @@ describe("Select", () => { render(Select); const selectWrapper = screen .getByTestId("select") - .querySelector(".bx--select") as HTMLElement; + .querySelector(".bx--select"); + assert(selectWrapper); expect(selectWrapper).not.toHaveClass("bx--select--light"); }); @@ -109,31 +109,32 @@ describe("Select", () => { render(Select, { light: true }); const selectWrapper = screen .getByTestId("select") - .querySelector(".bx--select") as HTMLElement; + .querySelector(".bx--select"); + assert(selectWrapper); expect(selectWrapper).toHaveClass("bx--select--light"); }); it("renders enabled by default", () => { render(Select); - const selectElement = screen - .getByTestId("select") - .querySelector("select") as HTMLSelectElement; + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); expect(selectElement).not.toBeDisabled(); }); it("renders disabled state", () => { render(Select, { disabled: true }); - const selectElement = screen - .getByTestId("select") - .querySelector("select") as HTMLSelectElement; + const selectElement = screen.getByTestId("select").querySelector("select"); + assert(selectElement); expect(selectElement).toBeDisabled(); }); it("renders valid by default", () => { render(Select); const wrapper = screen.getByTestId("select"); - const selectElement = wrapper.querySelector("select") as HTMLSelectElement; - const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + const selectElement = wrapper.querySelector("select"); + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectElement); + assert(selectWrapper); expect(selectWrapper).not.toHaveClass("bx--select--invalid"); expect(selectElement).not.toHaveAttribute("aria-invalid"); @@ -149,8 +150,10 @@ describe("Select", () => { }); const wrapper = screen.getByTestId("select"); - const selectElement = wrapper.querySelector("select") as HTMLSelectElement; - const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + const selectElement = wrapper.querySelector("select"); + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectElement); + assert(selectWrapper); expect(selectWrapper).toHaveClass("bx--select--invalid"); expect(selectElement).toHaveAttribute("aria-invalid", "true"); @@ -162,7 +165,8 @@ describe("Select", () => { it("renders without warning by default", () => { render(Select); const wrapper = screen.getByTestId("select"); - const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectWrapper); expect(selectWrapper).not.toHaveClass("bx--select--warning"); expect( @@ -177,7 +181,8 @@ describe("Select", () => { }); const wrapper = screen.getByTestId("select"); - const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + const selectWrapper = wrapper.querySelector(".bx--select"); + assert(selectWrapper); expect(selectWrapper).toHaveClass("bx--select--warning"); expect(wrapper.querySelector(".bx--form-requirement")).toHaveTextContent( "Warning message", @@ -195,23 +200,22 @@ describe("Select", () => { render(Select, { helperText: "Helper text" }); const helperElement = screen .getByTestId("select") - .querySelector(".bx--form__helper-text") as HTMLElement; + .querySelector(".bx--form__helper-text"); + assert(helperElement); expect(helperElement).toHaveTextContent("Helper text"); }); it("renders visible label by default", () => { render(Select); - const label = screen - .getByTestId("select") - .querySelector("label") as HTMLElement; + const label = screen.getByTestId("select").querySelector("label"); + assert(label); expect(label).not.toHaveClass("bx--visually-hidden"); }); it("renders with hidden label", () => { render(Select, { hideLabel: true }); - const label = screen - .getByTestId("select") - .querySelector("label") as HTMLElement; + const label = screen.getByTestId("select").querySelector("label"); + assert(label); expect(label).toHaveClass("bx--visually-hidden"); }); @@ -219,7 +223,8 @@ describe("Select", () => { render(SelectGroup); const select = screen.getByTestId("select-group"); - const selectElement = select.querySelector("select") as HTMLSelectElement; + const selectElement = select.querySelector("select"); + assert(selectElement); const optgroups = selectElement.querySelectorAll("optgroup"); expect(optgroups).toHaveLength(2); @@ -246,7 +251,7 @@ describe("Select", () => { expect(screen.getByLabelText("Falsy text")).toHaveValue("-1"); expect(screen.getByRole("option", { name: "" })).toBeInTheDocument(); }); - + it("renders value if `text` is undefined", () => { render(SelectFalsy);