Skip to content

Commit e231041

Browse files
codepunktcodepunkt
committed
Large refactoring
1 parent 9971cf1 commit e231041

File tree

10 files changed

+661
-746
lines changed

10 files changed

+661
-746
lines changed

‎src/__tests__/__snapshots__/index.test.js.snap‎

Lines changed: 246 additions & 462 deletions
Large diffs are not rendered by default.

‎src/__tests__/index.test.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,13 @@ describe('css-spring', () => {
3232
'padding-left': '-50rem',
3333
opacity: true,
3434
'margin-right': '0em',
35+
border: '1px solid #f00',
3536
},
3637
{
3738
'padding-left': '50px',
3839
opacity: 1,
3940
'margin-right': '127em',
41+
border: '10px solid #f00',
4042
},
4143
{
4244
preset: 'gentle',

‎src/__tests__/parse.test.js‎

Lines changed: 66 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,76 @@
1-
import { getAnimatableProps } from '../parse'
1+
import {
2+
combine,
3+
parseStyles,
4+
parseValues,
5+
split,
6+
} from '../parse'
27

3-
describe('getAnimatableProps', () => {
4-
test('omits keys that do not exist in both startProps and endProps', () => {
5-
const animatableProps = getAnimatableProps(
6-
{ left: '0px', opacity: 1, foo: 'bar' },
7-
{ left: '20px', opacity: 0, baz: 'qux' },
8-
)
9-
expect(Object.keys(animatableProps)).toEqual([ 'left', 'opacity' ])
8+
describe('parse', () => {
9+
describe('combine', () => {
10+
test('returns value for unknown properties', () => {
11+
expect(combine('foo', 'bar')).toEqual('bar')
12+
})
13+
test('returns value for non-array values', () => {
14+
expect(combine('border', 'bar')).toEqual('bar')
15+
})
16+
test('returns combined value for array values', () => {
17+
expect(combine('border', [ '1px', 'solid', '#f00' ])).toEqual('1px solid #f00')
18+
})
1019
})
1120

12-
test('omits keys whose values are not matched by numeric regexp', () => {
13-
const animatableProps = getAnimatableProps(
14-
{ left: '0px', opacity: 1, foo: true },
15-
{ left: '20px', opacity: 0, foo: 20 },
16-
)
17-
expect(Object.keys(animatableProps)).toEqual([ 'left', 'opacity' ])
21+
describe('parseStyles', () => {
22+
test('only parses properties that exist in both start and end styles', () => {
23+
expect(
24+
parseStyles({ margin: '0 0 10px 10px' }, { padding: '10px 10px 0 0' })
25+
).toEqual([])
26+
})
27+
test('only parses properties that have the same number of values', () => {
28+
expect(
29+
parseStyles({ margin: '0 0 10px 10px' }, { margin: '10px 0 0' })
30+
).toEqual([])
31+
})
32+
test('only parses properties where every start/end combination can be parsed', () => {
33+
expect(
34+
parseStyles({ margin: '0 0 10px 10px' }, { margin: '10px foo 0 0' })
35+
).toEqual([])
36+
})
37+
test('returns parsed information object', () => {
38+
expect(
39+
parseStyles({ border: '0 solid #f00', opacity: 0 }, { border: '10px solid #f00', opacity: 1 })
40+
).toEqual([
41+
{ prop: 'border', start: 0, end: 10, unit: 'px' },
42+
{ prop: 'border', fixed: 'solid' },
43+
{ prop: 'border', fixed: '#f00' },
44+
{ prop: 'opacity', start: 0, end: 1, unit: '' },
45+
])
46+
})
1847
})
1948

20-
test('omits keys whose units do not match in both startProps and endProps', () => {
21-
const animatableProps = getAnimatableProps(
22-
{ left: '0px', opacity: 1, foo: '20px' },
23-
{ left: '20px', opacity: 0, foo: '20em' },
24-
)
25-
expect(Object.keys(animatableProps)).toEqual([ 'left', 'opacity' ])
49+
describe('parseValues', () => {
50+
test('returns fixed when both values are equal', () => {
51+
expect(parseValues('solid', 'solid')).toEqual({ fixed: 'solid' })
52+
})
53+
test('returns undefined when one of the values is not numeric', () => {
54+
expect(parseValues('solid', '1px')).toEqual(undefined)
55+
expect(parseValues(0, '#f00')).toEqual(undefined)
56+
})
57+
test('returns start, end and unit otherwise', () => {
58+
expect(parseValues('1px', '10px')).toEqual({ start: 1, end: 10, unit: 'px' })
59+
expect(parseValues(0, 1)).toEqual({ start: 0, end: 1, unit: '' })
60+
expect(parseValues(0, '10rem')).toEqual({ start: 0, end: 10, unit: 'rem' })
61+
expect(parseValues('0px', 1)).toEqual({ start: 0, end: 1, unit: 'px' })
62+
})
2663
})
2764

28-
test('returns an object with unit, start and end values for each remaining key', () => {
29-
const animatableProps = getAnimatableProps(
30-
{ left: '0px', opacity: 1 },
31-
{ left: '20px', opacity: 0 },
32-
)
33-
expect(animatableProps).toEqual({
34-
left: { start: 0, end: 20, unit: 'px' },
35-
opacity: { start: 1, end: 0, unit: '' },
65+
describe('split', () => {
66+
test('returns value for unknown properties', () => {
67+
expect(split('foo', 'bar')).toEqual('bar')
68+
})
69+
test('returns value for non-splittable values', () => {
70+
expect(split('border', 'bar')).toEqual('bar')
71+
})
72+
test('returns splitted value otherwise', () => {
73+
expect(split('border', '1px solid #f00')).toEqual([ '1px', 'solid', '#f00' ])
3674
})
3775
})
3876
})

‎src/__tests__/to-string.test.js‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/__tests__/util.test.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import {
2+
addValueToProperty,
3+
appendToKeys,
4+
calculateObsoleteFrames,
5+
calculateObsoleteValues,
6+
getInterpolator,
7+
omitEmptyValues,
8+
toString,
9+
} from '../util'
10+
11+
describe('util', () => {
12+
describe('getInterpolator', () => {
13+
test('returns interpolator method that takes 3 params', () => {
14+
const interpolate = getInterpolator(180, 12)
15+
expect(interpolate.length).toEqual(3)
16+
})
17+
test('interpolator method returns an array of 101 values', () => {
18+
const interpolate = getInterpolator(180, 12)
19+
const values = interpolate(0, 100)
20+
expect(values).toEqual(expect.any(Array))
21+
expect(values.length).toEqual(101)
22+
})
23+
})
24+
25+
describe('addValueToProperty', () => {
26+
test('defaults to empty object', () => {
27+
expect(addValueToProperty({}.foo, 'bar', 'baz'))
28+
.toEqual({ bar: 'baz' })
29+
})
30+
test('adds property besides other properties', () => {
31+
expect(addValueToProperty({ foo: 'bar' }, 'baz', 'qux'))
32+
.toEqual({ foo: 'bar', baz: 'qux' })
33+
})
34+
test('adds value to array with existing values', () => {
35+
expect(addValueToProperty({ foo: 'bar' }, 'foo', 'baz'))
36+
.toEqual({ foo: [ 'bar', 'baz' ]})
37+
})
38+
})
39+
40+
describe('calculateObsoleteValues', () => {
41+
test('calculates the obsolete values', () => {
42+
const data = {
43+
0: { 'margin-left': '0px', border: [ '1px', 'solid', '#f00' ]},
44+
1: { 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
45+
2: { 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
46+
3: { 'margin-left': '2px', border: [ '2px', 'solid', '#f00' ]},
47+
4: { 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
48+
5: { 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
49+
6: { 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
50+
7: { 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
51+
}
52+
53+
expect(calculateObsoleteValues(data)).toEqual({
54+
border: [ 2, 5, 6 ],
55+
'margin-left': [ 4 ],
56+
})
57+
})
58+
})
59+
60+
describe('calculateObsoleteFrames', () => {
61+
test('calculates the obsolete frames', () => {
62+
const data = [
63+
{ 'margin-left': '0px', border: [ '1px', 'solid', '#f00' ]},
64+
{ 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
65+
{ 'margin-left': '1px', border: [ '2px', 'solid', '#f00' ]},
66+
{ 'margin-left': '2px', border: [ '2px', 'solid', '#f00' ]},
67+
{ 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
68+
{ 'margin-left': '2px', border: [ '3px', 'solid', '#f00' ]},
69+
{ 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
70+
{ 'margin-left': '3px', border: [ '3px', 'solid', '#f00' ]},
71+
]
72+
73+
expect(calculateObsoleteFrames(data, 'border')).toEqual([ 2, 5, 6 ])
74+
expect(calculateObsoleteFrames(data, 'margin-left')).toEqual([ 4 ])
75+
})
76+
})
77+
78+
describe('appendToKeys', () => {
79+
test('appends string to every key', () => {
80+
const appended = appendToKeys({ 0: 0, 1: 1, 2: 2 }, '%')
81+
82+
expect(Object.keys(appended))
83+
.toEqual([ '0%', '1%', '2%' ])
84+
})
85+
})
86+
87+
describe('omitEmptyValues', () => {
88+
test('omits empty values', () => {
89+
const omitted = omitEmptyValues({
90+
'0%': { opacity: 0, left: '20px' },
91+
'1%': {},
92+
'100%': { opacity: 1, left: '200px' },
93+
})
94+
95+
expect(Object.keys(omitted))
96+
.toEqual([ '0%', '100%' ])
97+
})
98+
})
99+
100+
describe('toString', () => {
101+
test('returns formatted css string', () => {
102+
const formatted = toString({
103+
'0%': { opacity: 0, left: '20px' },
104+
'100%': { opacity: 1, left: '200px' },
105+
})
106+
107+
expect(formatted)
108+
.toEqual('0%{opacity:0;left:20px;}100%{opacity:1;left:200px;}')
109+
})
110+
})
111+
})

0 commit comments

Comments
 (0)