Large refactoring

src/__tests__/index.test.js

@@ -32,11 +32,13 @@ describe('css-spring', () => {
  'padding-left': '-50rem',
  opacity: true,
  'margin-right': '0em',
+ border: '1px solid #f00',
  },
  {
  'padding-left': '50px',
  opacity: 1,
  'margin-right': '127em',
+ border: '10px solid #f00',
  },
  {
  preset: 'gentle',

src/__tests__/parse.test.js

@@ -1,38 +1,76 @@
-import { getAnimatableProps } from '../parse'
+import {
+ combine,
+ parseStyles,
+ parseValues,
+ split,
+} from '../parse'
 
-describe('getAnimatableProps', () => {
- test('omits keys that do not exist in both startProps and endProps', () => {
- const animatableProps = getAnimatableProps(
- { left: '0px', opacity: 1, foo: 'bar' },
- { left: '20px', opacity: 0, baz: 'qux' },
- )
- expect(Object.keys(animatableProps)).toEqual([ 'left', 'opacity' ])
+describe('parse', () => {
+ describe('combine', () => {
+ test('returns value for unknown properties', () => {
+ expect(combine('foo', 'bar')).toEqual('bar')
+ })
+ test('returns value for non-array values', () => {
+ expect(combine('border', 'bar')).toEqual('bar')
+ })
+ test('returns combined value for array values', () => {
+ expect(combine('border', [ '1px', 'solid', '#f00' ])).toEqual('1px solid #f00')
+ })
  })
 
- test('omits keys whose values are not matched by numeric regexp', () => {
- const animatableProps = getAnimatableProps(
- { left: '0px', opacity: 1, foo: true },
- { left: '20px', opacity: 0, foo: 20 },
- )
- expect(Object.keys(animatableProps)).toEqual([ 'left', 'opacity' ])
+ describe('parseStyles', () => {
+ test('only parses properties that exist in both start and end styles', () => {
+ expect(
+ parseStyles({ margin: '0 0 10px 10px' }, { padding: '10px 10px 0 0' })
+ ).toEqual([])
+ })
+ test('only parses properties that have the same number of values', () => {
+ expect(
+ parseStyles({ margin: '0 0 10px 10px' }, { margin: '10px 0 0' })
+ ).toEqual([])
+ })
+ test('only parses properties where every start/end combination can be parsed', () => {
+ expect(
+ parseStyles({ margin: '0 0 10px 10px' }, { margin: '10px foo 0 0' })
+ ).toEqual([])
+ })
+ test('returns parsed information object', () => {
+ expect(
+ parseStyles({ border: '0 solid #f00', opacity: 0 }, { border: '10px solid #f00', opacity: 1 })
+ ).toEqual([
+ { prop: 'border', start: 0, end: 10, unit: 'px' },
+ { prop: 'border', fixed: 'solid' },
+ { prop: 'border', fixed: '#f00' },
+ { prop: 'opacity', start: 0, end: 1, unit: '' },
+ ])
+ })
  })
 
- test('omits keys whose units do not match in both startProps and endProps', () => {
- const animatableProps = getAnimatableProps(
- { left: '0px', opacity: 1, foo: '20px' },
- { left: '20px', opacity: 0, foo: '20em' },
- )
- expect(Object.keys(animatableProps)).toEqual([ 'left', 'opacity' ])
+ describe('parseValues', () => {
+ test('returns fixed when both values are equal', () => {
+ expect(parseValues('solid', 'solid')).toEqual({ fixed: 'solid' })
+ })
+ test('returns undefined when one of the values is not numeric', () => {
+ expect(parseValues('solid', '1px')).toEqual(undefined)
+ expect(parseValues(0, '#f00')).toEqual(undefined)
+ })
+ test('returns start, end and unit otherwise', () => {
+ expect(parseValues('1px', '10px')).toEqual({ start: 1, end: 10, unit: 'px' })
+ expect(parseValues(0, 1)).toEqual({ start: 0, end: 1, unit: '' })
+ expect(parseValues(0, '10rem')).toEqual({ start: 0, end: 10, unit: 'rem' })
+ expect(parseValues('0px', 1)).toEqual({ start: 0, end: 1, unit: 'px' })
+ })
  })
 
- test('returns an object with unit, start and end values for each remaining key', () => {
- const animatableProps = getAnimatableProps(
- { left: '0px', opacity: 1 },
- { left: '20px', opacity: 0 },
- )
- expect(animatableProps).toEqual({
- left: { start: 0, end: 20, unit: 'px' },
- opacity: { start: 1, end: 0, unit: '' },
+ describe('split', () => {
+ test('returns value for unknown properties', () => {
+ expect(split('foo', 'bar')).toEqual('bar')
+ })
+ test('returns value for non-splittable values', () => {
+ expect(split('border', 'bar')).toEqual('bar')
+ })
+ test('returns splitted value otherwise', () => {
+ expect(split('border', '1px solid #f00')).toEqual([ '1px', 'solid', '#f00' ])
  })
  })
 })

src/__tests__/util.test.js

@@ -0,0 +1,111 @@
+import {
+ addValueToProperty,
+ appendToKeys,
+ calculateObsoleteFrames,
+ calculateObsoleteValues,
+ getInterpolator,
+ omitEmptyValues,
+ toString,
+} from '../util'
+
+describe('util', () => {
+ describe('getInterpolator', () => {
+ test('returns interpolator method that takes 3 params', () => {
+ const interpolate = getInterpolator(180, 12)
+ expect(interpolate.length).toEqual(3)
+ })
+ test('interpolator method returns an array of 101 values', () => {
+ const interpolate = getInterpolator(180, 12)
+ const values = interpolate(0, 100)
+ expect(values).toEqual(expect.any(Array))
+ expect(values.length).toEqual(101)
+ })
+ })
+
+ describe('addValueToProperty', () => {
+ test('defaults to empty object', () => {
+ expect(addValueToProperty({}.foo, 'bar', 'baz'))
+ .toEqual({ bar: 'baz' })
+ })
+ test('adds property besides other properties', () => {
+ expect(addValueToProperty({ foo: 'bar' }, 'baz', 'qux'))
+ .toEqual({ foo: 'bar', baz: 'qux' })
+ })
+ test('adds value to array with existing values', () => {
+ expect(addValueToProperty({ foo: 'bar' }, 'foo', 'baz'))
+ .toEqual({ foo: [ 'bar', 'baz' ]})
+ })
+ })
+
+ describe('calculateObsoleteValues', () => {
+ test('calculates the obsolete values', () => {
+ const data = {
+ 0: { 'margin-left': '0px', border: [ '1px', 'solid', '#f00' ]},
+ 1: { 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
+ 2: { 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
+ 3: { 'margin-left': '2px', border: [ '2px', 'solid', '#f00' ]},
+ 4: { 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
+ 5: { 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
+ 6: { 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
+ 7: { 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
+ }
+
+ expect(calculateObsoleteValues(data)).toEqual({
+ border: [ 2, 5, 6 ],
+ 'margin-left': [ 4 ],
+ })
+ })
+ })
+
+ describe('calculateObsoleteFrames', () => {
+ test('calculates the obsolete frames', () => {
+ const data = [
+ { 'margin-left': '0px', border: [ '1px', 'solid', '#f00' ]},
+ { 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
+ { 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
+ { 'margin-left': '2px', border: [ '2px', 'solid', '#f00' ]},
+ { 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
+ { 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
+ { 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
+ { 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
+ ]
+
+ expect(calculateObsoleteFrames(data, 'border')).toEqual([ 2, 5, 6 ])
+ expect(calculateObsoleteFrames(data, 'margin-left')).toEqual([ 4 ])
+ })
+ })
+
+ describe('appendToKeys', () => {
+ test('appends string to every key', () => {
+ const appended = appendToKeys({ 0: 0, 1: 1, 2: 2 }, '%')
+
+ expect(Object.keys(appended))
+ .toEqual([ '0%', '1%', '2%' ])
+ })
+ })
+
+ describe('omitEmptyValues', () => {
+ test('omits empty values', () => {
+ const omitted = omitEmptyValues({
+ '0%': { opacity: 0, left: '20px' },
+ '1%': {},
+ '100%': { opacity: 1, left: '200px' },
+ })
+
+ expect(Object.keys(omitted))
+ .toEqual([ '0%', '100%' ])
+ })
+ })
+
+ describe('toString', () => {
+ test('returns formatted css string', () => {
+ const formatted = toString({
+ '0%': { opacity: 0, left: '20px' },
+ '100%': { opacity: 1, left: '200px' },
+ })
+
+ expect(formatted)
+ .toEqual('0%{opacity:0;left:20px;}100%{opacity:1;left:200px;}')
+ })
+ })
+})