/tests/dom.test.ts at 33c22babfaa9aa563c16457eaea2c50db63747fd

/// <reference lib="dom" />
import { GlobalRegistrator } from "@happy-dom/global-registrator";
import { afterAll, beforeAll, describe, expect, mock, test } from "bun:test";
import { CustomEvent } from "happy-dom";

import { el, attr, fragment, mathml, on, prop, svg } from "../src/dom.js";
import { derived, signal } from "../src/signals.js";

beforeAll(() => {
  GlobalRegistrator.register();
});

afterAll(() => {
  GlobalRegistrator.unregister();
});

describe("el", () => {
  test("should create an HTMLElement element", () => {
    const p = el("p");

    expect(p.tagName).toBe("P");
  });

  test("should run ElementSetups against the to-be created element", () => {
    const fn = mock((_n: number) => {});

    el("div", [
      () => {
        fn(0);
      },
      () => {
        fn(1);
      },
    ]);

    expect(fn.mock.calls).toEqual([[0], [1]]);
  });

  test("should append child nodes", () => {
    const div = el("div", [], [el("p")]);

    const p = div.querySelector("p");

    expect(p).toBeTruthy();
  });

  test("should convert strings to Text", () => {
    const p = el("p", [], ["Foo"]);

    expect(p.textContent).toBe("Foo");
  });

  test("should skip null or undefined", () => {
    const p = el("p", [], [el("span"), null, undefined, el("span")]);

    expect(p.childNodes.length).toBe(2);
  });

  test("should react to Signal value changes", () => {
    const span = el("span");

    const $child = signal<HTMLElement | null>(span);

    const p = el("p", [], [$child]);

    expect(p.querySelector("span")).toBe(span);

    $child.set(null);

    expect(p.querySelector("span")).toBe(null);

    $child.set(span);

    expect(p.querySelector("span")).toBe(span);
  });
});

describe("attr", () => {
  test("should set attribute", () => {
    const div = el("div", [attr("aria-hidden", "true")]);

    expect(div.getAttribute("aria-hidden")).toBe("true");
  });

  test("should react to change of Signal values", () => {
    const $s = signal("foo");

    const button = el("button", [attr("data-name", $s)]);

    expect(button.dataset.name).toBe("foo");

    $s.set("bar");

    expect(button.dataset.name).toBe("bar");
  });

  test("should handle boolean value", () => {
    const $s = signal(true);

    const input = el("input", [attr("disabled", $s)]);

    expect(input.getAttribute("disabled")).toBe("");

    $s.set(false);

    expect(input.getAttribute("disabled")).toBe(null);
  });
});

describe("prop", () => {
  test("should set property", () => {
    const input = el("input", [prop("readOnly", true)]);

    expect(input.readOnly).toBe(true);
  });

  test("should react to Signal value changes", () => {
    const $disabled = signal(false);

    const button = el("button", [prop("disabled", $disabled)]);

    expect(button.disabled).toBe(false);

    $disabled.set(true);

    expect(button.disabled).toBe(true);
  });
});

describe("on", () => {
  test("should set event listener", () => {
    const fn = mock(() => {});

    const div = el("div", [
      on("click", () => {
        fn();
      }),
    ]);

    // @ts-expect-error: Using native event cause runtime error (https://github.com/capricorn86/happy-dom/issues/1049)
    div.dispatchEvent(new CustomEvent("click"));

    expect(fn.mock.calls.length).toBe(1);
  });

  test("should dispose stale listener", () => {
    const fn = mock(() => {});

    const $s = signal(0);

    const div = el("div", [
      on(
        "click",
        derived(() => {
          // Associate this Derived to $s, so every time $s gets updated,
          // listener function will be renewed too.
          $s.get();

          return () => {
            fn();
          };
        }),
      ),
    ]);

    $s.set(1);

    // @ts-expect-error: Using native event cause runtime error (https://github.com/capricorn86/happy-dom/issues/1049)
    div.dispatchEvent(new CustomEvent("click"));

    expect(fn.mock.calls.length).toBe(1);
  });
});

describe("fragment", () => {
  test("children update mechanism correctly handles DocumentFragment quirk", () => {
    const $visible = signal(true);

    const div = el(
      "div",
      [],
      [
        derived(() =>
          $visible.get() ? fragment([el("span"), el("span")]) : null,
        ),
      ],
    );

    expect(div.querySelectorAll("> span").length).toBe(2);

    $visible.set(false);

    expect(div.querySelectorAll("> span").length).toBe(0);

    $visible.set(true);

    expect(div.querySelectorAll("> span").length).toBe(2);
  });

  test("should react to value changes", () => {
    const $name = signal("Alice");

    const div = el("p", [], [fragment(["Hello, ", $name, "!"])]);

    expect(div.textContent).toBe("Hello, Alice!");

    $name.set("Bob");

    expect(div.textContent).toBe("Hello, Bob!");
  });
});

describe("svg", () => {
  test("should create a SVGElement", () => {
    const path = svg("path", [attr("d", "M0,0 L1,0 L0,1 Z")]);

    // NOTE: happy-dom does not implement SVGPathElement
    expect(path).toBeInstanceOf(SVGElement);
  });
});

describe("mathml", () => {
  test("should create a MathMLElement", () => {
    const fomula = mathml(
      "math",
      [attr("display", "inline")],
      [
        mathml(
          "mfrac",
          [],
          [
            mathml(
              "msup",
              [],
              [mathml("mi", [], ["π"]), mathml("mn", [], ["2"])],
            ),
            mathml("mn", [], ["6"]),
          ],
        ),
      ],
    );

    // NOTE: happy-dom does not implement MathML at all.
    expect(fomula).toBeInstanceOf(Element);
    expect(
      (fomula as Element).querySelector("> mfrac > msup > mn")?.textContent,
    ).toBe("2");
  });
});