-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.ts
128 lines (104 loc) · 4.46 KB
/
test.ts
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { suite } from 'uvu'
import * as assert from 'uvu/assert'
import type { Instance } from 'twind'
import type { VirtualSheet } from 'twind/sheets'
import { create } from 'twind'
import { virtualSheet } from 'twind/sheets'
import { aspectRatio } from '.'
const test = suite<{
sheet: VirtualSheet
tw: Instance['tw']
}>('@twind/aspect-ratio')
test.before((context) => {
context.sheet = virtualSheet()
const { tw } = create({
sheet: context.sheet,
mode: 'strict',
preflight: false,
prefix: false,
plugins: {
aspect: aspectRatio,
},
})
context.tw = tw
})
test.after.each(({ sheet }) => {
sheet.reset()
})
test('using directive', ({ tw, sheet }) => {
assert.is(tw(aspectRatio(16, 9)), 'tw-1sfq0fj aspect-ratio')
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.tw-1sfq0fj{--tw-aspect-w:16;--tw-aspect-h:9}',
])
sheet.reset()
assert.is(tw(aspectRatio('none')), 'tw-lqatbl')
assert.equal(sheet.target, [
'.tw-lqatbl>*{position:static;height:auto;width:auto;top:auto;right:auto;bottom:auto;left:auto}',
'.tw-lqatbl{position:static;padding-bottom:0px}',
])
sheet.reset()
assert.is(tw(aspectRatio('1.85/1')), 'tw-mikpg4 aspect-ratio')
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.tw-mikpg4{--tw-aspect-w:1.85;--tw-aspect-h:1}',
])
sheet.reset()
assert.is(tw(aspectRatio({ w: 3, h: 2 })), 'tw-gy87d0 aspect-ratio')
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.tw-gy87d0{--tw-aspect-w:3;--tw-aspect-h:2}',
])
sheet.reset()
assert.is(tw(aspectRatio(4, 3)), 'tw-vvqhtr aspect-ratio')
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.tw-vvqhtr{--tw-aspect-w:4;--tw-aspect-h:3}',
])
})
test('using plugin', ({ tw, sheet }) => {
assert.is(
tw`aspect-w-16 aspect-h-9 lg:aspect-none`,
'aspect-w-16 aspect-h-9 aspect-ratio lg:aspect-none',
)
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.aspect-w-16{--tw-aspect-w:16}',
'.aspect-h-9{--tw-aspect-h:9}',
'@media (min-width:1024px){.lg\\:aspect-none>*{position:static;height:auto;width:auto;top:auto;right:auto;bottom:auto;left:auto}}',
'@media (min-width:1024px){.lg\\:aspect-none{position:static;padding-bottom:0px}}',
])
sheet.reset()
assert.is(tw`aspect-4/3`, 'aspect-4/3 aspect-ratio')
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.aspect-4\\/3{--tw-aspect-w:4;--tw-aspect-h:3}',
])
sheet.reset()
assert.is(tw`aspect-1.85-1`, 'aspect-1.85-1 aspect-ratio')
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.aspect-1\\.85-1{--tw-aspect-w:1.85;--tw-aspect-h:1}',
])
sheet.reset()
// Tagged class is accepted - shim would end in infinite loop
assert.is(tw`aspect-ratio`, '')
assert.equal(sheet.target, [])
sheet.reset()
// Tagged class is accepted - shim would end in infinite loop
assert.is(tw`aspect-w-16 aspect-h-9 aspect-ratio`, 'aspect-w-16 aspect-h-9 aspect-ratio')
assert.equal(sheet.target, [
'.aspect-ratio>*{position:absolute;height:100%;width:100%;top:0px;right:0px;bottom:0px;left:0px}',
'.aspect-ratio{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)}',
'.aspect-w-16{--tw-aspect-w:16}',
'.aspect-h-9{--tw-aspect-h:9}',
])
})
test.run()