@ulearning/ai-sdk 0.0.0-stage → 1.0.0-next.0

package/src/utils/Primitive.test.tsx

@@ -0,0 +1,551 @@
+/** @vitest-environment jsdom */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  defineComponent,
+  h,
+  nextTick,
+  shallowRef,
+  type Component,
+  type ComponentPublicInstance,
+  type VNode,
+  type VNodeChild,
+} from "vue";
+import { renderToString } from "@vue/server-renderer";
+import { PopoverContent, PopoverRoot, useForwardExpose } from "reka-ui";
+import { cleanup, render } from "../tests/vue";
+import { Primitive, renderSlot, withRenderProp } from "./Primitive";
+
+const ALL_NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul",
+] as const;
+const VOID_ELEMENTS = new Set(["img", "input"]);
+afterEach(cleanup);
+
+describe("Primitive", () => {
+  describe.each(ALL_NODES)("Primitive.%s", (node) => {
+    const Comp = Primitive[node];
+    it("renders the correct HTML tag", async () => {
+      const html = await renderToString(
+        VOID_ELEMENTS.has(node)
+          ? h(Comp)
+          : h(Comp, null, { default: () => "content" }),
+      );
+      expect(html).toMatch(new RegExp(`^<${node}[\\s/>]`));
+    });
+    it("renders the render element instead of the default tag", async () => {
+      const html = await renderToString(
+        h(
+          Comp,
+          { render: h("i", { "data-test": "yes" }) },
+          VOID_ELEMENTS.has(node) ? undefined : { default: () => "content" },
+        ),
+      );
+      expect(html).toContain("<i");
+      expect(html).toContain('data-test="yes"');
+      expect(html).not.toMatch(new RegExp(`<${node}[\\s>]`));
+    });
+    if (!VOID_ELEMENTS.has(node)) {
+      it("render produces same markup as asChild", async () => {
+        const renderHtml = await renderToString(
+          h(
+            Comp,
+            { render: h("i", { class: "child" }), class: "parent" },
+            { default: () => "text" },
+          ),
+        );
+        const asChildHtml = await renderToString(
+          h(
+            Comp,
+            { asChild: true, class: "parent" },
+            { default: () => h("i", { class: "child" }, "text") },
+          ),
+        );
+        expect(renderHtml).toBe(asChildHtml);
+      });
+    }
+  });
+  describe("render prop edge cases", () => {
+    it("preserves a useful Vue name on wrapped components", () => {
+      const Wrapped = withRenderProp(Primitive.div);
+      expect(Wrapped.name).toBe("Primitive.div");
+    });
+    it("uses render element's own children as fallback", async () => {
+      expect(
+        await renderToString(
+          h(Primitive.span, { render: h("em", "Fallback") }),
+        ),
+      ).toBe("<em>Fallback</em>");
+    });
+    it("outer children override render element's children", async () => {
+      expect(
+        await renderToString(
+          h(
+            Primitive.span,
+            { render: h("em", "Original") },
+            { default: () => "Override" },
+          ),
+        ),
+      ).toBe("<em>Override</em>");
+    });
+    it("passes multiple children into the render element", async () => {
+      const html = await renderToString(
+        h(
+          Primitive.div,
+          { render: h("section") },
+          { default: () => [h("p", "A"), h("p", "B")] },
+        ),
+      );
+      expect(html).toContain("<section");
+      expect(html).toContain("<p>A</p>");
+      expect(html).toContain("<p>B</p>");
+    });
+  });
+});
+describe("renderSlot", () => {
+  it.each(["official", "SDK"] as const)(
+    "retains the public root through an official forwarding wrapper while conditional content is absent and restored (%s)",
+    async (kind) => {
+      const open = shallowRef(false);
+      const revision = shallowRef("Before");
+      const api = shallowRef<ComponentPublicInstance | null>(null);
+      const input = shallowRef<HTMLInputElement | null>(null);
+      const Content =
+        kind === "SDK" ? withRenderProp(PopoverContent) : PopoverContent;
+      const ForwardingContent = defineComponent({
+        setup() {
+          const { forwardRef } = useForwardExpose();
+          return () =>
+            h(
+              Content,
+              {
+                ref: forwardRef,
+                "aria-label": "Conditional content",
+                "data-revision": revision.value,
+              },
+              { default: () => h("input", { ref: input }) },
+            );
+        },
+      });
+      const view = render(
+        h(
+          defineComponent(
+            () => () =>
+              h(
+                PopoverRoot,
+                {
+                  open: open.value,
+                  "onUpdate:open": (value: boolean) => (open.value = value),
+                },
+                { default: () => h(ForwardingContent, { ref: api }) },
+              ),
+          ),
+        ),
+      );
+      const settle = async () => {
+        await nextTick();
+        await Promise.resolve();
+        await nextTick();
+      };
+      await settle();
+      if (!api.value) throw new Error("Actual public forwarding ref missing");
+      const instance = api.value;
+      expect(instance.$el).toBeInstanceOf(Node);
+      expect(input.value).toBeNull();
+      revision.value = "Closed update";
+      await settle();
+      expect(api.value).toBe(instance);
+      expect(instance.$el).toBeInstanceOf(Node);
+      expect(view.container.querySelector('[role="dialog"]')).toBeNull();
+      open.value = true;
+      await settle();
+      const first = input.value;
+      if (!first) throw new Error("Opened conditional input missing");
+      const firstRoot = view.container.querySelector<HTMLElement>(
+        "[data-reka-popper-content-wrapper]",
+      );
+      if (!firstRoot)
+        throw new Error("Official native positioning root missing");
+      expect(api.value).toBe(instance);
+      expect(instance.$el).toBe(firstRoot);
+      expect(instance.$el).toBeInstanceOf(HTMLElement);
+      expect(firstRoot.contains(first)).toBe(true);
+      first.focus();
+      expect(document.activeElement).toBe(first);
+      open.value = false;
+      await settle();
+      expect(input.value).toBeNull();
+      expect(instance.$el).toBeInstanceOf(Node);
+      expect(first.isConnected).toBe(false);
+      expect(firstRoot.isConnected).toBe(false);
+      revision.value = "Second closed update";
+      await settle();
+      open.value = true;
+      await settle();
+      expect(api.value).toBe(instance);
+      expect(input.value).not.toBe(first);
+      const restoredRoot = view.container.querySelector<HTMLElement>(
+        "[data-reka-popper-content-wrapper]",
+      );
+      if (!restoredRoot)
+        throw new Error("Restored native positioning root missing");
+      expect(instance.$el).toBe(restoredRoot);
+      expect(instance.$el).toBeInstanceOf(HTMLElement);
+      expect(restoredRoot).not.toBe(firstRoot);
+      expect(restoredRoot.contains(input.value)).toBe(true);
+      view.unmount();
+      expect(api.value).toBeNull();
+      expect(input.value).toBeNull();
+      expect(restoredRoot.isConnected).toBe(false);
+    },
+  );
+
+  it("keeps live render, asChild and children getters beside forwarded public actions through prop updates", async () => {
+    type PublicRoot = InstanceType<typeof Primitive.div> & {
+      focus?: () => void;
+    };
+    const api = shallowRef<PublicRoot | null>(null);
+    const child = shallowRef<ComponentPublicInstance | null>(null);
+    const asChild = shallowRef(false);
+    const children = shallowRef<VNodeChild>("Before");
+    const useRender = shallowRef(false);
+    const focus = vi.fn();
+    const Target = defineComponent({
+      setup(_, { expose, slots }) {
+        expose({ focus });
+        return () => h("em", slots.default?.());
+      },
+    });
+    let activeRender: VNode | undefined;
+    const fixture = render(
+      h(
+        defineComponent(() => () => {
+          activeRender = useRender.value
+            ? h(Target, { ref: child }, { default: () => "Fallback" })
+            : undefined;
+          return h(Primitive.div, {
+            ref: api,
+            asChild: asChild.value,
+            children: children.value,
+            render: activeRender,
+          });
+        }),
+      ),
+    );
+    if (!api.value) throw new Error("Public Primitive ref missing");
+    const instance = api.value;
+    expect(instance.asChild).toBe(false);
+    expect(instance.render).toBeUndefined();
+    expect(instance.children).toBe("Before");
+    expect(instance.$props.asChild).toBe(false);
+    expect(instance.$props.render).toBeUndefined();
+    expect(instance.$props.children).toBe("Before");
+    expect(Object.keys(instance)).toEqual(
+      expect.arrayContaining(["asChild", "render", "children"]),
+    );
+    expect(instance.$el).toBe(fixture.container.querySelector("div"));
+    const element = h("section", { "data-live-child": "" }, "Nested");
+    children.value = element;
+    asChild.value = true;
+    await nextTick();
+    expect(api.value).toBe(instance);
+    expect(instance.asChild).toBe(true);
+    expect(instance.children).toBe(element);
+    expect(instance.$props.asChild).toBe(true);
+    expect(instance.$props.children).toBe(element);
+    expect(instance.$el).toBe(fixture.container.querySelector("section"));
+    children.value = "After";
+    asChild.value = false;
+    useRender.value = true;
+    await nextTick();
+    expect(api.value).toBe(instance);
+    expect(instance.asChild).toBe(false);
+    expect(instance.render).toBe(activeRender);
+    expect(instance.children).toBe("After");
+    expect(instance.$props.asChild).toBe(false);
+    expect(instance.$props.render).toBe(activeRender);
+    expect(instance.$props.children).toBe("After");
+    expect(instance.$el).toBe(fixture.container.querySelector("em"));
+    expect(fixture.container.textContent).toBe("After");
+    expect(instance.focus).toBe(focus);
+    instance.focus?.();
+    expect(focus).toHaveBeenCalledOnce();
+    fixture.unmount();
+    expect(api.value).toBeNull();
+    expect(child.value).toBeNull();
+    expect(instance.focus).toBeUndefined();
+  });
+
+  it("updates an image src through repeated attribute changes", async () => {
+    const src = shallowRef("one.png");
+    const fixture = render(
+      h(
+        defineComponent({
+          setup: () => () => h(Primitive.img, { src: src.value }),
+        }),
+      ),
+    );
+    expect(fixture.container.querySelector("img")!.getAttribute("src")).toBe(
+      "one.png",
+    );
+    src.value = "two.png";
+    await nextTick();
+    expect(fixture.container.querySelector("img")!.getAttribute("src")).toBe(
+      "two.png",
+    );
+  });
+  it("lets supplied children replace the render element's own", async () => {
+    expect(
+      await renderToString(renderSlot(h("em", "Original"), "Override", {})),
+    ).toBe("<em>Override</em>");
+  });
+  it("falls back to the render element's own children", async () => {
+    expect(
+      await renderToString(renderSlot(h("em", "Fallback"), undefined, {})),
+    ).toBe("<em>Fallback</em>");
+  });
+  it("treats null children as supplied rather than absent", async () => {
+    expect(
+      await renderToString(renderSlot(h("em", "Fallback"), null, {})),
+    ).toBe("<em></em>");
+  });
+  it("merges call-site props into the render element", async () => {
+    const html = await renderToString(
+      renderSlot(h("em", { class: "child", id: "kept" }), "text", {
+        class: "parent",
+        id: "dropped",
+      }),
+    );
+    expect(html).toContain('id="kept"');
+    expect(html).toContain("parent");
+    expect(html).toContain("child");
+  });
+  it("applies the same precedence as withRenderProp", async () => {
+    expect(
+      await renderToString(
+        renderSlot(h("em", "Fallback"), undefined, { class: "parent" }),
+      ),
+    ).toBe(
+      await renderToString(
+        h(Primitive.span, { class: "parent", render: h("em", "Fallback") }),
+      ),
+    );
+  });
+  it("composes target refs and events and clears them on unmount", () => {
+    const target = shallowRef<HTMLElement | null>(null);
+    const outer = shallowRef<ComponentPublicInstance | null>(null);
+    const calls: string[] = [];
+    const observed: boolean[] = [];
+    const fixture = render(
+      h(
+        defineComponent({
+          setup: () => () =>
+            h(Primitive.button, {
+              ref: outer,
+              onClick: (event: MouseEvent) => {
+                calls.push("outer");
+                observed.push(event.defaultPrevented);
+              },
+              render: h(
+                "button",
+                {
+                  ref: target,
+                  onClick: (event: MouseEvent) => {
+                    calls.push("child");
+                    event.preventDefault();
+                  },
+                },
+                "press",
+              ),
+            }),
+        }),
+      ),
+    );
+    const button = fixture.container.querySelector("button")!;
+    expect(target.value).toBe(button);
+    expect(outer.value?.$el).toBe(button);
+    const event = new MouseEvent("click", { bubbles: true, cancelable: true });
+    expect(button.dispatchEvent(event)).toBe(false);
+    expect(calls).toEqual(["child", "outer"]);
+    expect(observed).toEqual([true]);
+    fixture.unmount();
+    expect(target.value).toBe(null);
+    expect(outer.value).toBe(null);
+  });
+  it.each(["asChild", "render"] as const)(
+    "forwards current public %s component actions and clears stale actions and refs",
+    async (mode) => {
+      type PublicActions = ComponentPublicInstance & {
+        focus?: () => void;
+        clear?: () => void;
+      };
+      const api = shallowRef<PublicActions | null>(null);
+      const child = shallowRef<PublicActions | null>(null);
+      const focus = vi.fn();
+      const clear = vi.fn();
+      const First = defineComponent({
+        setup(_, { expose }) {
+          expose({ focus });
+          return () => h("em", "First");
+        },
+      });
+      const Second = defineComponent({
+        setup(_, { expose }) {
+          expose({ clear });
+          return () => h("strong", "Second");
+        },
+      });
+      const selected = shallowRef<Component>(First);
+      const fixture = render(
+        h(
+          defineComponent(() => () => {
+            const element = h(selected.value, { ref: child });
+            return mode === "render"
+              ? h(Primitive.div, { ref: api, render: element })
+              : h(
+                  Primitive.div,
+                  { ref: api, asChild: true },
+                  { default: () => element },
+                );
+          }),
+        ),
+      );
+      expect(api.value?.$el).toBe(fixture.container.querySelector("em"));
+      expect(api.value?.focus).toBe(focus);
+      if (!api.value)
+        throw new Error("Public Primitive ref missing after mount");
+      expect(Object.hasOwn(api.value, "$el")).toBe(false);
+      api.value?.focus?.();
+      expect(focus).toHaveBeenCalledOnce();
+      selected.value = Second;
+      await nextTick();
+      expect(api.value?.$el).toBe(fixture.container.querySelector("strong"));
+      expect(api.value?.focus).toBeUndefined();
+      if (!api.value)
+        throw new Error("Public Primitive ref missing after replacement");
+      expect("focus" in api.value).toBe(false);
+      expect(api.value.clear).toBe(clear);
+      api.value.clear?.();
+      expect(clear).toHaveBeenCalledOnce();
+      expect(focus).toHaveBeenCalledOnce();
+      fixture.unmount();
+      expect(api.value).toBeNull();
+      expect(child.value).toBeNull();
+    },
+  );
+  it.each(["asChild", "render"] as const)(
+    "forwards %s custom actions through an official wrapper when the target owns its public element",
+    (mode) => {
+      type PublicActions = ComponentPublicInstance & {
+        focus?: () => void;
+        run?: () => void;
+      };
+      const api = shallowRef<PublicActions | null>(null);
+      const child = shallowRef<PublicActions | null>(null);
+      const sdk = shallowRef<Element | ComponentPublicInstance | null>(null);
+      const native = shallowRef<HTMLButtonElement | null>(null);
+      const runs = shallowRef(0);
+      const Target = defineComponent({
+        setup(_, { expose }) {
+          expose({
+            get $el() {
+              return native.value;
+            },
+            focus: () => native.value?.focus(),
+            run: () => runs.value++,
+          });
+          return () =>
+            h("button", { ref: native, type: "button" }, "Custom action");
+        },
+      });
+      const ForwardingRoot = defineComponent({
+        setup() {
+          const { forwardRef } = useForwardExpose();
+          const forward = (value: Element | ComponentPublicInstance | null) => {
+            sdk.value = value;
+            forwardRef(value);
+          };
+          return () => {
+            const element = h(Target, { ref: child });
+            return mode === "render"
+              ? h(Primitive.div, { ref: forward, render: element })
+              : h(
+                  Primitive.div,
+                  { ref: forward, asChild: true },
+                  { default: () => element },
+                );
+          };
+        },
+      });
+      const view = render(
+        h(defineComponent(() => () => h(ForwardingRoot, { ref: api }))),
+      );
+      const button = view.container.querySelector("button");
+      if (!button || !api.value || !child.value || !sdk.value)
+        throw new Error("Actual custom action/public ref target missing");
+      const instance = api.value;
+      expect(Object.hasOwn(child.value, "$el")).toBe(true);
+      expect(instance.$el).toBe(button);
+      expect(instance.focus).toBe(child.value.focus);
+      expect(instance.run).toBe(child.value.run);
+      instance.focus?.();
+      expect(document.activeElement).toBe(button);
+      instance.run?.();
+      expect(runs.value).toBe(1);
+      view.unmount();
+      expect(api.value).toBeNull();
+      expect(child.value).toBeNull();
+      expect(sdk.value).toBeNull();
+      expect(native.value).toBeNull();
+      expect(instance.focus).toBeUndefined();
+      expect(instance.run).toBeUndefined();
+      expect(button.isConnected).toBe(false);
+    },
+  );
+
+  it("keeps component slots and exposed instances when replacing children", () => {
+    const target = shallowRef<
+      (ComponentPublicInstance & { focus: () => void }) | null
+    >(null);
+    const focus = vi.fn();
+    const Target = defineComponent({
+      setup(_, { slots, expose }) {
+        expose({ focus });
+        return () => h("em", slots.default?.());
+      },
+    });
+    const fixture = render(
+      h(
+        defineComponent({
+          setup: () => () =>
+            h(
+              Primitive.div,
+              {
+                ref: target,
+                render: h(Target, null, { default: () => "original" }),
+              },
+              { default: () => "replacement" },
+            ),
+        }),
+      ),
+    );
+    expect(fixture.container.textContent).toBe("replacement");
+    target.value!.focus();
+    expect(focus).toHaveBeenCalledOnce();
+  });
+});