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('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) })