adding monkeytype

frontend/__tests__/components/ui/form/InputField.spec.tsx

@@ -0,0 +1,102 @@
+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();
+  });
+});