/
animationParser.test.js
228 lines (208 loc) · 7.5 KB
/
animationParser.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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
import parse from '../src/util/animationParser'
import { produce } from './util/produce'
describe('Tailwind Defaults', () => {
it.each([
[
'spin 1s linear infinite',
{ name: 'spin', duration: '1s', timingFunction: 'linear', iterationCount: 'infinite' },
],
[
'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
{
name: 'ping',
duration: '1s',
timingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
iterationCount: 'infinite',
},
],
[
'pulse 2s cubic-bezier(0.4, 0, 0.6) infinite',
{
name: 'pulse',
duration: '2s',
timingFunction: 'cubic-bezier(0.4, 0, 0.6)',
iterationCount: 'infinite',
},
],
['bounce 1s infinite', { name: 'bounce', duration: '1s', iterationCount: 'infinite' }],
])('should be possible to parse: "%s"', (input, expected) => {
expect(parse(input)).toEqual(expected)
})
})
describe('MDN Examples', () => {
it.each([
[
'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',
{ delay: '1s', duration: '3s', name: 'slidein', timingFunction: 'linear' },
],
['slidein 3s', { duration: '3s', name: 'slidein' }],
])('should be possible to parse: "%s"', (input, expected) => {
expect(parse(input)).toEqual(expected)
})
})
describe('duration & delay', () => {
it.each([
// Positive seconds (integer)
['spin 1s 1s linear', { duration: '1s', delay: '1s' }],
['spin 2s 1s linear', { duration: '2s', delay: '1s' }],
['spin 1s 2s linear', { duration: '1s', delay: '2s' }],
// Negative seconds (integer)
['spin -1s -1s linear', { duration: '-1s', delay: '-1s' }],
['spin -2s -1s linear', { duration: '-2s', delay: '-1s' }],
['spin -1s -2s linear', { duration: '-1s', delay: '-2s' }],
// Positive seconds (float)
['spin 1.321s 1.321s linear', { duration: '1.321s', delay: '1.321s' }],
['spin 2.321s 1.321s linear', { duration: '2.321s', delay: '1.321s' }],
['spin 1.321s 2.321s linear', { duration: '1.321s', delay: '2.321s' }],
// Negative seconds (float)
['spin -1.321s -1.321s linear', { duration: '-1.321s', delay: '-1.321s' }],
['spin -2.321s -1.321s linear', { duration: '-2.321s', delay: '-1.321s' }],
['spin -1.321s -2.321s linear', { duration: '-1.321s', delay: '-2.321s' }],
// Positive milliseconds (integer)
['spin 100ms 100ms linear', { duration: '100ms', delay: '100ms' }],
['spin 200ms 100ms linear', { duration: '200ms', delay: '100ms' }],
['spin 100ms 200ms linear', { duration: '100ms', delay: '200ms' }],
// Negative milliseconds (integer)
['spin -100ms -100ms linear', { duration: '-100ms', delay: '-100ms' }],
['spin -200ms -100ms linear', { duration: '-200ms', delay: '-100ms' }],
['spin -100ms -200ms linear', { duration: '-100ms', delay: '-200ms' }],
// Positive milliseconds (float)
['spin 100.321ms 100.321ms linear', { duration: '100.321ms', delay: '100.321ms' }],
['spin 200.321ms 100.321ms linear', { duration: '200.321ms', delay: '100.321ms' }],
['spin 100.321ms 200.321ms linear', { duration: '100.321ms', delay: '200.321ms' }],
// Negative milliseconds (float)
['spin -100.321ms -100.321ms linear', { duration: '-100.321ms', delay: '-100.321ms' }],
['spin -200.321ms -100.321ms linear', { duration: '-200.321ms', delay: '-100.321ms' }],
['spin -100.321ms -200.321ms linear', { duration: '-100.321ms', delay: '-200.321ms' }],
])('should be possible to parse "%s" into %o', (input, { duration, delay }) => {
const parsed = parse(input)
expect(parsed.duration).toEqual(duration)
expect(parsed.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) => {
expect(parse(input).iterationCount).toEqual(iterationCount)
}
)
})
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'],
['100 spin 200s 100s linear', '100'],
['spin 200 200s 100s linear', '200'],
['spin 200s 300 100s linear', '300'],
['spin 200s 100s 400 linear', '400'],
['spin 200s 100s linear 500', '500'],
// 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) => {
expect(parse(input).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 = parse(input)
expect(parsed).toHaveLength(3)
expect(parsed).toEqual([
{ name: 'spin', duration: '1s', timingFunction: 'linear', iterationCount: 'infinite' },
{
name: 'ping',
duration: '1s',
timingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
iterationCount: 'infinite',
},
{
name: 'pulse',
duration: '2s',
timingFunction: 'cubic-bezier(0.4, 0, 0.6)',
iterationCount: 'infinite',
},
])
})
})
describe('randomized crazy big examples', () => {
function reOrder(input, offset = 0) {
return [...input.slice(offset), ...input.slice(0, offset)]
}
it.each(
produce((choose) => {
const direction = choose('normal', 'reverse', 'alternate', 'alternate-reverse')
const playState = choose('running', 'paused')
const fillMode = choose('none', 'forwards', 'backwards', 'both')
const iterationCount = choose('infinite', '1', '100')
const timingFunction = choose(
'linear',
'ease',
'ease-in',
'ease-out',
'ease-in-out',
'cubic-bezier(0, 0, 0.2, 1)',
'steps(4, end)'
)
const name = choose('animation-name-a', 'animation-name-b')
const inputArgs = [direction, playState, fillMode, iterationCount, timingFunction, name]
const orderOffset = choose(...Array(inputArgs.length).keys())
return [
// Input
reOrder(inputArgs, orderOffset).join(' '),
// Output
{
direction,
playState,
fillMode,
iterationCount,
timingFunction,
name,
},
]
})
)('should be possible to parse "%s"', (input, output) => {
expect(parse(input)).toEqual(output)
})
})