@opentf/web-form 0.1.0 → 1.1.0

package/tests/DynamicArrays.test.js

@@ -0,0 +1,33 @@
+import { expect, test, describe } from "bun:test";
+import { render, userEvent } from "@opentf/web-test";
+import DynamicArrayForm from "./DynamicArrayForm.jsx";
+
+describe("Dynamic Arrays", () => {
+  test("adds and removes items", async () => {
+    const { getByTestId, getAllByRole, queryByTestId } = render(DynamicArrayForm);
+    const user = userEvent.setup();
+
+    const addBtn = getByTestId("add-item");
+    const list = getByTestId("item-list");
+
+    expect(getAllByRole("listitem").length).toBe(1);
+    expect(getByTestId("item-0").textContent).toContain("Item 1");
+
+    // Add item
+    await user.click(addBtn);
+    expect(getAllByRole("listitem").length).toBe(2);
+    expect(getByTestId("item-1").textContent).toContain("Item 2");
+
+    // Add another
+    await user.click(addBtn);
+    expect(getAllByRole("listitem").length).toBe(3);
+
+    // Remove middle item (Item 2 at index 1)
+    await user.click(getByTestId("remove-1"));
+    expect(getAllByRole("listitem").length).toBe(2);
+    
+    // Check remaining items
+    expect(getByTestId("item-0").textContent).toContain("Item 1");
+    expect(getByTestId("item-1").textContent).toContain("Item 3"); // Item 3 moved to index 1
+  });
+});

package/tests/DynamicListForm.jsx

