103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import { render, screen, fireEvent } from "@solidjs/testing-library";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
|
|
import { InputField } from "../../../../src/ts/components/ui/form/InputField";
|
|
|
|
function makeField(name: string, value = "") {
|
|
return {
|
|
name,
|
|
state: {
|
|
value,
|
|
meta: {
|
|
isValidating: false,
|
|
isTouched: false,
|
|
isValid: true,
|
|
isDefaultValue: true,
|
|
errors: [],
|
|
},
|
|
},
|
|
handleBlur: vi.fn(),
|
|
handleChange: vi.fn(),
|
|
getMeta: () => ({ hasWarning: false, warnings: [] }),
|
|
} as any;
|
|
}
|
|
|
|
describe("InputField", () => {
|
|
it("uses custom placeholder when provided", () => {
|
|
const field = makeField("email");
|
|
render(() => <InputField field={() => field} placeholder="Enter email" />);
|
|
|
|
expect(screen.getByPlaceholderText("Enter email")).toBeInTheDocument();
|
|
});
|
|
|
|
it("defaults to text type", () => {
|
|
const field = makeField("name");
|
|
render(() => <InputField field={() => field} />);
|
|
|
|
expect(screen.getByRole("textbox")).toHaveAttribute("type", "text");
|
|
});
|
|
|
|
it("uses custom type", () => {
|
|
const field = makeField("password");
|
|
const { container } = render(() => (
|
|
<InputField field={() => field} type="password" />
|
|
));
|
|
|
|
expect(container.querySelector("input")).toHaveAttribute(
|
|
"type",
|
|
"password",
|
|
);
|
|
});
|
|
|
|
it("calls handleChange on input", async () => {
|
|
const field = makeField("name");
|
|
render(() => <InputField field={() => field} />);
|
|
|
|
await fireEvent.input(screen.getByRole("textbox"), {
|
|
target: { value: "test" },
|
|
});
|
|
expect(field.handleChange).toHaveBeenCalledWith("test");
|
|
});
|
|
|
|
it("calls handleBlur on blur", async () => {
|
|
const field = makeField("name");
|
|
render(() => <InputField field={() => field} />);
|
|
|
|
await fireEvent.blur(screen.getByRole("textbox"));
|
|
expect(field.handleBlur).toHaveBeenCalled();
|
|
});
|
|
|
|
it("calls onFocus callback", async () => {
|
|
const field = makeField("name");
|
|
const onFocus = vi.fn();
|
|
render(() => <InputField field={() => field} onFocus={onFocus} />);
|
|
|
|
await fireEvent.focus(screen.getByRole("textbox"));
|
|
expect(onFocus).toHaveBeenCalled();
|
|
});
|
|
|
|
it("renders disabled input", () => {
|
|
const field = makeField("name");
|
|
render(() => <InputField field={() => field} disabled />);
|
|
|
|
expect(screen.getByRole("textbox")).toBeDisabled();
|
|
});
|
|
|
|
it("shows FieldIndicator when showIndicator is true", () => {
|
|
const field = makeField("name");
|
|
field.state.meta.isValidating = true;
|
|
const { container } = render(() => (
|
|
<InputField field={() => field} showIndicator />
|
|
));
|
|
|
|
expect(container.querySelector(".fa-circle-notch")).toBeInTheDocument();
|
|
});
|
|
|
|
it("hides FieldIndicator by default", () => {
|
|
const field = makeField("name");
|
|
const { container } = render(() => <InputField field={() => field} />);
|
|
|
|
expect(container.querySelector(".fa-circle-notch")).not.toBeInTheDocument();
|
|
});
|
|
});
|