/
parseAnimationValue.test.js
200 lines (184 loc) · 8.48 KB
/
parseAnimationValue.test.js
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
import parseAnimationValue from '../src/util/parseAnimationValue'
describe('Tailwind Defaults', () => {
it.each([
[
'spin 1s linear infinite',
{
value: 'spin 1s linear infinite',
name: 'spin',
duration: '1s',
timingFunction: 'linear',
iterationCount: 'infinite',
},
],
[
'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
{
value: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
name: 'ping',
duration: '1s',
timingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
iterationCount: 'infinite',
},
],
[
'bounce 1s infinite',
{
value: 'bounce 1s infinite',
name: 'bounce',
duration: '1s',
iterationCount: 'infinite',
},
],
])('should be possible to parse: "%s"', (input, expected) => {
const parsed = parseAnimationValue(input)
expect(parsed).toHaveLength(1)
expect(parsed[0]).toEqual(expected)
})
})
describe('css variables', () => {
it('should be possible to use css variables', () => {
let parsed = parseAnimationValue('jump var(--animation-duration, 10s) linear infinite')
expect(parsed[0]).toEqual({
value: 'jump var(--animation-duration, 10s) linear infinite',
name: 'jump',
timingFunction: 'linear',
iterationCount: 'infinite',
unknown: ['var(--animation-duration, 10s)'],
})
})
})
describe('MDN Examples', () => {
it.each([
[
'3s ease-in 1s 2 reverse both paused slidein',
{
value: '3s ease-in 1s 2 reverse both paused slidein',
delay: '1s',
direction: 'reverse',
duration: '3s',
fillMode: 'both',
iterationCount: '2',
name: 'slidein',
playState: 'paused',
timingFunction: 'ease-in',
},
],
[
'slidein 3s linear 1s',
{
value: 'slidein 3s linear 1s',
delay: '1s',
duration: '3s',
name: 'slidein',
timingFunction: 'linear',
},
],
['slidein 3s', { value: 'slidein 3s', duration: '3s', name: 'slidein' }],
])('should be possible to parse: "%s"', (input, expected) => {
const parsed = parseAnimationValue(input)
expect(parsed).toHaveLength(1)
expect(parsed[0]).toEqual(expected)
})
})
describe('duration & delay', () => {
it.each([
// Positive seconds (integer)
['spin 2s 1s linear', { duration: '2s', delay: '1s' }],
// Negative seconds (integer)
['spin -2s -1s linear', { duration: '-2s', delay: '-1s' }],
// Positive seconds (float)
['spin 2.321s 1.321s linear', { duration: '2.321s', delay: '1.321s' }],
// Negative seconds (float)
['spin -2.321s -1.321s linear', { duration: '-2.321s', delay: '-1.321s' }],
// Positive milliseconds (integer)
['spin 200ms 100ms linear', { duration: '200ms', delay: '100ms' }],
// Negative milliseconds (integer)
['spin -200ms -100ms linear', { duration: '-200ms', delay: '-100ms' }],
// Positive milliseconds (float)
['spin 200.321ms 100.321ms linear', { duration: '200.321ms', delay: '100.321ms' }],
// Negative milliseconds (float)
['spin -200.321ms -100.321ms linear', { duration: '-200.321ms', delay: '-100.321ms' }],
])('should be possible to parse "%s" into %o', (input, { duration, delay }) => {
const parsed = parseAnimationValue(input)
expect(parsed).toHaveLength(1)
expect(parsed[0].duration).toEqual(duration)
expect(parsed[0].delay).toEqual(delay)
})
})
describe('iteration count', () => {
it.each([
// Number
['1 spin 200s 100s linear', '1'],
['spin 2 200s 100s linear', '2'],
['spin 200s 3 100s linear', '3'],
['spin 200s 100s 4 linear', '4'],
['spin 200s 100s linear 5', '5'],
// Infinite
['infinite spin 200s 100s linear', 'infinite'],
['spin infinite 200s 100s linear', 'infinite'],
['spin 200s infinite 100s linear', 'infinite'],
['spin 200s 100s infinite linear', 'infinite'],
['spin 200s 100s linear infinite', 'infinite'],
])(
'should be possible to parse "%s" with an iteraction count of "%s"',
(input, iterationCount) => {
const parsed = parseAnimationValue(input)
expect(parsed).toHaveLength(1)
expect(parsed[0].iterationCount).toEqual(iterationCount)
}
)
})
describe('multiple animations', () => {
it('should be possible to parse multiple applications at once', () => {
const input = [
'spin 1s linear infinite',
'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
'pulse 2s cubic-bezier(0.4, 0, 0.6) infinite',
].join(',')
const parsed = parseAnimationValue(input)
expect(parsed).toHaveLength(3)
expect(parsed).toEqual([
{
value: 'spin 1s linear infinite',
name: 'spin',
duration: '1s',
timingFunction: 'linear',
iterationCount: 'infinite',
},
{
value: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
name: 'ping',
duration: '1s',
timingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
iterationCount: 'infinite',
},
{
value: 'pulse 2s cubic-bezier(0.4, 0, 0.6) infinite',
name: 'pulse',
duration: '2s',
timingFunction: 'cubic-bezier(0.4, 0, 0.6)',
iterationCount: 'infinite',
},
])
})
})
it.each`
input | value | direction | playState | fillMode | iterationCount | timingFunction | duration | delay | name
${'1s spin 1s infinite'} | ${'1s spin 1s infinite'} | ${undefined} | ${undefined} | ${undefined} | ${'infinite'} | ${undefined} | ${'1s'} | ${'1s'} | ${'spin'}
${'infinite infinite 1s 1s'} | ${'infinite infinite 1s 1s'} | ${undefined} | ${undefined} | ${undefined} | ${'infinite'} | ${undefined} | ${'1s'} | ${'1s'} | ${'infinite'}
${'ease 1s ease 1s'} | ${'ease 1s ease 1s'} | ${undefined} | ${undefined} | ${undefined} | ${undefined} | ${'ease'} | ${'1s'} | ${'1s'} | ${'ease'}
${'normal paused backwards infinite ease-in 1s 2s name'} | ${'normal paused backwards infinite ease-in 1s 2s name'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
${'paused backwards infinite ease-in 1s 2s name normal'} | ${'paused backwards infinite ease-in 1s 2s name normal'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
${'backwards infinite ease-in 1s 2s name normal paused'} | ${'backwards infinite ease-in 1s 2s name normal paused'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
${'infinite ease-in 1s 2s name normal paused backwards'} | ${'infinite ease-in 1s 2s name normal paused backwards'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
${'ease-in 1s 2s name normal paused backwards infinite'} | ${'ease-in 1s 2s name normal paused backwards infinite'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
${'1s 2s name normal paused backwards infinite ease-in'} | ${'1s 2s name normal paused backwards infinite ease-in'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
${'2s name normal paused backwards infinite ease-in 1s'} | ${'2s name normal paused backwards infinite ease-in 1s'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'2s'} | ${'1s'} | ${'name'}
${'name normal paused backwards infinite ease-in 1s 2s'} | ${'name normal paused backwards infinite ease-in 1s 2s'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
${' name normal paused backwards infinite ease-in 1s 2s '} | ${'name normal paused backwards infinite ease-in 1s 2s'} | ${'normal'} | ${'paused'} | ${'backwards'} | ${'infinite'} | ${'ease-in'} | ${'1s'} | ${'2s'} | ${'name'}
`('should parse "$input" correctly', ({ input, ...expected }) => {
let parsed = parseAnimationValue(input)
expect(parsed).toHaveLength(1)
expect(parsed[0]).toEqual(expected)
})