123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- 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)
- })
|