Skip to content

Commit 5ebc930

Browse files
thecrypticacethecrypticace
committed
Update UI tests
1 parent c559357 commit 5ebc930

File tree

1 file changed

+162
-150
lines changed

1 file changed

+162
-150
lines changed

‎packages/tailwindcss/tests/ui.spec.ts

Lines changed: 162 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import fs from 'node:fs'
44
import path from 'node:path'
55
import { compile } from '../src'
66
import { optimizeCss } from '../src/test-utils/run'
7+
import { segment } from '../src/utils/segment'
78

89
const html = String.raw
910
const css = String.raw
@@ -214,27 +215,27 @@ test.skip("::file-selector-button can receive a border with just the 'border' ut
214215
})
215216

216217
test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) => {
217-
let { getPropertyValue } = await render(
218+
let { getPropertyList } = await render(
218219
page,
219220
html`<div
220221
id="x"
221222
class="shadow-sm shadow-[#f00] inset-shadow-sm inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
222223
></div>`,
223224
)
224225

225-
expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
226-
[
227-
'rgb(0, 255, 0) 0px 2px 4px 0px inset', // inset-shadow
228-
'rgb(0, 0, 255) 0px 0px 0px 1px inset', // inset-ring
229-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
230-
'rgb(255, 255, 255) 0px 0px 0px 1px', // ring
231-
'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px', // shadow
232-
].join(', '),
233-
)
226+
expect(await getPropertyList('#x', 'box-shadow')).toEqual([
227+
'rgb(0, 255, 0) 0px 2px 4px 0px inset', // inset-shadow
228+
'rgb(0, 0, 255) 0px 0px 0px 1px inset', // inset-ring
229+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
230+
'rgb(255, 255, 255) 0px 0px 0px 1px', // ring
231+
232+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/), // shadow
233+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/), // shadow
234+
])
234235
})
235236

236237
test('shadow colors', async ({ page }) => {
237-
let { getPropertyValue } = await render(
238+
let { getPropertyList } = await render(
238239
page,
239240
html`
240241
<div id="a" class="shadow-sm shadow-red"></div>
@@ -247,81 +248,89 @@ test('shadow colors', async ({ page }) => {
247248
`,
248249
)
249250

250-
expect(await getPropertyValue('#a', 'box-shadow')).toEqual(
251-
[
252-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
253-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
254-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
255-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
256-
'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px',
257-
].join(', '),
258-
)
259-
expect(await getPropertyValue('#b', 'box-shadow')).toEqual(
260-
[
261-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
262-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
263-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
264-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
265-
'rgb(255, 0, 0) 0px 20px 25px -5px, rgb(255, 0, 0) 0px 8px 10px -6px',
266-
].join(', '),
267-
)
268-
expect(await getPropertyValue('#c', 'box-shadow')).toEqual(
269-
[
270-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
271-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
272-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
273-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
274-
'rgb(255, 0, 0) 0px 2px 4px 0px',
275-
].join(', '),
276-
)
277-
278-
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
279-
[
280-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
281-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
282-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
283-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
284-
'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px',
285-
].join(', '),
286-
)
251+
expect(await getPropertyList('#a', 'box-shadow')).toEqual([
252+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
253+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
254+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
255+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
256+
257+
//
258+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/),
259+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/),
260+
])
261+
262+
expect(await getPropertyList('#b', 'box-shadow')).toEqual([
263+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
264+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
265+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
266+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
267+
268+
//
269+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 20px 25px -5px/),
270+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 8px 10px -6px/),
271+
])
272+
273+
expect(await getPropertyList('#c', 'box-shadow')).toEqual([
274+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
275+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
276+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
277+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
278+
279+
//
280+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 2px 4px 0px/),
281+
])
282+
283+
expect(await getPropertyList('#d', 'box-shadow')).toEqual([
284+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
285+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
286+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
287+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
288+
289+
//
290+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/),
291+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/),
292+
])
287293