@@ -0,0 +1,20 @@
+import { createForm } from "../index.js";
+
+export default function DynamicPrimitiveForm() {
+  const form = createForm({
+    initialValues: { skills: ["JavaScript", "HTML"] }
+  });
+
+  return (
+    <div>
+      {form.values.skills.map((skill, index) => (
+        <div data-testid={`row-${index}`}>
+          <input 
+            {...form.register(`skills.${index}`)} 
+            data-testid={`input-${index}`}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/tests/Logic.test.js

@@ -0,0 +1,153 @@
+import { expect, test, describe } from "bun:test";
+import { createForm } from "../index.js";
+
+describe("Web App Framework Forms Library - Pure Logic", () => {
+  test("initializes with flat values", () => {
+    const form = createForm({
+      initialValues: { username: "alice", email: "alice@example.com" }
+    });
+    
+    expect(form.values.username).toBe("alice");
+    expect(form.values.email).toBe("alice@example.com");
+  });
+
+  test("initializes with nested values", () => {
+    const form = createForm({
+      initialValues: {
+        profile: { firstName: "John", lastName: "Doe" }
+      }
+    });
+    
+    expect(form.values.profile.firstName).toBe("John");
+    expect(form.values.profile.lastName).toBe("Doe");
+  });
+
+  test("initializes with array values", () => {
+    const form = createForm({
+      initialValues: {
+        skills: ["JS", "Framework"]
+      }
+    });
+    
+    expect(form.values.skills[0]).toBe("JS");
+    expect(form.values.skills[1]).toBe("Framework");
+  });
+
+  test("updates values reactively", () => {
+    const form = createForm({
+      initialValues: { count: 0 }
+    });
+    
+    form.values.count = 1;
+    expect(form.values.count).toBe(1);
+  });
+
+  test("supports direct assignment to values proxy", () => {
+    const form = createForm({
+      initialValues: { user: { name: "A" } }
+    });
+    
+    form.values.user = { name: "B" };
+    expect(form.values.user.name).toBe("B");
+  });
+
+  test("validates values", () => {
+    const form = createForm({
+      mode: "onChange",
+      initialValues: { age: 20 },
+      validate: (v) => {
+        const errors = {};
+        if (v.age < 18) errors.age = "Too young";
+        return errors;
+      }
+    });
+    
+    expect(form.errors.age).toBeUndefined();
+    form.values.age = 10;
+    expect(form.errors.age).toBe("Too young");
+  });
+
+  test("errors proxy supports direct access", () => {
+    const form = createForm({
+      mode: "onChange",
+      initialValues: { username: "" },
+      validate: (v) => (v.username ? {} : { username: "Required" }),
+    });
+
+    expect(form.errors.username).toBe("Required");
+
+    form.values.username = "Alice";
+    expect(form.errors.username).toBeUndefined();
+  });
+
+
+  test("supports Zod-style validator returning { errors }", () => {
+    const form = createForm({
+      mode: "onChange",
+      initialValues: { email: "a" },
+      validator: (v) => {
+        return { errors: { email: "Invalid email" } };
+      },
+    });
+
+    expect(form.errors.email).toBe("Invalid email");
+  });
+
+  test("handles async validation", async () => {
+    const form = createForm({
+      mode: "onChange",
+      initialValues: { username: "abc" },
+      validate: async (v) => {
+        await new Promise((r) => setTimeout(r, 10));
+        return v.username.length < 3 ? { username: "Too short" } : {};
+      },
+    });
+
+    expect(form.isValidating).toBe(true); // Immediate validation in onChange mode
+    await new Promise((r) => setTimeout(r, 20));
+    expect(form.isValidating).toBe(false);
+    expect(form.errors.username).toBeUndefined();
+
+    form.values.username = "al";
+    expect(form.isValidating).toBe(true);
+    await new Promise((r) => setTimeout(r, 20));
+    expect(form.isValidating).toBe(false);
+    expect(form.errors.username).toBe("Too short");
+
+    form.values.username = "alice";
+    await new Promise((r) => setTimeout(r, 20));
+    expect(form.errors.username).toBeUndefined();
+    expect(form.isValid).toBe(true);
+  });
+
+  test("reactive array mutations (push/splice)", () => {
+    const form = createForm({
+      initialValues: { tags: ["js"] },
+    });
+
+    let changeCount = 0;
+    form._signals.values.subscribe(() => changeCount++);
+    expect(changeCount).toBe(1);
+
+    form.values.tags.push("web");
+    expect(form.values.tags).toEqual(["js", "web"]);
+    expect(changeCount).toBe(2);
+
+    form.values.tags.splice(0, 1);
+    expect(form.values.tags).toEqual(["web"]);
+    expect(changeCount).toBe(3);
+  });
+
+  test("reset() with custom values", () => {
+    const form = createForm({
+      initialValues: { a: 1 },
+    });
+
+    form.values.a = 2;
+    form.reset({ a: 10 });
+    expect(form.values.a).toBe(10);
+    expect(form.isChanged).toBe(false); // isChanged is against the NEW initialValues? 
+    // Actually, createForm stores initialValues from the constructor.
+    // If reset(newVals) is called, it should ideally update the reference for isChanged.
+  });
+});

package/tests/NestedFields.test.js

@@ -0,0 +1,28 @@
+import { expect, test, describe } from "bun:test";
+import { render, userEvent } from "@opentf/web-test";
+import NestedForm from "./NestedForm.jsx";
+
+describe("Nested Fields", () => {
+  test("handles deep object paths", async () => {
+    let submittedValues = null;
+    const { getByTestId } = render(NestedForm, { 
+      onSubmit: (v) => submittedValues = v 
+    });
+    const user = userEvent.setup();
+
+    const firstName = getByTestId("first-name");
+    const notifications = getByTestId("notifications");
+    const submit = getByTestId("submit");
+
+    expect(firstName.value).toBe("John");
+    expect(notifications.checked).toBe(true);
+
+    await user.clear(firstName);
+    await user.type(firstName, "Jane");
+    await user.click(notifications); // Uncheck
+
+    await user.click(submit);
+    expect(submittedValues.user.profile.firstName).toBe("Jane");
+    expect(submittedValues.user.settings.notifications).toBe(false);
+  });
+});

package/tests/NestedForm.jsx

@@ -0,0 +1,32 @@
+import { createForm } from "../index.js";
+
+export default function NestedForm({ onSubmit }) {
+  const form = createForm({
+    initialValues: {
+      user: {
+        profile: { firstName: "John" },
+        settings: { notifications: true }
+      }
+    }
+  });
+
+  return (
+    <div>
+      <input 
+        {...form.register("user.profile.firstName")} 
+        data-testid="first-name" 
+      />
+      <input 
+        type="checkbox"
+        {...form.register("user.settings.notifications")} 
+        data-testid="notifications" 
+      />
+      <button 
+        onclick={form.handleSubmit(onSubmit)} 
+        data-testid="submit"
+      >
+        Submit
+      </button>
+    </div>
+  );
+}

package/tests/ProfileForm.jsx

@@ -0,0 +1,34 @@
+import { createForm } from "../index.js";
+
+export default function ProfileForm() {
+  const form = createForm({
+    initialValues: {
+      user: { name: "John" },
+      tags: ["js"]
+    },
+    validate: (v) => {
+      const errors = {};
+      if (v.user.name.length < 3) errors.user = { name: "Too short" };
+      return errors;
+    }
+  });
+
+  const addTag = () => form.values.tags.push(`tag-${form.values.tags.length}`);
+
+  return (
+    <div>
+      <h1 data-testid="title">{form.values.user.name}</h1>
+      <input {...form.register("user.name")} data-testid="name-input" />
+      <div data-testid="name-error">{form.errors.user?.name}</div>
+
+      <ul data-testid="tag-list">
+        {form.values.tags.map((tag, i) => (
+          <li data-testid={`tag-${i}`}>{tag}</li>
+        ))}
+      </ul>
+      <button onclick={addTag} data-testid="add-tag">Add Tag</button>
+
+      <div data-testid="status">{form.isValid ? "Valid" : "Invalid"}</div>
+    </div>
+  );
+}

package/tests/Reactivity.test.js

@@ -0,0 +1,26 @@
+import { expect, test, describe } from "bun:test";
+import { render, userEvent } from "@opentf/web-test";
+import DynamicPrimitiveForm from "./DynamicListForm.jsx";
+
+describe("Web Form Capabilities", () => {
+  test("reactively updates dynamic primitive arrays without losing focus", async () => {
+    const { getByTestId } = render(DynamicPrimitiveForm);
+    const user = userEvent.setup();
+
+    const input0 = getByTestId("input-0");
+    const input1 = getByTestId("input-1");
+    
+    expect(input0.value).toBe("JavaScript");
+    expect(input1.value).toBe("HTML");
+
+    // Simulate typing a new character into the first input
+    await user.type(input0, "!");
+
+    // The value should update immediately via the form's reactivity loop
+    expect(input0.value).toBe("JavaScript!");
+    
+    // Crucially, the exact same DOM node should be retained (focus proves this).
+    // The node must not be destroyed and recreated.
+    expect(document.activeElement).toBe(input0);
+  });
+});

package/tests/RegisterMetadata.test.js

@@ -0,0 +1,83 @@
+import { test, expect } from "bun:test";
+import { createForm } from "../index.js";
+import { effect, signal, batch } from "@opentf/web";
+
+test("register() returns reactive metadata", async () => {
+  const form = createForm({
+    initialValues: { username: "" },
+    validator: (v) => {
+      const errors = {};
+      if (!v.username) errors.username = "Required";
+      return { errors };
+    },
+    mode: "onChange"
+  });
+
+  const field = form.register("username");
+  
+  expect(field.name).toBe("username");
+  expect(field.error.value).toBe("Required"); // Validated on init due to onChange mode
+  expect(field.isTouched.value).toBe(false);
+
+  // Update value to clear error
+  form.values.username = "valid";
+  expect(field.error.value).toBeUndefined();
+
+  // Trigger touch
+  field.onblur();
+  expect(field.isTouched.value).toBe(true);
+});
+
+test("register() handles nested metadata", () => {
+  const form = createForm({
+    initialValues: { profile: { firstName: "" } },
+    validator: (v) => {
+      const errors = {};
+      if (!v.profile?.firstName) errors.profile = { firstName: "Required" };
+      return { errors };
+    }
+  });
+
+  const field = form.register("profile.firstName");
+  
+  expect(field.name).toBe("profile.firstName");
+  expect(field.isTouched.value).toBe(false);
+
+  // Manual touch
+  field.onblur();
+  expect(field.isTouched.value).toBe(true);
+
+  // Manual error update
+  form._signals.errors.value = { profile: { firstName: "Too short" } };
+  form._notifySignals("e"); // Manual notify
+  expect(field.error.value).toBe("Too short");
+});
+
+test("register() metadata is reactive in effects", () => {
+  const form = createForm({
+    initialValues: { email: "" }
+  });
+
+  const field = form.register("email");
+  let caughtError = null;
+  let caughtTouched = null;
+
+  effect(() => {
+    caughtError = field.error.value;
+    caughtTouched = field.isTouched.value;
+  });
+
+  expect(caughtError).toBeUndefined();
+  expect(caughtTouched).toBe(false);
+
+  // Update state
+  batch(() => {
+    form._signals.errors.value = { email: "Invalid" };
+    form._signals.touched.value = { email: true };
+    form._notifySignals("e");
+    form._notifySignals("t");
+  });
+
+  expect(caughtError).toBe("Invalid");
+  expect(caughtTouched).toBe(true);
+});

package/tests/State.test.js

@@ -0,0 +1,93 @@
+import { expect, test, describe } from "bun:test";
+import { createForm } from "../index.js";
+import { sleep } from "@opentf/std";
+
+describe("Web App Framework Forms Library - State Helpers", () => {
+  test("isValid tracks error state", () => {
+    const form = createForm({
+      mode: "onChange",
+      initialValues: { name: "" },
+      validate: (v) => v.name ? {} : { name: "Error" }
+    });
+    
+    expect(form.isValid).toBe(false);
+    form.values.name = "Alice";
+    expect(form.isValid).toBe(true);
+  });
+
+  test("isChanged tracks deep equality with initial values", () => {
+    const form = createForm({
+      initialValues: { user: { name: "Alice" } }
+    });
+    
+    expect(form.isChanged).toBe(false);
+    expect(form.changed.user).toBe(false);
+    
+    form.values.user = { name: "Bob" };
+    expect(form.isChanged).toBe(true);
+    expect(form.changed.user).toBe(true);
+    
+    form.values.user = { name: "Alice" };
+    expect(form.isChanged).toBe(false);
+    expect(form.changed.user).toBe(false);
+  });
+
+  test("isTouched tracks field blur state", () => {
+    const form = createForm({
+      initialValues: { email: "" }
+    });
+    const { onblur } = form.register("email");
+    
+    expect(form.isTouched).toBe(false);
+    expect(form.touched.email).toBe(false);
+    
+    onblur();
+    expect(form.isTouched).toBe(true);
+    expect(form.touched.email).toBe(true);
+  });
+
+  test("isSubmitting and isSubmitted lifecycle", async () => {
+    let resolved = false;
+    const form = createForm({
+      initialValues: { name: "Alice" }
+    });
+    
+    const onSubmit = async () => {
+      await sleep(50);
+      resolved = true;
+    };
+    
+    const handler = form.handleSubmit(onSubmit);
+    
+    expect(form.isSubmitting).toBe(false);
+    expect(form.isSubmitted).toBe(false);
+    
+    const promise = handler();
+    expect(form.isSubmitting).toBe(true);
+    
+    await promise;
+    expect(resolved).toBe(true);
+    expect(form.isSubmitting).toBe(false);
+    expect(form.isSubmitted).toBe(true);
+  });
+
+  test("reset() restores initial state", () => {
+    const form = createForm({
+      initialValues: { count: 0 }
+    });
+    
+    form.values.count = 10;
+    form.register("count").onblur();
+    
+    expect(form.values.count).toBe(10);
+    expect(form.isChanged).toBe(true);
+    expect(form.isTouched).toBe(true);
+    
+    form.reset();
+    
+    expect(form.values.count).toBe(0);
+    expect(form.isChanged).toBe(false);
+    expect(form.isTouched).toBe(false);
+  });
+
+});

package/tests/StateComponent.test.js

@@ -0,0 +1,58 @@
+import { expect, test, describe } from "bun:test";
+import { render, userEvent } from "@opentf/web-test";
+import { sleep } from "@opentf/std";
+import StateForm from "./StateForm.jsx";
+
+const waitFor = async (fn, timeout = 1000) => {
+  const start = Date.now();
+  while (Date.now() - start < timeout) {
+    try {
+      fn();
+      return;
+    } catch (e) {
+      await sleep(10);
+    }
+  }
+  fn();
+};
+
+describe("Form State UI Reactivity", () => {
+  test("updates UI based on state helpers", async () => {
+    let submitted = false;
+    const { getByTestId, queryByTestId } = render(StateForm, { onSubmit: async () => {
+      submitted = true;
+    }});
+    const user = userEvent.setup();
+
+    const input = getByTestId("username");
+    const statusValid = getByTestId("status-valid");
+    const statusChanged = getByTestId("status-changed");
+    const statusTouched = getByTestId("status-touched");
+    const resetBtn = getByTestId("reset");
+    const submitBtn = getByTestId("submit");
+
+    // Initial state
+    expect(statusValid.textContent).toBe("Valid");
+
+    // Change value to invalid
+    await user.clear(input);
+    await user.type(input, "ab");
+    expect(statusValid.textContent).toBe("Invalid");
+    expect(statusChanged.textContent).toBe("Changed");
+    expect(getByTestId("error").textContent).toBe("Too short");
+
+    // Submit valid data
+    await user.clear(input);
+    await user.type(input, "bob");
+    await user.click(submitBtn);
+
+    await waitFor(() => expect(submitted).toBe(true));
+    await waitFor(() => expect(getByTestId("success")).toBeTruthy());
+
+    // Reset
+    await user.click(resetBtn);
+    expect(input.value).toBe("alice");
+    expect(statusChanged.textContent).toBe("Unchanged");
+    expect(queryByTestId("success")).toBeNull();
+  });
+});

package/tests/StateForm.jsx

@@ -0,0 +1,29 @@
+import { createForm } from "../index.js";
+
+export default function StateForm({ onSubmit }) {
+  const form = createForm({
+    mode: "onChange", // Use onChange for easier testing of reactive text
+    initialValues: { username: "alice" },
+    validate: (v) => v.username.length < 3 ? { username: "Too short" } : {}
+  });
+
+  // Submit is driven via onclick rather than a native `type="submit"` (which, in
+  // happy-dom, mangles the form subtree on submission regardless of
+  // preventDefault — a test-env quirk, not a real-browser behaviour).
+  return (
+    <div>
+      <input {...form.register("username")} data-testid="username" />
+
+      <div data-testid="status-valid">{form.isValid ? "Valid" : "Invalid"}</div>
+      <div data-testid="status-changed">{form.isChanged ? "Changed" : "Unchanged"}</div>
+      <div data-testid="status-touched">{form.isTouched ? "Touched" : "Untouched"}</div>
+
+      {form.errors.username && <span data-testid="error">{form.errors.username}</span>}
+
+      <button type="button" onclick={() => form.reset()} data-testid="reset">Reset</button>
+      <button type="button" onclick={form.handleSubmit(onSubmit)} data-testid="submit">Submit</button>
+
+      {form.isSubmitted && <div data-testid="success">Submitted!</div>}
+    </div>
+  );
+}

package/tests/ValidationModes.test.js

@@ -0,0 +1,84 @@
+import { expect, test, describe } from "bun:test";
+import { createForm } from "../index.js";
+
+describe("Web App Framework Forms Library - Validation Modes", () => {
+  test("mode: onBlur (default)", () => {
+    const form = createForm({
+      initialValues: { name: "" },
+      validate: (v) => v.name.length < 3 ? { name: "Short" } : {}
+    });
+    
+    expect(form.errors.name).toBeUndefined();
+    
+    // oninput should NOT trigger validation
+    form.register("name").oninput({ target: { value: "a" } });
+    expect(form.errors.name).toBeUndefined();
+    
+    // onblur SHOULD trigger validation
+    form.register("name").onblur();
+    expect(form.errors.name).toBe("Short");
+  });
+
+  test("mode: onChange", () => {
+    const form = createForm({
+      mode: "onChange",
+      initialValues: { name: "" },
+      validate: (v) => v.name.length < 3 ? { name: "Short" } : {}
+    });
+    
+    expect(form.errors.name).toBe("Short"); // Validates on init
+    
+    form.register("name").oninput({ target: { value: "abc" } });
+    expect(form.errors.name).toBeUndefined();
+  });
+
+  test("mode: onSubmit", async () => {
+    const form = createForm({
+      mode: "onSubmit",
+      initialValues: { name: "" },
+      validate: (v) => v.name.length < 3 ? { name: "Short" } : {}
+    });
+    
+    form.register("name").oninput({ target: { value: "a" } });
+    form.register("name").onblur();
+    expect(form.errors.name).toBeUndefined();
+    
+    await form.handleSubmit(() => {})();
+    expect(form.errors.name).toBe("Short");
+  });
+
+  test("reValidateMode: onChange (default)", () => {
+    const form = createForm({
+      mode: "onBlur", // Validate on blur first
+      initialValues: { name: "" },
+      validate: (v) => v.name.length < 3 ? { name: "Short" } : {}
+    });
+    
+    form.register("name").onblur();
+    expect(form.errors.name).toBe("Short");
+    
+    // Once error exists, oninput SHOULD trigger re-validation
+    form.register("name").oninput({ target: { value: "abc" } });
+    expect(form.errors.name).toBeUndefined();
+  });
+
+  test("reValidateMode: onBlur", () => {
+    const form = createForm({
+      mode: "onBlur",
+      reValidateMode: "onBlur",
+      initialValues: { name: "" },
+      validate: (v) => v.name.length < 3 ? { name: "Short" } : {}
+    });
+    
+    form.register("name").onblur();
+    expect(form.errors.name).toBe("Short");
+    
+    // Should NOT re-validate on input
+    form.register("name").oninput({ target: { value: "abc" } });
+    expect(form.errors.name).toBe("Short");
+    
+    // Should re-validate on blur
+    form.register("name").onblur();
+    expect(form.errors.name).toBeUndefined();
+  });
+});