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
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114
115. 115
116. 116
117. 117
118. 118
119. 119

import { describe, expect, it } from "vitest";

import type * as figma from "../../../figma";
import { defaultPreferenecs, type Preferences } from "../../../preferences";

import { fromNode } from "./fromNode";
import { serializeStyle } from "./serialize";

describe("fromNode", () => {
  describe("padding", () => {
    it("Should have v/h padding rule for v/h paddings", () => {
      const input: figma.Node & figma.HasLegacyPadding = {
        id: "",
        name: "",
        type: "",
        horizontalPadding: 1,
        verticalPadding: 2,
      };

      expect(
        fromNode(input, defaultPreferenecs).map((s) =>
          serializeStyle(s, defaultPreferenecs),
        ),
      ).toContain("padding: 2px 1px;");
    });

    it("Should have single-value padding rule for v/h paddings are the same value", () => {
      const input: figma.Node & figma.HasLegacyPadding = {
        id: "",
        name: "",
        type: "",
        horizontalPadding: 5,
        verticalPadding: 5,
      };

      expect(
        fromNode(input, defaultPreferenecs).map((s) =>
          serializeStyle(s, defaultPreferenecs),
        ),
      ).toContain("padding: 5px;");
    });

    it("Should have four-value padding", () => {
      const input: figma.Node & figma.HasPadding = {
        id: "",
        name: "",
        type: "",
        paddingTop: 1,
        paddingRight: 2,
        paddingBottom: 3,
        paddingLeft: 4,
      };

      expect(
        fromNode(input, defaultPreferenecs).map((s) =>
          serializeStyle(s, defaultPreferenecs),
        ),
      ).toContain("padding: 1px 2px 3px 4px;");
    });
  });

  describe("effects", () => {
    it("Should convert inner shadow effect", () => {
      const input: figma.Node & figma.HasEffects = {
        id: "",
        name: "",
        type: "",
        effects: [
          {
            type: "INNER_SHADOW",
            radius: 5,
            spread: 1,
            visible: true,
            offset: { x: 3, y: 4 },
            color: { r: 1, g: 1, b: 1, a: 1 },
            blendMode: "NORMAL",
          } satisfies figma.ShadowEffect,
        ],
      };

      const preferences: Preferences = {
        ...defaultPreferenecs,
        cssColorNotation: "hex",
      };

      expect(
        fromNode(input, preferences).map((s) => serializeStyle(s, preferences)),
      ).toContain("box-shadow: 3px 4px 5px 1px #ffffff inset;");
    });

    it("Should skip invisible effects", () => {
      const input: figma.Node & figma.HasEffects = {
        id: "",
        name: "",
        type: "",
        effects: [
          {
            type: "INNER_SHADOW",
            radius: 5,
            spread: 1,
            visible: false,
            offset: { x: 3, y: 4 },
            color: { r: 1, g: 1, b: 1, a: 1 },
            blendMode: "NORMAL",
          } satisfies figma.ShadowEffect,
        ],
      };

      const preferences: Preferences = {
        ...defaultPreferenecs,
        cssColorNotation: "hex",
      };

      expect(
        fromNode(input, preferences).map((s) => serializeStyle(s, preferences)),
      ).not.toContain("box-shadow: 3px 4px 5px 1px #ffffff inset;");
    });
  });
});