1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80

import { GlobalRegistrator } from "@happy-dom/global-registrator";
import { afterAll, beforeAll, describe, expect, test } from "bun:test";

import { el } from "../src/dom.js";
import { classList, style } from "../src/setups.js";
import { signal } from "../src/signals.js";

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

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

describe("classList", () => {
  test("should add a list of class to an element", () => {
    const div = el("div", [classList("foo", "bar", "baz")]);

    expect(div.getAttribute("class")).toBe("foo bar baz");
  });

  test("should cleanup previous class", () => {
    const $class = signal<string | null>("foo");

    const div = el("div", [classList($class)]);

    expect(div.getAttribute("class")).toBe("foo");

    $class.set("bar");

    expect(div.getAttribute("class")).toBe("bar");

    $class.set(null);

    expect(div.getAttribute("class")).toBeEmpty();
  });
});

describe("style", () => {
  test("should set styles", () => {
    const div = el("div", [
      style("display", "none"),
      style("background-color", "tomato"),
    ]);

    expect(div.style.display).toBe("none");
    expect(div.style.backgroundColor).toBe("tomato");
  });

  test("should set custom properties", () => {
    const div = el("div", [
      style("--foo", "color(display-p3 0.8 1 0.9 / 0.5)"),
      style("--_bar", "t, o, k, e, n"),
      style("--baz", null),
    ]);

    expect(div.style.getPropertyValue("--foo")).toBe(
      "color(display-p3 0.8 1 0.9 / 0.5)",
    );
    expect(div.style.getPropertyValue("--_bar")).toBe("t, o, k, e, n");
    expect(div.style.getPropertyValue("--baz")).toBeEmpty();
  });

  test("should react to Signal changes", () => {
    const $display = signal<string | null>("block");

    const div = el("div", [style("display", $display)]);

    expect(div.style.display).toBe("block");

    $display.set("none");

    expect(div.style.display).toBe("none");

    $display.set(null);

    expect(div.style.display).toBeEmpty();
  });
});