react-native-css/src/__tests__/native/box-shadow.test.tsx at ed4eae89e61f289b91be714470932ef7ab04ea86 · nativewind/react-native-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { render, screen } from "@testing-library/react-native";
import { View } from "react-native-css/components/View";
import { registerCSS, testID } from "react-native-css/jest";

test("shadow values - single nested variables", () => {
  registerCSS(`
    :root {
      --color: #fb2c36;
      --my-var: 0 20px 25px -5px var(--color);
    }

    .test { box-shadow: var(--my-var); }
  `);

  render(<View testID={testID} className="test" />);
  const component = screen.getByTestId(testID);

  expect(component.props.style).toStrictEqual({
    boxShadow: [
      {
        blurRadius: 25,
        color: "#fb2c36",
        offsetX: 0,
        offsetY: 20,
        spreadDistance: -5,
      },
    ],
  });
});

test("shadow values - multiple nested variables", () => {
  registerCSS(`
    :root {
      --my-var: 0 20px 0 0 red, 0 30px 0 0 green;
      --my-var-2: var(--my-var), 0 40px 0 0 purple;
      --my-var-3: 0 50px 0 0 yellow, 0 60px 0 0 orange;
      --my-var-4: var(--my-var-3), 0 70px 0 0 gray;
    }

    .test {
      box-shadow: var(--my-var-2), var(--my-var-4);
    }
  `);

  render(<View testID={testID} className="test" />);
  const component = screen.getByTestId(testID);

  expect(component.props.style).toStrictEqual({
    boxShadow: [
      {
        blurRadius: 0,
        color: "#f00",
        offsetX: 0,
        offsetY: 20,
        spreadDistance: 0,
      },

      {
        blurRadius: 0,
        color: "#008000",
        offsetX: 0,
        offsetY: 30,
        spreadDistance: 0,
      },
      {
        blurRadius: 0,
        color: "#800080",
        offsetX: 0,
        offsetY: 40,
        spreadDistance: 0,
      },
      {
        blurRadius: 0,
        color: "#ff0",
        offsetX: 0,
        offsetY: 50,
        spreadDistance: 0,
      },
      {
        blurRadius: 0,
        color: "#ffa500",
        offsetX: 0,
        offsetY: 60,
        spreadDistance: 0,
      },
      {
        blurRadius: 0,
        color: "#808080",
        offsetX: 0,
        offsetY: 70,
        spreadDistance: 0,
      },
    ],
  });
});