92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import { render, screen, fireEvent } from "@solidjs/testing-library";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
|
|
import { Checkbox } from "../../../../src/ts/components/ui/form/Checkbox";
|
|
|
|
function makeField(name: string, checked = false) {
|
|
return {
|
|
name,
|
|
state: { value: checked },
|
|
handleBlur: vi.fn(),
|
|
handleChange: vi.fn(),
|
|
} as any;
|
|
}
|
|
|
|
describe("Checkbox", () => {
|
|
it("renders with label text", () => {
|
|
const field = makeField("agree");
|
|
render(() => <Checkbox field={() => field} label="I agree" />);
|
|
|
|
expect(screen.getByText("I agree")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders checkbox with field name", () => {
|
|
const field = makeField("terms");
|
|
render(() => <Checkbox field={() => field} />);
|
|
|
|
const input = screen.getByRole("checkbox", { hidden: true });
|
|
expect(input).toHaveAttribute("id", "terms");
|
|
expect(input).toHaveAttribute("name", "terms");
|
|
});
|
|
|
|
it("reflects checked state", () => {
|
|
const field = makeField("opt", true);
|
|
render(() => <Checkbox field={() => field} />);
|
|
|
|
const input = screen.getByRole("checkbox", { hidden: true });
|
|
expect(input).toBeChecked();
|
|
});
|
|
|
|
it("reflects unchecked state", () => {
|
|
const field = makeField("opt", false);
|
|
render(() => <Checkbox field={() => field} />);
|
|
|
|
const input = screen.getByRole("checkbox", { hidden: true });
|
|
expect(input).not.toBeChecked();
|
|
});
|
|
|
|
it("calls handleChange on change", async () => {
|
|
const field = makeField("opt");
|
|
render(() => <Checkbox field={() => field} />);
|
|
|
|
const input = screen.getByRole("checkbox", { hidden: true });
|
|
await fireEvent.change(input, { target: { checked: true } });
|
|
expect(field.handleChange).toHaveBeenCalledWith(true);
|
|
});
|
|
|
|
it("calls handleBlur on blur", async () => {
|
|
const field = makeField("opt");
|
|
render(() => <Checkbox field={() => field} />);
|
|
|
|
const input = screen.getByRole("checkbox", { hidden: true });
|
|
await fireEvent.blur(input);
|
|
expect(field.handleBlur).toHaveBeenCalled();
|
|
});
|
|
|
|
it("renders disabled checkbox", () => {
|
|
const field = makeField("opt");
|
|
render(() => <Checkbox field={() => field} disabled />);
|
|
|
|
const input = screen.getByRole("checkbox", { hidden: true });
|
|
expect(input).toBeDisabled();
|
|
});
|
|
|
|
it("shows check icon styling when checked", () => {
|
|
const field = makeField("opt", true);
|
|
const { container } = render(() => <Checkbox field={() => field} />);
|
|
|
|
const icon = container.querySelector(".fa-check");
|
|
expect(icon).toBeInTheDocument();
|
|
expect(icon).toHaveClass("text-main");
|
|
});
|
|
|
|
it("shows transparent icon styling when unchecked", () => {
|
|
const field = makeField("opt", false);
|
|
const { container } = render(() => <Checkbox field={() => field} />);
|
|
|
|
const icon = container.querySelector(".fa-check");
|
|
expect(icon).toBeInTheDocument();
|
|
expect(icon).toHaveClass("text-transparent");
|
|
});
|
|
});
|