@alepha/react 0.14.1 → 0.14.3

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

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

@@ -0,0 +1,121 @@
+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({
+    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,
+    twitter: {
+      card: "summary_large_image",
+    },
+  });
+
+  home = $page({
+    component: () => "Home",
+  });
+}
+
+const alepha = Alepha.create().with(AlephaReactHead);
+const a = alepha.inject(App);
+
+describe("SEO Head", () => {
+  it("should render page with SEO meta tags", async ({ expect }) => {
+    const result = await a.home.render({ html: true, hydration: false });
+
+    // Should include description
+    expect(result.html).toContain(
+      '<meta name="description" content="TypeScript framework made easy">',
+    );
+
+    // Should include OpenGraph tags with property attribute
+    expect(result.html).toContain(
+      '<meta property="og:title" content="Alepha Framework">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:description" content="TypeScript framework made easy">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:image" content="https://alepha.dev/og-image.png">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:url" content="https://alepha.dev/">',
+    );
+    expect(result.html).toContain('<meta property="og:type" content="website">');
+    expect(result.html).toContain(
+      '<meta property="og:site_name" content="Alepha">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:locale" content="en_US">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:image:width" content="1200">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:image:height" content="630">',
+    );
+
+    // Should include Twitter Card tags with name attribute
+    expect(result.html).toContain(
+      '<meta name="twitter:card" content="summary_large_image">',
+    );
+    expect(result.html).toContain(
+      '<meta name="twitter:title" content="Alepha Framework">',
+    );
+    expect(result.html).toContain(
+      '<meta name="twitter:description" content="TypeScript framework made easy">',
+    );
+    expect(result.html).toContain(
+      '<meta name="twitter:image" content="https://alepha.dev/og-image.png">',
+    );
+
+    // Should include canonical link
+    expect(result.html).toContain(
+      '<link rel="canonical" href="https://alepha.dev/">',
+    );
+  });
+});
+
+class AppWithPageSeo {
+  head = $head({
+    title: "My Site",
+    titleSeparator: " | ",
+  });
+
+  blog = $page({
+    path: "/blog",
+    head: {
+      title: "Blog",
+      description: "Read our latest articles",
+      image: "https://example.com/blog-og.png",
+      type: "article",
+    },
+    component: () => "Blog",
+  });
+}
+
+const alepha2 = Alepha.create().with(AlephaReactHead);
+const app2 = alepha2.inject(AppWithPageSeo);
+
+describe("SEO Head on Page", () => {
+  it("should render page-level SEO", async ({ expect }) => {
+    const result = await app2.blog.render({ html: true, hydration: false });
+
+    expect(result.html).toContain("<title>Blog | My Site</title>");
+    expect(result.html).toContain(
+      '<meta name="description" content="Read our latest articles">',
+    );
+    expect(result.html).toContain('<meta property="og:type" content="article">');
+    expect(result.html).toContain(
+      '<meta property="og:image" content="https://example.com/blog-og.png">',
+    );
+  });
+});

package/src/head/hooks/useHead.spec.tsx

