adding monkeytype

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

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

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

@@ -0,0 +1,88 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+
+import { FieldIndicator } from "../../../../src/ts/components/ui/form/FieldIndicator";
+
+function makeField(overrides: {
+  isValidating?: boolean;
+  isTouched?: boolean;
+  isValid?: boolean;
+  isDefaultValue?: boolean;
+  errors?: string[];
+  hasWarning?: boolean;
+  warnings?: string[];
+}) {
+  return {
+    state: {
+      meta: {
+        isValidating: overrides.isValidating ?? false,
+        isTouched: overrides.isTouched ?? false,
+        isValid: overrides.isValid ?? true,
+        isDefaultValue: overrides.isDefaultValue ?? true,
+        errors: overrides.errors ?? [],
+      },
+    },
+    getMeta: () => ({
+      hasWarning: overrides.hasWarning ?? false,
+      warnings: overrides.warnings ?? [],
+    }),
+  } as any;
+}
+
+describe("FieldIndicator", () => {
+  it("shows loading spinner when validating", () => {
+    const { container } = render(() => (
+      <FieldIndicator field={makeField({ isValidating: true })} />
+    ));
+    expect(container.querySelector(".fa-circle-notch")).toBeInTheDocument();
+  });
+
+  it("shows error icon when touched and invalid", () => {
+    const { container } = render(() => (
+      <FieldIndicator
+        field={makeField({
+          isTouched: true,
+          isValid: false,
+          errors: ["bad value"],
+        })}
+      />
+    ));
+    expect(container.querySelector(".fa-times")).toBeInTheDocument();
+  });
+
+  it("shows warning icon when has warning", () => {
+    const { container } = render(() => (
+      <FieldIndicator
+        field={makeField({
+          hasWarning: true,
+          warnings: ["weak"],
+        })}
+      />
+    ));
+    expect(
+      container.querySelector(".fa-exclamation-triangle"),
+    ).toBeInTheDocument();
+  });
+
+  it("shows success check when touched, valid, and not default", () => {
+    const { container } = render(() => (
+      <FieldIndicator
+        field={makeField({
+          isTouched: true,
+          isValid: true,
+          isDefaultValue: false,
+        })}
+      />
+    ));
+    expect(container.querySelector(".fa-check")).toBeInTheDocument();
+  });
+
+  it("shows nothing when untouched and not validating", () => {
+    const { container } = render(() => (
+      <FieldIndicator field={makeField({})} />
+    ));
+    expect(container.querySelector(".fa-times")).not.toBeInTheDocument();
+    expect(container.querySelector(".fa-check")).not.toBeInTheDocument();
+    expect(container.querySelector(".fa-circle-notch")).not.toBeInTheDocument();
+  });
+});

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();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { render, screen } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+
+import { LabeledField } from "../../../../src/ts/components/ui/form/LabeledField";
+
+describe("LabeledField", () => {
+  it("renders label text correctly", () => {
+    render(() => (
+      <LabeledField label="test label">
+        <input />
+      </LabeledField>
+    ));
+
+    expect(screen.getByText("test label")).toBeInTheDocument();
+  });
+
+  it("renders children correctly", () => {
+    render(() => (
+      <LabeledField label="test">
+        <div data-testid="child">child content</div>
+      </LabeledField>
+    ));
+
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+  });
+
+  it("renders subtext when provided", () => {
+    render(() => (
+      <LabeledField label="test" subLabel="helper text">
+        <input />
+      </LabeledField>
+    ));
+
+    expect(screen.getByText("helper text")).toBeInTheDocument();
+  });
+
+  it("links label to input when id is provided", () => {
+    const { container } = render(() => (
+      <LabeledField label="test" id="test-id">
+        <input id="test-id" />
+      </LabeledField>
+    ));
+
+    const label = container.querySelector("label");
+    expect(label).toHaveAttribute("for", "test-id");
+  });
+
+  it("applies custom class to wrapper", () => {
+    const { container } = render(() => (
+      <LabeledField label="test" class="custom-wrapper-class">
+        <input />
+      </LabeledField>
+    ));
+
+    expect(container.firstChild).toHaveClass("custom-wrapper-class");
+  });
+});

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

@@ -0,0 +1,74 @@
+import { render, screen } from "@solidjs/testing-library";
+import { JSXElement } from "solid-js";
+import { describe, it, expect } from "vitest";
+
+import { SubmitButton } from "../../../../src/ts/components/ui/form/SubmitButton";
+
+type FormState = {
+  canSubmit: boolean;
+  isSubmitting: boolean;
+  isValid: boolean;
+  isDirty: boolean;
+};
+
+function makeForm(state: Partial<FormState> = {}) {
+  const fullState: FormState = {
+    canSubmit: true,
+    isSubmitting: false,
+    isValid: true,
+    isDirty: true,
+    ...state,
+  };
+
+  return {
+    Subscribe: (props: {
+      selector: (state: FormState) => FormState;
+      children: (state: () => FormState) => JSXElement;
+    }) => props.children(() => props.selector(fullState)),
+  };
+}
+
+describe("SubmitButton", () => {
+  it("renders enabled when form is dirty, valid, and can submit", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" />);
+    expect(screen.getByRole("button", { name: "Save" })).not.toBeDisabled();
+  });
+
+  it("renders as submit type", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" />);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
+  });
+
+  it("disables when form is not dirty", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isDirty: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form cannot submit", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ canSubmit: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form is submitting", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isSubmitting: true })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form is not valid", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isValid: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when disabled prop is true even if form is ready", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" disabled />);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+});

