@alepha/react 0.14.2 → 0.14.3

package/src/form/hooks/useForm.browser.spec.tsx

@@ -0,0 +1,366 @@
+import { AlephaContext } from "@alepha/react";
+import { fireEvent, render } from "@testing-library/react";
+import { Alepha, t } from "alepha";
+import { AlephaLogger } from "alepha/logger";
+import type { ReactNode } from "react";
+import { describe, it } from "vitest";
+import { useForm } from "../index.ts";
+
+describe("useForm", () => {
+  const renderWithAlepha = (alepha: Alepha, element: ReactNode) => {
+    return render(
+      <AlephaContext.Provider value={alepha}>{element}</AlephaContext.Provider>,
+    );
+  };
+
+  it("should run handler on submit", async ({ expect }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+    const Form = () => {
+      const form = useForm({
+        id: "test",
+        schema: t.object({
+          str: t.text(),
+          int: t.integer(),
+          nested: t.object({
+            str: t.text(),
+            another: t.object({
+              level: t.text(),
+            }),
+          }),
+        }),
+        handler: (values, args) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="test-form">
+          <input {...form.input.str.props} />
+          <input {...form.input.int.props} />
+          <input {...form.input.nested.items.str.props} />
+          <input {...form.input.nested.items.another.items.level.props} />
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.change(ui.getByTestId("test-str"), {
+      target: { value: "testuser" },
+    });
+
+    fireEvent.change(ui.getByTestId("test-int"), {
+      target: { value: "123" },
+    });
+
+    fireEvent.change(ui.getByTestId("test-nested.str"), {
+      target: { value: "nestedvalue" },
+    });
+
+    fireEvent.change(ui.getByTestId("test-nested.another.level"), {
+      target: { value: "anothervalue" },
+    });
+
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      str: "testuser",
+      int: 123,
+      nested: {
+        str: "nestedvalue",
+        another: {
+          level: "anothervalue",
+        },
+      },
+    });
+  });
+
+  it("should provide correct InputField types for nested objects", async ({
+    expect,
+  }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+
+    const Form = () => {
+      const form = useForm({
+        id: "types-test",
+        schema: t.object({
+          name: t.text(),
+          address: t.object({
+            street: t.text(),
+            city: t.text(),
+            country: t.object({
+              code: t.text(),
+              name: t.text(),
+            }),
+          }),
+        }),
+        handler: () => {},
+      });
+
+      // Verify nested object InputFields have items property
+      const addressInput = form.input.address;
+      const streetInput = addressInput.items.street;
+      const countryInput = addressInput.items.country;
+      const countryCodeInput = countryInput.items.code;
+
+      return (
+        <div data-testid="type-check">
+          <span data-testid="has-items">
+            {addressInput.items ? "true" : "false"}
+          </span>
+          <span data-testid="street-path">{streetInput.path}</span>
+          <span data-testid="country-code-path">{countryCodeInput.path}</span>
+        </div>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    expect(ui.getByTestId("has-items").textContent).toBe("true");
+    expect(ui.getByTestId("street-path").textContent).toBe("/address/street");
+    expect(ui.getByTestId("country-code-path").textContent).toBe(
+      "/address/country/code",
+    );
+  });
+
+  it("should provide ArrayInputField with items array for arrays", async ({
+    expect,
+  }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+
+    const Form = () => {
+      const form = useForm({
+        id: "array-test",
+        schema: t.object({
+          tags: t.array(t.text()),
+          contacts: t.array(
+            t.object({
+              name: t.text(),
+              email: t.text(),
+            }),
+          ),
+        }),
+        handler: () => {},
+      });
+
+      // Verify array InputFields have items property (initially empty)
+      const tagsInput = form.input.tags;
+      const contactsInput = form.input.contacts;
+
+      return (
+        <div data-testid="array-check">
+          <span data-testid="tags-has-items">
+            {Array.isArray(tagsInput.items) ? "true" : "false"}
+          </span>
+          <span data-testid="tags-items-length">{tagsInput.items.length}</span>
+          <span data-testid="contacts-has-items">
+            {Array.isArray(contactsInput.items) ? "true" : "false"}
+          </span>
+          <span data-testid="contacts-items-length">
+            {contactsInput.items.length}
+          </span>
+          <span data-testid="tags-path">{tagsInput.path}</span>
+          <span data-testid="contacts-path">{contactsInput.path}</span>
+        </div>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    // Arrays have items property as array (initially empty)
+    expect(ui.getByTestId("tags-has-items").textContent).toBe("true");
+    expect(ui.getByTestId("tags-items-length").textContent).toBe("0");
+    expect(ui.getByTestId("contacts-has-items").textContent).toBe("true");
+    expect(ui.getByTestId("contacts-items-length").textContent).toBe("0");
+    expect(ui.getByTestId("tags-path").textContent).toBe("/tags");
+    expect(ui.getByTestId("contacts-path").textContent).toBe("/contacts");
+  });
+
+  it("should update array values via set method", async ({ expect }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+
+    const Form = () => {
+      const form = useForm({
+        id: "array-set-test",
+        schema: t.object({
+          tags: t.array(t.text()),
+        }),
+        handler: (values) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="array-form">
+          <button
+            type="button"
+            data-testid="set-tags"
+            onClick={() => form.input.tags.set(["tag1", "tag2", "tag3"])}
+          >
+            Set Tags
+          </button>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.click(ui.getByTestId("set-tags"));
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      tags: ["tag1", "tag2", "tag3"],
+    });
+  });
+
+  it("should update array of objects via set method", async ({ expect }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+
+    const Form = () => {
+      const form = useForm({
+        id: "array-objects-test",
+        schema: t.object({
+          contacts: t.array(
+            t.object({
+              name: t.text(),
+              email: t.text(),
+            }),
+          ),
+        }),
+        handler: (values) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="array-objects-form">
+          <button
+            type="button"
+            data-testid="set-contacts"
+            onClick={() =>
+              form.input.contacts.set([
+                { name: "Alice", email: "alice@example.com" },
+                { name: "Bob", email: "bob@example.com" },
+              ])
+            }
+          >
+            Set Contacts
+          </button>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.click(ui.getByTestId("set-contacts"));
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      contacts: [
+        { name: "Alice", email: "alice@example.com" },
+        { name: "Bob", email: "bob@example.com" },
+      ],
+    });
+  });
+
+  it("should handle complex nested structures with objects and arrays", async ({
+    expect,
+  }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+
+    const Form = () => {
+      const form = useForm({
+        id: "complex-test",
+        schema: t.object({
+          company: t.object({
+            name: t.text(),
+            address: t.object({
+              street: t.text(),
+              city: t.text(),
+            }),
+          }),
+          employees: t.array(
+            t.object({
+              name: t.text(),
+              role: t.text(),
+            }),
+          ),
+        }),
+        handler: (values) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="complex-form">
+          <input {...form.input.company.items.name.props} />
+          <input {...form.input.company.items.address.items.street.props} />
+          <input {...form.input.company.items.address.items.city.props} />
+          <button
+            type="button"
+            data-testid="set-employees"
+            onClick={() =>
+              form.input.employees.set([
+                { name: "Alice", role: "Engineer" },
+                { name: "Bob", role: "Designer" },
+              ])
+            }
+          >
+            Set Employees
+          </button>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.change(ui.getByTestId("complex-test-company.name"), {
+      target: { value: "Acme Corp" },
+    });
+    fireEvent.change(ui.getByTestId("complex-test-company.address.street"), {
+      target: { value: "123 Main St" },
+    });
+    fireEvent.change(ui.getByTestId("complex-test-company.address.city"), {
+      target: { value: "New York" },
+    });
+    fireEvent.click(ui.getByTestId("set-employees"));
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      company: {
+        name: "Acme Corp",
+        address: {
+          street: "123 Main St",
+          city: "New York",
+        },
+      },
+      employees: [
+        { name: "Alice", role: "Engineer" },
+        { name: "Bob", role: "Designer" },
+      ],
+    });
+  });
+});

package/src/head/__tests__/expandSeo.spec.ts

@@ -0,0 +1,203 @@
+import { Alepha } from "alepha";
+import { describe, it } from "vitest";
+import { SeoExpander } from "../helpers/SeoExpander.ts";
+
+describe("SeoExpander", () => {
+  it("should expand basic SEO configuration", ({ expect }) => {
+    const alepha = Alepha.create();
+    const seoExpander = alepha.inject(SeoExpander);
+
+    const result = seoExpander.expand({
+      title: "My App",
+      description: "Build amazing apps",
+      url: "https://example.com/",
+    });
+
+    expect(result.meta).toContainEqual({
+      name: "description",
+      content: "Build amazing apps",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:title",
+      content: "My App",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:description",
+      content: "Build amazing apps",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:url",
+      content: "https://example.com/",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:type",
+      content: "website",
+    });
+    expect(result.meta).toContainEqual({
+      name: "twitter:title",
+      content: "My App",
+    });
+    expect(result.meta).toContainEqual({
+      name: "twitter:description",
+      content: "Build amazing apps",
+    });
+    expect(result.link).toContainEqual({
+      rel: "canonical",
+      href: "https://example.com/",
+    });
+  });
+
+  it("should expand full SEO configuration with image", ({ expect }) => {
+    const alepha = Alepha.create();
+    const seoExpander = alepha.inject(SeoExpander);
+
+    const result = seoExpander.expand({
+      title: "Alepha Framework",
+      description: "TypeScript framework made easy",
+      image: "https://alepha.dev/og-image.png",
+      url: "https://alepha.dev/",
+      siteName: "Alepha",
+      locale: "en_US",
+      type: "website",
+      imageWidth: 1200,
+      imageHeight: 630,
+      imageAlt: "Alepha Framework Logo",
+    });
+
+    // OpenGraph tags
+    expect(result.meta).toContainEqual({
+      property: "og:image",
+      content: "https://alepha.dev/og-image.png",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:image:width",
+      content: "1200",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:image:height",
+      content: "630",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:image:alt",
+      content: "Alepha Framework Logo",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:site_name",
+      content: "Alepha",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:locale",
+      content: "en_US",
+    });
+
+    // Twitter tags
+    expect(result.meta).toContainEqual({
+      name: "twitter:image",
+      content: "https://alepha.dev/og-image.png",
+    });
+    expect(result.meta).toContainEqual({
+      name: "twitter:image:alt",
+      content: "Alepha Framework Logo",
+    });
+    // With image, default to summary_large_image
+    expect(result.meta).toContainEqual({
+      name: "twitter:card",
+      content: "summary_large_image",
+    });
+  });
+
+  it("should support Twitter-specific overrides", ({ expect }) => {
+    const alepha = Alepha.create();
+    const seoExpander = alepha.inject(SeoExpander);
+
+    const result = seoExpander.expand({
+      title: "Base Title",
+      description: "Base description",
+      twitter: {
+        card: "summary",
+        site: "@alepha_dev",
+        creator: "@johndoe",
+        title: "Twitter-specific Title",
+      },
+    });
+
+    expect(result.meta).toContainEqual({
+      name: "twitter:card",
+      content: "summary",
+    });
+    expect(result.meta).toContainEqual({
+      name: "twitter:site",
+      content: "@alepha_dev",
+    });
+    expect(result.meta).toContainEqual({
+      name: "twitter:creator",
+      content: "@johndoe",
+    });
+    expect(result.meta).toContainEqual({
+      name: "twitter:title",
+      content: "Twitter-specific Title",
+    });
+    // OG should still use base title
+    expect(result.meta).toContainEqual({
+      property: "og:title",
+      content: "Base Title",
+    });
+  });
+
+  it("should support OpenGraph-specific overrides", ({ expect }) => {
+    const alepha = Alepha.create();
+    const seoExpander = alepha.inject(SeoExpander);
+
+    const result = seoExpander.expand({
+      title: "Base Title",
+      description: "Base description",
+      og: {
+        title: "OG-specific Title",
+        description: "OG-specific description",
+      },
+    });
+
+    expect(result.meta).toContainEqual({
+      property: "og:title",
+      content: "OG-specific Title",
+    });
+    expect(result.meta).toContainEqual({
+      property: "og:description",
+      content: "OG-specific description",
+    });
+    // Twitter should use base
+    expect(result.meta).toContainEqual({
+      name: "twitter:title",
+      content: "Base Title",
+    });
+    expect(result.meta).toContainEqual({
+      name: "twitter:description",
+      content: "Base description",
+    });
+  });
+
+  it("should handle article type", ({ expect }) => {
+    const alepha = Alepha.create();
+    const seoExpander = alepha.inject(SeoExpander);
+
+    const result = seoExpander.expand({
+      title: "Blog Post",
+      type: "article",
+    });
+
+    expect(result.meta).toContainEqual({
+      property: "og:type",
+      content: "article",
+    });
+  });
+
+  it("should return empty arrays for empty config", ({ expect }) => {
+    const alepha = Alepha.create();
+    const seoExpander = alepha.inject(SeoExpander);
+
+    const result = seoExpander.expand({});
+
+    expect(result.meta).toEqual([]);
+    expect(result.link).toEqual([]);
+  });
+});

package/src/head/__tests__/page-head.spec.ts

@@ -0,0 +1,39 @@
+import { $page } from "@alepha/react/router";
+import { Alepha } from "alepha";
+import { describe, it } from "vitest";
+import { $head, AlephaReactHead } from "../index.ts";
+
+class App {
+  head = $head({
+    htmlAttributes: { lang: "fr", "x-data-custom": "ok" },
+  });
+
+  hello = $page({
+    head: {
+      title: "Hello World",
+      bodyAttributes: { class: "hello-world" },
+      meta: [
+        { name: "description", content: "This is a test page." },
+        { name: "keywords", content: "test, alepha, react" },
+      ],
+    },
+    component: () => "",
+  });
+}
+
+const alepha = Alepha.create().with(AlephaReactHead);
+const a = alepha.inject(App);
+
+describe("PageHead", () => {
+  it("should render page with custom head and body attributes", async ({
+    expect,
+  }) => {
+    const result = await a.hello.render({ html: true, hydration: false });
+    expect(result.html).toBe(
+      '<!DOCTYPE html><html lang="fr" x-data-custom="ok"><head><title>Hello World</title>\n' +
+        '<meta name="description" content="This is a test page.">\n' +
+        '<meta name="keywords" content="test, alepha, react">\n' +
+        '</head><body class="hello-world"></body></html>',
+    );
+  });
+});