@@ -0,0 +1,288 @@
+import { AlephaContext } from "@alepha/react";
+import type { Head } from "../index.ts";
+import { useHead } from "../index.ts";
+import { render } from "@testing-library/react";
+import { Alepha } from "alepha";
+import { act, type ReactNode } from "react";
+import { beforeEach, describe, it, vi } from "vitest";
+
+/**
+ * @vitest-environment jsdom
+ */
+
+describe("useHead", () => {
+  const renderWithAlepha = (alepha: Alepha, element: ReactNode) => {
+    return render(
+      <AlephaContext.Provider value={alepha}>{element}</AlephaContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    // Reset document state before each test
+    document.title = "";
+    document.head.innerHTML = "";
+    document.body.removeAttribute("class");
+    document.body.removeAttribute("style");
+    document.documentElement.removeAttribute("lang");
+    document.documentElement.removeAttribute("class");
+  });
+
+  it("should set initial head options on mount", ({ expect }) => {
+    const alepha = Alepha.create();
+    const TestComponent = () => {
+      useHead({
+        title: "Test Title",
+      });
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    expect(document.title).toBe("Test Title");
+  });
+
+  it("should return current head state and setter function", ({ expect }) => {
+    const alepha = Alepha.create();
+    let headState: Head;
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [head, setHead] = useHead();
+      headState = head;
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    expect(headState!).toBeDefined();
+    expect(setHeadFn!).toBeDefined();
+    expect(typeof setHeadFn!).toBe("function");
+  });
+
+  it("should update document title when setHead is called", ({ expect }) => {
+    const alepha = Alepha.create();
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [, setHead] = useHead();
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    act(() => {
+      setHeadFn({ title: "Updated Title" });
+    });
+
+    expect(document.title).toBe("Updated Title");
+  });
+
+  it("should update meta tags when setHead is called", ({ expect }) => {
+    const alepha = Alepha.create();
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [, setHead] = useHead();
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    act(() => {
+      setHeadFn({
+        meta: [
+          { name: "description", content: "Test Description" },
+          { name: "keywords", content: "test, keywords" },
+        ],
+      });
+    });
+
+    const descriptionMeta = document.querySelector('meta[name="description"]');
+    const keywordsMeta = document.querySelector('meta[name="keywords"]');
+
+    expect(descriptionMeta?.getAttribute("content")).toBe("Test Description");
+    expect(keywordsMeta?.getAttribute("content")).toBe("test, keywords");
+  });
+
+  it("should update body attributes when setHead is called", ({ expect }) => {
+    const alepha = Alepha.create();
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [, setHead] = useHead();
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    act(() => {
+      setHeadFn({
+        bodyAttributes: {
+          class: "dark-theme",
+          style: "background: black;",
+        },
+      });
+    });
+
+    expect(document.body.getAttribute("class")).toBe("dark-theme");
+    expect(document.body.getAttribute("style")).toBe("background: black;");
+  });
+
+  it("should update html attributes when setHead is called", ({ expect }) => {
+    const alepha = Alepha.create();
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [, setHead] = useHead();
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    act(() => {
+      setHeadFn({
+        htmlAttributes: {
+          lang: "en",
+          class: "no-js",
+        },
+      });
+    });
+
+    expect(document.documentElement.getAttribute("lang")).toBe("en");
+    expect(document.documentElement.getAttribute("class")).toBe("no-js");
+  });
+
+  it("should support functional updates", ({ expect }) => {
+    const alepha = Alepha.create();
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [, setHead] = useHead({ title: "Initial Title" });
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    expect(document.title).toBe("Initial Title");
+
+    act(() => {
+      setHeadFn((prev) => ({
+        ...prev,
+        title: `${prev?.title} - Updated`,
+      }));
+    });
+
+    expect(document.title).toBe("Initial Title - Updated");
+  });
+
+  it("should handle multiple head updates", ({ expect }) => {
+    const alepha = Alepha.create();
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [, setHead] = useHead();
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    act(() => {
+      setHeadFn({
+        title: "First Title",
+        meta: [{ name: "description", content: "First Description" }],
+      });
+    });
+
+    expect(document.title).toBe("First Title");
+    expect(
+      document
+        .querySelector('meta[name="description"]')
+        ?.getAttribute("content"),
+    ).toBe("First Description");
+
+    act(() => {
+      setHeadFn({
+        title: "Second Title",
+        meta: [{ name: "description", content: "Second Description" }],
+      });
+    });
+
+    expect(document.title).toBe("Second Title");
+    expect(
+      document
+        .querySelector('meta[name="description"]')
+        ?.getAttribute("content"),
+    ).toBe("Second Description");
+  });
+
+  it("should not crash on server-side (non-browser environment)", ({
+    expect,
+  }) => {
+    const alepha = Alepha.create();
+    // Mock isBrowser to return false
+    vi.spyOn(alepha, "isBrowser").mockReturnValue(false);
+
+    let headState: Head;
+    let setHeadFn: (head?: Head | ((previous?: Head) => Head)) => void;
+
+    const TestComponent = () => {
+      const [head, setHead] = useHead({ title: "Server Title" });
+      headState = head;
+      setHeadFn = setHead;
+      return <div>Test</div>;
+    };
+
+    expect(() => {
+      renderWithAlepha(alepha, <TestComponent />);
+    }).not.toThrow();
+
+    expect(headState!).toEqual({});
+
+    // setHead should not crash on server
+    expect(() => {
+      setHeadFn({ title: "New Title" });
+    }).not.toThrow();
+
+    // Document title should remain unchanged on server
+    expect(document.title).toBe("");
+  });
+
+  it("should get current head state from document", ({ expect }) => {
+    const alepha = Alepha.create();
+
+    // Pre-populate document with some head data
+    document.title = "Existing Title";
+    document.body.setAttribute("class", "existing-class");
+    document.documentElement.setAttribute("lang", "fr");
+
+    const meta = document.createElement("meta");
+    meta.setAttribute("name", "author");
+    meta.setAttribute("content", "John Doe");
+    document.head.appendChild(meta);
+
+    let headState: Head;
+
+    const TestComponent = () => {
+      const [head] = useHead();
+      headState = head;
+      return <div>Test</div>;
+    };
+
+    renderWithAlepha(alepha, <TestComponent />);
+
+    expect(headState!.title).toBe("Existing Title");
+    expect(headState!.bodyAttributes?.class).toBe("existing-class");
+    expect(headState!.htmlAttributes?.lang).toBe("fr");
+    expect(headState!.meta).toContainEqual({
+      name: "author",
+      content: "John Doe",
+    });
+  });
+});