frontend/__tests__/components/ui/form/utils.spec.ts

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi } from "vitest";
+import { z } from "zod";
+
+import {
+  fromSchema,
+  handleResult,
+  allFieldsMandatory,
+  fieldMandatory,
+  type ValidationResult,
+} from "../../../../src/ts/components/ui/form/utils";
+
+describe("fromSchema", () => {
+  const schema = z.string().min(3, "too short").max(10, "too long");
+  const validate = fromSchema(schema);
+
+  it("returns undefined for valid value", () => {
+    expect(validate({ value: "hello" })).toBeUndefined();
+  });
+
+  it("returns error messages for invalid value", () => {
+    expect(validate({ value: "ab" })).toEqual(["too short"]);
+  });
+
+  it("returns multiple error messages", () => {
+    const numSchema = z.number().min(5, "too small").max(3, "too big");
+    const v = fromSchema(numSchema);
+    const result = v({ value: 4 });
+    // 4 fails min(5) but passes max(3)? Actually 4 > 3, so both fail
+    // number 4: min(5) fails, max(3) fails
+    expect(result).toEqual(["too small", "too big"]);
+  });
+});
+
+describe("handleResult", () => {
+  const mockSetMeta = vi.fn();
+
+  function makeField() {
+    mockSetMeta.mockClear();
+    return { setMeta: mockSetMeta } as any;
+  }
+
+  it("returns undefined for undefined results", () => {
+    expect(handleResult(makeField(), undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for empty results", () => {
+    expect(handleResult(makeField(), [])).toBeUndefined();
+  });
+
+  it("returns error messages and ignores warnings", () => {
+    const results: ValidationResult[] = [
+      { type: "error", message: "bad email" },
+      { type: "error", message: "too short" },
+    ];
+    expect(handleResult(makeField(), results)).toEqual([
+      "bad email",
+      "too short",
+    ]);
+  });
+
+  it("sets warning meta on field", () => {
+    const results: ValidationResult[] = [
+      { type: "warning", message: "weak password" },
+    ];
+    const field = makeField();
+    const result = handleResult(field, results);
+
+    expect(result).toBeUndefined();
+    expect(mockSetMeta).toHaveBeenCalledOnce();
+
+    const updater = mockSetMeta.mock.calls[0]![0];
+    const newMeta = updater({ existing: true });
+    expect(newMeta).toEqual({
+      existing: true,
+      hasWarning: true,
+      warnings: ["weak password"],
+    });
+  });
+
+  it("handles both errors and warnings", () => {
+    const results: ValidationResult[] = [
+      { type: "warning", message: "not recommended" },
+      { type: "error", message: "invalid" },
+    ];
+    const field = makeField();
+    const result = handleResult(field, results);
+
+    expect(mockSetMeta).toHaveBeenCalledOnce();
+    expect(result).toEqual(["invalid"]);
+  });
+});
+
+describe("allFieldsMandatory", () => {
+  const validate = allFieldsMandatory<{ a: string; b: string }>();
+
+  it("returns undefined when all fields have values", () => {
+    expect(validate({ value: { a: "x", b: "y" } })).toBeUndefined();
+  });
+
+  it("returns error when a field is empty string", () => {
+    expect(validate({ value: { a: "x", b: "" } })).toBe(
+      "all fields are mandatory",
+    );
+  });
+
+  it("returns error when a field is undefined", () => {
+    expect(validate({ value: { a: "x", b: undefined } as any })).toBe(
+      "all fields are mandatory",
+    );
+  });
+});
+
+describe("fieldMandatory", () => {
+  it("returns undefined for non-empty value", () => {
+    const validate = fieldMandatory();
+    expect(validate({ value: "hello" })).toBeUndefined();
+  });
+
+  it("returns default message for empty string", () => {
+    const validate = fieldMandatory();
+    expect(validate({ value: "" })).toBe("mandatory");
+  });
+
+  it("returns default message for undefined", () => {
+    const validate = fieldMandatory();
+    expect(validate({ value: undefined })).toBe("mandatory");
+  });
+
+  it("returns custom message", () => {
+    const validate = fieldMandatory("required field");
+    expect(validate({ value: "" })).toBe("required field");
+  });
+});