Skip to content

Commit 4551f09

Browse files
marklawlormarklawlor
authored
chore: port tailwind css tests (#116)
1 parent d4209f0 commit 4551f09

File tree

17 files changed

+3860
-24
lines changed

17 files changed

+3860
-24
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@
169169
"@eslint/js": "^9.30.1",
170170
"@ianvs/prettier-plugin-sort-imports": "^4.4.2",
171171
"@tailwindcss/postcss": "^4.1.12",
172-
"@testing-library/react-native": "^13.2.0",
172+
"@testing-library/react-native": "^13.3.3",
173173
"@tsconfig/react-native": "^3.0.6",
174174
"@types/babel__core": "^7",
175175
"@types/connect": "^3.4.38",

‎src/__tests__/vendor/tailwind/@apply.test.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { screen } from "@testing-library/react-native";
2+
import { View } from "react-native-css/components";
3+
4+
import { render } from "./_tailwind";
5+
6+
const testID = "react-native-css-interop";
7+
8+
test("@apply", async () => {
9+
await render(<View testID={testID} className="btn-primary" />, {
10+
extraCss: `
11+
.btn-primary {
12+
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md;
13+
}`,
14+
});
15+
16+
const component = screen.getByTestId(testID);
17+
18+
expect(component).toHaveStyle({
19+
backgroundColor: "#2b7fff",
20+
borderRadius: 7,
21+
color: "#fff",
22+
fontWeight: 600,
23+
paddingBlock: 7,
24+
paddingInline: 14,
25+
boxShadow: [
26+
{
27+
offsetX: 0,
28+
offsetY: 4,
29+
blurRadius: 6,
30+
spreadDistance: -1,
31+
color: "#0000001a",
32+
},
33+
{
34+
offsetX: 0,
35+
offsetY: 2,
36+
blurRadius: 4,
37+
spreadDistance: -2,
38+
color: "#0000001a",
39+
},
40+
],
41+
});
42+
});

‎src/__tests__/vendor/tailwind/accessibility.test.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { renderCurrentTest } from "./_tailwind";
2+
3+
describe("Accessibility - Screen Readers", () => {
4+
test("sr-only", async () => {
5+
const result = await renderCurrentTest();
6+
expect(result).toStrictEqual({
7+
props: {
8+
style: {
9+
borderWidth: 0,
10+
height: 1,
11+
margin: -1,
12+
overflow: "hidden",
13+
padding: 0,
14+
position: "absolute",
15+
width: 1,
16+
},
17+
},
18+
warnings: {
19+
properties: ["clip", "white-space"],
20+
},
21+
});
22+
});
23+
24+
test("not-sr-only", async () => {
25+
const result = await renderCurrentTest();
26+
expect(result).toStrictEqual({
27+
props: {
28+
style: {
29+
margin: 0,
30+
overflow: "visible",
31+
padding: 0,
32+
},
33+
},
34+
warnings: {
35+
properties: ["clip", "white-space"],
36+
values: {
37+
position: "static",
38+
width: "auto",
39+
height: "auto",
40+
},
41+
},
42+
});
43+
});
44+
});

‎src/__tests__/vendor/tailwind/effects.test.tsx‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
import { renderCurrentTest } from "./_tailwind";
2+
3+
describe("Effects - Box Shadow", () => {
4+
test("shadow-sm", async () => {
5+
expect(await renderCurrentTest()).toStrictEqual({
6+
props: {
7+
style: {
8+
boxShadow: [
9+
{
10+
blurRadius: 3,
11+
color: "#0000001a",
12+
offsetX: 0,
13+
offsetY: 1,
14+
spreadDistance: 0,
15+
},
16+
{
17+
blurRadius: 2,
18+
color: "#0000001a",
19+
offsetX: 0,
20+
offsetY: 1,
21+
spreadDistance: -1,
22+
},
23+
],
24+
},
25+
},
26+
warnings: {
27+
values: {
28+
"box-shadow": ["initial", "initial", "initial", "initial", "initial"],
29+
},
30+
},
31+
});
32+
});
33+
34+
test("shadow", async () => {
35+
expect(await renderCurrentTest()).toStrictEqual({
36+
props: {
37+
style: {
38+
boxShadow: [
39+
{
40+
blurRadius: 3,
41+
color: "#0000001a",
42+
offsetX: 0,
43+
offsetY: 1,
44+
spreadDistance: 0,
45+
},
46+
{
47+
blurRadius: 2,
48+
color: "#0000001a",
49+
offsetX: 0,
50+
offsetY: 1,
51+
spreadDistance: -1,
52+
},
53+
],
54+
},
55+
},
56+
warnings: {
57+
values: {
58+
"box-shadow": ["initial", "initial", "initial", "initial", "initial"],
59+
},
60+
},
61+
});
62+
});
63+
test("shadow-none", async () => {
64+
expect(await renderCurrentTest()).toStrictEqual({
65+
props: {
66+
style: {
67+
boxShadow: [],
68+
},
69+
},
70+
warnings: {
71+
values: {
72+
"box-shadow": ["initial", "initial", "initial", "initial", "initial"],
73+
},
74+
},
75+
});
76+
});
77+
});
78+
79+
describe.skip("Effects - Box Shadow Color", () => {
80+
// TODO
81+
});
82+
83+
describe("Effects - Opacity", () => {
84+
test("opacity-0", async () => {
85+
expect(await renderCurrentTest()).toStrictEqual({
86+
props: { style: { opacity: 0 } },
87+
});
88+
});
89+
test("opacity-100", async () => {
90+
expect(await renderCurrentTest()).toStrictEqual({
91+
props: { style: { opacity: 1 } },
92+
});
93+
});
94+
});
95+
96+
describe("Effects - Mix Blend Mode", () => {
97+
test("mix-blend-normal", async () => {
98+
expect(await renderCurrentTest()).toStrictEqual({
99+
props: {},
100+
warnings: { properties: ["mix-blend-mode"] },
101+
});
102+
});
103+
test("mix-blend-multiply", async () => {
104+
expect(await renderCurrentTest()).toStrictEqual({
105+
props: {},
106+
warnings: { properties: ["mix-blend-mode"] },
107+
});
108+
});
109+
test("mix-blend-screen", async () => {
110+
expect(await renderCurrentTest()).toStrictEqual({
111+
props: {},
112+
warnings: { properties: ["mix-blend-mode"] },
113+
});
114+
});
115+
test("mix-blend-overlay", async () => {
116+
expect(await renderCurrentTest()).toStrictEqual({
117+
props: {},
118+
warnings: { properties: ["mix-blend-mode"] },
119+
});
120+
});
121+
test("mix-blend-darken", async () => {
122+
expect(await renderCurrentTest()).toStrictEqual({
123+
props: {},
124+
warnings: { properties: ["mix-blend-mode"] },
125+
});
126+
});
127+
test("mix-blend-lighten", async () => {
128+
expect(await renderCurrentTest()).toStrictEqual({
129+
props: {},
130+
warnings: { properties: ["mix-blend-mode"] },
131+
});
132+
});
133+
test("mix-blend-color-dodge", async () => {
134+
expect(await renderCurrentTest()).toStrictEqual({
135+
props: {},
136+
warnings: { properties: ["mix-blend-mode"] },
137+
});
138+
});
139+
test("mix-blend-color-burn", async () => {
140+
expect(await renderCurrentTest()).toStrictEqual({
141+
props: {},
142+
warnings: { properties: ["mix-blend-mode"] },
143+
});
144+
});
145+
test("mix-blend-hard-light", async () => {
146+
expect(await renderCurrentTest()).toStrictEqual({
147+
props: {},
148+
warnings: { properties: ["mix-blend-mode"] },
149+
});
150+
});
151+
test("mix-blend-soft-light", async () => {
152+
expect(await renderCurrentTest()).toStrictEqual({
153+
props: {},
154+
warnings: { properties: ["mix-blend-mode"] },
155+
});
156+
});
157+
test("mix-blend-difference", async () => {
158+
expect(await renderCurrentTest()).toStrictEqual({
159+
props: {},
160+
warnings: { properties: ["mix-blend-mode"] },
161+
});
162+
});
163+
test("mix-blend-exclusion", async () => {
164+
expect(await renderCurrentTest()).toStrictEqual({
165+
props: {},
166+
warnings: { properties: ["mix-blend-mode"] },
167+
});
168+
});
169+
test("mix-blend-hue", async () => {
170+
expect(await renderCurrentTest()).toStrictEqual({
171+
props: {},
172+
warnings: { properties: ["mix-blend-mode"] },
173+
});
174+
});
175+
test("mix-blend-saturation", async () => {
176+
expect(await renderCurrentTest()).toStrictEqual({
177+
props: {},
178+
warnings: { properties: ["mix-blend-mode"] },
179+
});
180+
});
181+
test("mix-blend-color", async () => {
182+
expect(await renderCurrentTest()).toStrictEqual({
183+
props: {},
184+
warnings: { properties: ["mix-blend-mode"] },
185+
});
186+
});
187+
test("mix-blend-luminosity", async () => {
188+
expect(await renderCurrentTest()).toStrictEqual({
189+
props: {},
190+
warnings: { properties: ["mix-blend-mode"] },
191+
});
192+
});
193+
});
194+
195+
describe("Effects - Background Blend Mode", () => {
196+
test("bg-blend-normal", async () => {
197+
expect(await renderCurrentTest()).toStrictEqual({
198+
props: {},
199+
warnings: { properties: ["background-blend-mode"] },
200+
});
201+
});
202+
test("bg-blend-multiply", async () => {
203+
expect(await renderCurrentTest()).toStrictEqual({
204+
props: {},
205+
warnings: { properties: ["background-blend-mode"] },
206+
});
207+
});
208+
test("bg-blend-screen", async () => {
209+
expect(await renderCurrentTest()).toStrictEqual({
210+
props: {},
211+
warnings: { properties: ["background-blend-mode"] },
212+
});
213+
});
214+
test("bg-blend-overlay", async () => {
215+
expect(await renderCurrentTest()).toStrictEqual({
216+
props: {},
217+
warnings: { properties: ["background-blend-mode"] },
218+
});
219+
});
220+
test("bg-blend-darken", async () => {
221+
expect(await renderCurrentTest()).toStrictEqual({
222+
props: {},
223+
warnings: { properties: ["background-blend-mode"] },
224+
});
225+
});
226+
test("bg-blend-lighten", async () => {
227+
expect(await renderCurrentTest()).toStrictEqual({
228+
props: {},
229+
warnings: { properties: ["background-blend-mode"] },
230+
});
231+
});
232+
test("bg-blend-color-dodge", async () => {
233+
expect(await renderCurrentTest()).toStrictEqual({
234+
props: {},
235+
warnings: { properties: ["background-blend-mode"] },
236+
});
237+
});
238+
test("bg-blend-color-burn", async () => {
239+
expect(await renderCurrentTest()).toStrictEqual({
240+
props: {},
241+
warnings: { properties: ["background-blend-mode"] },
242+
});
243+
});
244+
test("bg-blend-hard-light", async () => {
245+
expect(await renderCurrentTest()).toStrictEqual({
246+
props: {},
247+
warnings: { properties: ["background-blend-mode"] },
248+
});
249+
});
250+
test("bg-blend-soft-light", async () => {
251+
expect(await renderCurrentTest()).toStrictEqual({
252+
props: {},
253+
warnings: { properties: ["background-blend-mode"] },
254+
});
255+
});
256+
test("bg-blend-difference", async () => {
257+
expect(await renderCurrentTest()).toStrictEqual({
258+
props: {},
259+
warnings: { properties: ["background-blend-mode"] },
260+
});
261+
});
262+
test("bg-blend-exclusion", async () => {
263+
expect(await renderCurrentTest()).toStrictEqual({
264+
props: {},
265+
warnings: { properties: ["background-blend-mode"] },
266+
});
267+
});
268+
test("bg-blend-hue", async () => {
269+
expect(await renderCurrentTest()).toStrictEqual({
270+
props: {},
271+
warnings: { properties: ["background-blend-mode"] },
272+
});
273+
});
274+
test("bg-blend-saturation", async () => {
275+
expect(await renderCurrentTest()).toStrictEqual({
276+
props: {},
277+
warnings: { properties: ["background-blend-mode"] },
278+
});
279+
});
280+
test("bg-blend-color", async () => {
281+
expect(await renderCurrentTest()).toStrictEqual({
282+
props: {},
283+
warnings: { properties: ["background-blend-mode"] },
284+
});
285+
});
286+
test("bg-blend-luminosity", async () => {
287+
expect(await renderCurrentTest()).toStrictEqual({
288+
props: {},
289+
warnings: { properties: ["background-blend-mode"] },
290+
});
291+
});
292+
});

0 commit comments

Comments
 (0)