288294
await page.locator('#d').hover()
289295

290-
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
291-
[
292-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
293-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
294-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
295-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
296-
'rgb(255, 0, 0) 0px 20px 25px -5px, rgb(255, 0, 0) 0px 8px 10px -6px',
297-
].join(', '),
298-
)
296+
expect(await getPropertyList('#d', 'box-shadow')).toEqual([
297+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
298+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
299+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
300+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
299301

300-
expect(await getPropertyValue('#e', 'box-shadow')).toEqual(
301-
[
302-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
303-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
304-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
305-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
306-
'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px',
307-
].join(', '),
308-
)
302+
//
303+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 20px 25px -5px/),
304+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 8px 10px -6px/),
305+
])
306+
307+
expect(await getPropertyList('#e', 'box-shadow')).toEqual([
308+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
309+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
310+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
311+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
312+
313+
//
314+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/),
315+
expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/),
316+
])
309317

310318
await page.locator('#e').hover()
311319

312-
expect(await getPropertyValue('#e', 'box-shadow')).toEqual(
313-
[
314-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
315-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
316-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
317-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
318-
'rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px',
319-
].join(', '),
320-
)
320+
expect(await getPropertyList('#e', 'box-shadow')).toEqual([
321+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
322+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
323+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
324+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
325+
326+
//
327+
'rgba(0, 0, 0, 0.1) 0px 20px 25px -5px',
328+
'rgba(0, 0, 0, 0.1) 0px 8px 10px -6px',
329+
])
321330
})
322331

323332
test('inset shadow colors', async ({ page }) => {
324-
let { getPropertyValue } = await render(
333+
let { getPropertyList } = await render(
325334
page,
326335
html`
327336
<div id="a" class="inset-shadow-xs inset-shadow-red"></div>
@@ -337,77 +346,63 @@ test('inset shadow colors', async ({ page }) => {
337346
`,
338347
)
339348

340-
expect(await getPropertyValue('#a', 'box-shadow')).toEqual(
341-
[
342-
'rgb(255, 0, 0) 0px 1px 1px 0px inset',
343-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
344-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
345-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
346-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
347-
].join(', '),
348-
)
349-
expect(await getPropertyValue('#b', 'box-shadow')).toEqual(
350-
[
351-
'rgb(255, 0, 0) 0px 2px 4px 0px inset',
352-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
353-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
354-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
355-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
356-
].join(', '),
357-
)
358-
expect(await getPropertyValue('#c', 'box-shadow')).toEqual(
359-
[
360-
'rgb(255, 0, 0) 0px 3px 6px 0px inset',
361-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
362-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
363-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
364-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
365-
].join(', '),
366-
)
367-
368-
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
369-
[
370-
'rgb(255, 0, 0) 0px 1px 1px 0px inset',
371-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
372-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
373-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
374-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
375-
].join(', '),
376-
)
349+
expect(await getPropertyList('#a', 'box-shadow')).toEqual([
350+
'rgb(255, 0, 0) 0px 1px 1px 0px inset',
351+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
352+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
353+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
354+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
355+
])
356+
expect(await getPropertyList('#b', 'box-shadow')).toEqual([
357+
'rgb(255, 0, 0) 0px 2px 4px 0px inset',
358+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
359+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
360+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
361+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
362+
])
363+
expect(await getPropertyList('#c', 'box-shadow')).toEqual([
364+
'rgb(255, 0, 0) 0px 3px 6px 0px inset',
365+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
366+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
367+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
368+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
369+
])
370+
371+
expect(await getPropertyList('#d', 'box-shadow')).toEqual([
372+
'rgb(255, 0, 0) 0px 1px 1px 0px inset',
373+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
374+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
375+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
376+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
377+
])
377378

378379
await page.locator('#d').hover()
379380

380-
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
381-
[
382-
'rgb(255, 0, 0) 0px 2px 4px 0px inset',
383-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
384-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
385-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
386-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
387-
].join(', '),
388-
)
389-
390-
expect(await getPropertyValue('#e', 'box-shadow')).toEqual(
391-
[
392-
'rgb(255, 0, 0) 0px 1px 1px 0px inset',
393-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
394-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
395-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
396-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
397-
].join(', '),
398-
)
381+
expect(await getPropertyList('#d', 'box-shadow')).toEqual([
382+
'rgb(255, 0, 0) 0px 2px 4px 0px inset',
383+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
384+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
385+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
386+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
387+
])
388+
389+
expect(await getPropertyList('#e', 'box-shadow')).toEqual([
390+
'rgb(255, 0, 0) 0px 1px 1px 0px inset',
391+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
392+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
393+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
394+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
395+
])
399396

400397
await page.locator('#e').hover()
401398

402-
expect(await getPropertyValue('#e', 'box-shadow')).toEqual(
403-
[
404-
'rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset',
405-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
406-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
407-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
408-
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
409-
].join(', '),
410-
)
399+
expect(await getPropertyList('#e', 'box-shadow')).toEqual([
400+
'rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset',
401+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
402+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
403+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
404+
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
405+
])
411406
})
412407

