@luna_ui/luna 0.4.0 → 0.5.3

package/tests/apg.test.ts

@@ -0,0 +1,466 @@
+import { describe, test, expect, beforeEach } from "vitest";
+import {
+  createElement,
+  render,
+  text,
+} from "../src/index";
+import axe from "axe-core";
+
+function attr(name: string, value: unknown) {
+  return { _0: name, _1: value };
+}
+
+const AttrValue = {
+  Static: (value: string) => ({ $tag: 0, _0: value }),
+};
+
+async function checkA11y(container: HTMLElement): Promise<axe.Result[]> {
+  const results = await axe.run(container);
+  return results.violations;
+}
+
+describe("APG Components - Accessibility Tests", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    return () => {
+      container.remove();
+    };
+  });
+
+  describe("Link Pattern", () => {
+    test("native link has no a11y violations", async () => {
+      const node = createElement(
+        "a",
+        [
+          attr("href", AttrValue.Static("https://example.com")),
+        ],
+        [text("Visit Example")]
+      );
+      render(container, node);
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("link with aria-label for icon is accessible", async () => {
+      const node = createElement(
+        "a",
+        [
+          attr("href", AttrValue.Static("/home")),
+          attr("aria-label", AttrValue.Static("Go to home page")),
+        ],
+        [text("🏠")]
+      );
+      render(container, node);
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("link with target=_blank should have accessible text", async () => {
+      const node = createElement(
+        "a",
+        [
+          attr("href", AttrValue.Static("https://example.com")),
+          attr("target", AttrValue.Static("_blank")),
+        ],
+        [text("External Link (opens in new tab)")]
+      );
+      render(container, node);
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("link-button with role=link has proper attributes", async () => {
+      const node = createElement(
+        "span",
+        [
+          attr("role", AttrValue.Static("link")),
+          attr("tabindex", AttrValue.Static("0")),
+        ],
+        [text("Click here")]
+      );
+      render(container, node);
+
+      const span = container.querySelector("span");
+      expect(span?.getAttribute("role")).toBe("link");
+      expect(span?.getAttribute("tabindex")).toBe("0");
+    });
+  });
+
+  describe("Button Pattern", () => {
+    test("native button has no a11y violations", async () => {
+      const node = createElement(
+        "button",
+        [attr("type", AttrValue.Static("button"))],
+        [text("Click me")]
+      );
+      render(container, node);
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("icon button with aria-label is accessible", async () => {
+      const node = createElement(
+        "button",
+        [
+          attr("type", AttrValue.Static("button")),
+          attr("aria-label", AttrValue.Static("Close dialog")),
+        ],
+        [text("×")]
+      );
+      render(container, node);
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("disabled button has aria-disabled", async () => {
+      const node = createElement(
+        "button",
+        [
+          attr("type", AttrValue.Static("button")),
+          attr("disabled", AttrValue.Static("true")),
+          attr("aria-disabled", AttrValue.Static("true")),
+        ],
+        [text("Disabled")]
+      );
+      render(container, node);
+
+      const button = container.querySelector("button");
+      expect(button?.getAttribute("aria-disabled")).toBe("true");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("toggle button has aria-pressed", async () => {
+      const node = createElement(
+        "button",
+        [
+          attr("type", AttrValue.Static("button")),
+          attr("aria-pressed", AttrValue.Static("false")),
+        ],
+        [text("Mute")]
+      );
+      render(container, node);
+
+      const button = container.querySelector("button");
+      expect(button?.getAttribute("aria-pressed")).toBe("false");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("toggle button pressed state", async () => {
+      const node = createElement(
+        "button",
+        [
+          attr("type", AttrValue.Static("button")),
+          attr("aria-pressed", AttrValue.Static("true")),
+        ],
+        [text("Mute")]
+      );
+      render(container, node);
+
+      const button = container.querySelector("button");
+      expect(button?.getAttribute("aria-pressed")).toBe("true");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("menu button has aria-haspopup and aria-expanded", async () => {
+      const node = createElement(
+        "button",
+        [
+          attr("type", AttrValue.Static("button")),
+          attr("aria-haspopup", AttrValue.Static("menu")),
+          attr("aria-expanded", AttrValue.Static("false")),
+        ],
+        [text("Options")]
+      );
+      render(container, node);
+
+      const button = container.querySelector("button");
+      expect(button?.getAttribute("aria-haspopup")).toBe("menu");
+      expect(button?.getAttribute("aria-expanded")).toBe("false");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("menu button expanded state", async () => {
+      const node = createElement(
+        "button",
+        [
+          attr("type", AttrValue.Static("button")),
+          attr("aria-haspopup", AttrValue.Static("menu")),
+          attr("aria-expanded", AttrValue.Static("true")),
+          attr("aria-controls", AttrValue.Static("menu-id")),
+        ],
+        [text("Options")]
+      );
+      render(container, node);
+
+      const button = container.querySelector("button");
+      expect(button?.getAttribute("aria-haspopup")).toBe("menu");
+      expect(button?.getAttribute("aria-expanded")).toBe("true");
+      expect(button?.getAttribute("aria-controls")).toBe("menu-id");
+    });
+  });
+
+  describe("Meter Pattern", () => {
+    test("meter with role and aria attributes is accessible", async () => {
+      const node = createElement(
+        "div",
+        [
+          attr("role", AttrValue.Static("meter")),
+          attr("aria-valuenow", AttrValue.Static("75")),
+          attr("aria-valuemin", AttrValue.Static("0")),
+          attr("aria-valuemax", AttrValue.Static("100")),
+          attr("aria-label", AttrValue.Static("Battery level")),
+        ],
+        [text("75%")]
+      );
+      render(container, node);
+
+      const meter = container.querySelector("[role='meter']");
+      expect(meter?.getAttribute("aria-valuenow")).toBe("75");
+      expect(meter?.getAttribute("aria-valuemin")).toBe("0");
+      expect(meter?.getAttribute("aria-valuemax")).toBe("100");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("meter with aria-valuetext for human-readable value", async () => {
+      const node = createElement(
+        "div",
+        [
+          attr("role", AttrValue.Static("meter")),
+          attr("aria-valuenow", AttrValue.Static("50")),
+          attr("aria-valuemin", AttrValue.Static("0")),
+          attr("aria-valuemax", AttrValue.Static("100")),
+          attr("aria-valuetext", AttrValue.Static("50% (6 hours) remaining")),
+          attr("aria-label", AttrValue.Static("Battery")),
+        ],
+        [text("50%")]
+      );
+      render(container, node);
+
+      const meter = container.querySelector("[role='meter']");
+      expect(meter?.getAttribute("aria-valuetext")).toBe("50% (6 hours) remaining");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("native meter element is accessible", async () => {
+      const node = createElement(
+        "meter",
+        [
+          attr("value", AttrValue.Static("75")),
+          attr("min", AttrValue.Static("0")),
+          attr("max", AttrValue.Static("100")),
+          attr("aria-label", AttrValue.Static("Disk usage")),
+        ],
+        [text("75%")]
+      );
+      render(container, node);
+
+      const meter = container.querySelector("meter");
+      expect(meter?.getAttribute("value")).toBe("75");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe("Landmarks Pattern", () => {
+    test("header element creates banner landmark", async () => {
+      const node = createElement("header", [], [text("Site Header")]);
+      render(container, node);
+
+      const header = container.querySelector("header");
+      expect(header).not.toBeNull();
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("nav element creates navigation landmark", async () => {
+      const node = createElement(
+        "nav",
+        [attr("aria-label", AttrValue.Static("Main navigation"))],
+        [
+          createElement("a", [attr("href", AttrValue.Static("/"))], [text("Home")]),
+        ]
+      );
+      render(container, node);
+
+      const nav = container.querySelector("nav");
+      expect(nav?.getAttribute("aria-label")).toBe("Main navigation");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("main element creates main landmark", async () => {
+      const node = createElement("main", [], [text("Main Content")]);
+      render(container, node);
+
+      const main = container.querySelector("main");
+      expect(main).not.toBeNull();
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("aside element creates complementary landmark", async () => {
+      const node = createElement(
+        "aside",
+        [attr("aria-label", AttrValue.Static("Related content"))],
+        [text("Sidebar")]
+      );
+      render(container, node);
+
+      const aside = container.querySelector("aside");
+      expect(aside?.getAttribute("aria-label")).toBe("Related content");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("footer element creates contentinfo landmark", async () => {
+      const node = createElement("footer", [], [text("© 2024")]);
+      render(container, node);
+
+      const footer = container.querySelector("footer");
+      expect(footer).not.toBeNull();
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("search element creates search landmark", async () => {
+      const node = createElement(
+        "search",
+        [attr("aria-label", AttrValue.Static("Site search"))],
+        [
+          createElement(
+            "input",
+            [
+              attr("type", AttrValue.Static("search")),
+              attr("aria-label", AttrValue.Static("Search query")),
+            ],
+            []
+          ),
+        ]
+      );
+      render(container, node);
+
+      const search = container.querySelector("search");
+      expect(search).not.toBeNull();
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("form with role=search creates search landmark", async () => {
+      const node = createElement(
+        "form",
+        [
+          attr("role", AttrValue.Static("search")),
+          attr("aria-label", AttrValue.Static("Site search")),
+        ],
+        [
+          createElement(
+            "input",
+            [
+              attr("type", AttrValue.Static("search")),
+              attr("aria-label", AttrValue.Static("Search query")),
+            ],
+            []
+          ),
+        ]
+      );
+      render(container, node);
+
+      const form = container.querySelector("form[role='search']");
+      expect(form).not.toBeNull();
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+
+    test("section with aria-label creates region landmark", async () => {
+      const node = createElement(
+        "section",
+        [attr("aria-label", AttrValue.Static("Quick Stats"))],
+        [text("Statistics content")]
+      );
+      render(container, node);
+
+      const section = container.querySelector("section");
+      expect(section?.getAttribute("aria-label")).toBe("Quick Stats");
+
+      const violations = await checkA11y(container);
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe("Keyboard Interaction", () => {
+    test("button responds to Enter key", () => {
+      let clicked = false;
+      const node = createElement(
+        "button",
+        [
+          attr("type", AttrValue.Static("button")),
+          attr("click", { $tag: 2, _0: () => { clicked = true; } }),
+        ],
+        [text("Click")]
+      );
+      render(container, node);
+
+      const button = container.querySelector("button");
+      button?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+      button?.click();
+      expect(clicked).toBe(true);
+    });
+
+    test("button is focusable", () => {
+      const node = createElement(
+        "button",
+        [attr("type", AttrValue.Static("button"))],
+        [text("Focusable")]
+      );
+      render(container, node);
+
+      const button = container.querySelector("button");
+      button?.focus();
+      expect(document.activeElement).toBe(button);
+    });
+
+    test("link-button with role=link is focusable via tabindex", () => {
+      const node = createElement(
+        "span",
+        [
+          attr("role", AttrValue.Static("link")),
+          attr("tabindex", AttrValue.Static("0")),
+        ],
+        [text("Focusable link")]
+      );
+      render(container, node);
+
+      const span = container.querySelector("span");
+      span?.focus();
+      expect(document.activeElement).toBe(span);
+    });
+  });
+});

package/tests/debounced.test.ts

@@ -0,0 +1,165 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
+import { createSignal, debounced, createRenderEffect } from "../src/index";
+
+describe("debounced signal", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test("debounced returns initial value immediately", () => {
+    const [value, setValue] = createSignal(42);
+    const [debouncedValue] = debounced([value, setValue], 100);
+
+    expect(debouncedValue()).toBe(42);
+  });
+
+  test("debounced delays value updates", () => {
+    const [value, setValue] = createSignal("initial");
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
+
+    // Update the value
+    setDebouncedValue("updated");
+
+    // Debounced value should still be initial (before timeout)
+    expect(debouncedValue()).toBe("initial");
+
+    // Advance time by less than delay
+    vi.advanceTimersByTime(50);
+    expect(debouncedValue()).toBe("initial");
+
+    // Advance time to complete the delay
+    vi.advanceTimersByTime(50);
+    expect(debouncedValue()).toBe("updated");
+  });
+
+  test("debounced cancels previous timer on rapid updates", () => {
+    const [value, setValue] = createSignal(0);
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
+
+    // Rapid updates
+    setDebouncedValue(1);
+    vi.advanceTimersByTime(50);
+    setDebouncedValue(2);
+    vi.advanceTimersByTime(50);
+    setDebouncedValue(3);
+
+    // Should still be initial value
+    expect(debouncedValue()).toBe(0);
+
+    // Advance to complete the delay from last update
+    vi.advanceTimersByTime(100);
+    expect(debouncedValue()).toBe(3);
+  });
+
+  test("debounced with 0ms delay updates immediately after microtask", () => {
+    const [value, setValue] = createSignal("start");
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 0);
+
+    setDebouncedValue("end");
+
+    // Even 0ms delay needs timer to fire
+    vi.advanceTimersByTime(0);
+    expect(debouncedValue()).toBe("end");
+  });
+
+  test("debounced triggers reactive effects after delay", () => {
+    const [value, setValue] = createSignal(0);
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
+
+    const log: number[] = [];
+    createRenderEffect(() => {
+      log.push(debouncedValue());
+    });
+
+    // Initial effect run
+    expect(log).toEqual([0]);
+
+    // Update value
+    setDebouncedValue(10);
+    expect(log).toEqual([0]); // Not yet updated
+
+    // After delay, effect should run
+    vi.advanceTimersByTime(100);
+    expect(log).toEqual([0, 10]);
+  });
+
+  test("debounced handles multiple sequential updates correctly", () => {
+    const [value, setValue] = createSignal("a");
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 50);
+
+    // First update
+    setDebouncedValue("b");
+    vi.advanceTimersByTime(50);
+    expect(debouncedValue()).toBe("b");
+
+    // Second update (after first completed)
+    setDebouncedValue("c");
+    vi.advanceTimersByTime(50);
+    expect(debouncedValue()).toBe("c");
+  });
+
+  test("debounced works with object values", () => {
+    const [value, setValue] = createSignal({ count: 0 });
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
+
+    const newObj = { count: 5 };
+    setDebouncedValue(newObj);
+
+    expect(debouncedValue().count).toBe(0);
+
+    vi.advanceTimersByTime(100);
+    expect(debouncedValue().count).toBe(5);
+    expect(debouncedValue()).toBe(newObj); // Same reference
+  });
+
+  test("debounced works with array values", () => {
+    const [value, setValue] = createSignal<number[]>([1, 2, 3]);
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
+
+    setDebouncedValue([4, 5, 6]);
+
+    expect(debouncedValue()).toEqual([1, 2, 3]);
+
+    vi.advanceTimersByTime(100);
+    expect(debouncedValue()).toEqual([4, 5, 6]);
+  });
+
+  test("debounced with long delay", () => {
+    const [value, setValue] = createSignal("original");
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 1000);
+
+    setDebouncedValue("delayed");
+
+    // Check at various points
+    vi.advanceTimersByTime(500);
+    expect(debouncedValue()).toBe("original");
+
+    vi.advanceTimersByTime(499);
+    expect(debouncedValue()).toBe("original");
+
+    vi.advanceTimersByTime(1);
+    expect(debouncedValue()).toBe("delayed");
+  });
+
+  test("debounced handles many rapid updates efficiently", () => {
+    const [value, setValue] = createSignal(0);
+    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
+
+    // Simulate 100 rapid updates
+    for (let i = 1; i <= 100; i++) {
+      setDebouncedValue(i);
+      vi.advanceTimersByTime(10); // 10ms between each
+    }
+
+    // Should still be 0 because timer keeps getting reset
+    expect(debouncedValue()).toBe(0);
+
+    // Wait for final debounce to complete
+    vi.advanceTimersByTime(100);
+    expect(debouncedValue()).toBe(100);
+  });
+});

package/tests/dom.test.ts

@@ -421,12 +421,13 @@ describe("DOM API", () => {
       expect(container.querySelector("span")).toBeNull();
     });
 
-    test("Show accepts children as function", () => {
+    test("Show accepts children as function with accessor (SolidJS-style)", () => {
       const [value, setValue] = createSignal<string | null>(null);
 
       const node = Show({
         when: value,
-        children: (v: string) => createElement("span", [], [text(v)]),
+        // SolidJS-style: children receives accessor function, call it with ()
+        children: (v: () => string) => createElement("span", [], [text(v())]),
       });
 
       mount(container, node);