413408
test('text shadow colors', async ({ page }) => {
@@ -427,21 +422,28 @@ test('text shadow colors', async ({ page }) => {
427422
`,
428423
)
429424

430-
expect(await getPropertyValue('#a', 'text-shadow')).toEqual('rgb(255, 0, 0) 0px 1px 1px')
431-
expect(await getPropertyValue('#b', 'text-shadow')).toEqual(
432-
'rgb(255, 0, 0) 0px 1px 2px, rgb(255, 0, 0) 0px 3px 2px, rgb(255, 0, 0) 0px 4px 8px',
425+
expect(await getPropertyValue('#a', 'text-shadow')).toMatch(
426+
/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px/,
427+
)
428+
expect(await getPropertyValue('#b', 'text-shadow')).toMatch(
429+
/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 3px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 4px 8px/,
430+
)
431+
expect(await getPropertyValue('#c', 'text-shadow')).toMatch(
432+
/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 2px 4px/,
433+
)
434+
expect(await getPropertyValue('#d', 'text-shadow')).toMatch(
435+
/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px/,
433436
)
434-
expect(await getPropertyValue('#c', 'text-shadow')).toEqual('rgb(255, 0, 0) 0px 2px 4px')
435-
436-
expect(await getPropertyValue('#d', 'text-shadow')).toEqual('rgb(255, 0, 0) 0px 1px 1px')
437437

438438
await page.locator('#d').hover()
439439

440-
expect(await getPropertyValue('#d', 'text-shadow')).toEqual(
441-
'rgb(255, 0, 0) 0px 1px 2px, rgb(255, 0, 0) 0px 3px 2px, rgb(255, 0, 0) 0px 4px 8px',
440+
expect(await getPropertyValue('#d', 'text-shadow')).toMatch(
441+
/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 3px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 4px 8px/,
442442
)
443443

444-
expect(await getPropertyValue('#e', 'text-shadow')).toEqual('rgb(255, 0, 0) 0px 1px 1px')
444+
expect(await getPropertyValue('#e', 'text-shadow')).toMatch(
445+
/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px/,
446+
)
445447

446448
await page.locator('#e').hover()
447449

@@ -803,6 +805,16 @@ async function render(page: Page, content: string, extraCss: string = '') {
803805
property,
804806
)
805807
},
808+
809+
async getPropertyList(selector: string | [string, string], property: string) {
810+
let value = await getPropertyValue(
811+
page,
812+
Array.isArray(selector) ? selector : [selector, undefined],
813+
property,
814+
)
815+
816+
return segment(value, ',').map((item) => item.trim())
817+
},
806818
}
807819
}
808820

0 commit comments

Comments
 (0)