Organise tests

src/__tests__/border.js

@@ -0,0 +1,65 @@
+import transformCss from '..'
+
+it('transforms border shorthand', () => {
+  expect(transformCss([['border', '2px dashed #f00']])).toEqual({
+    borderWidth: 2,
+    borderColor: '#f00',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand in other order', () => {
+  expect(transformCss([['border', '#f00 2px dashed']])).toEqual({
+    borderWidth: 2,
+    borderColor: '#f00',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing color', () => {
+  expect(transformCss([['border', '2px dashed']])).toEqual({
+    borderWidth: 2,
+    borderColor: 'black',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing style', () => {
+  expect(transformCss([['border', '2px #f00']])).toEqual({
+    borderWidth: 2,
+    borderColor: '#f00',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border shorthand missing width', () => {
+  expect(transformCss([['border', '#f00 dashed']])).toEqual({
+    borderWidth: 1,
+    borderColor: '#f00',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing color & width', () => {
+  expect(transformCss([['border', 'dashed']])).toEqual({
+    borderWidth: 1,
+    borderColor: 'black',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing style & width', () => {
+  expect(transformCss([['border', '#f00']])).toEqual({
+    borderWidth: 1,
+    borderColor: '#f00',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border shorthand missing color & style', () => {
+  expect(transformCss([['border', '2px']])).toEqual({
+    borderWidth: 2,
+    borderColor: 'black',
+    borderStyle: 'solid',
+  })
+})

src/__tests__/borderColor.js

@@ -0,0 +1,10 @@
+import transformCss from '..'
+
+it('transforms border color with multiple values', () => {
+  expect(transformCss([['border-color', 'red yellow green blue']])).toEqual({
+    borderTopColor: 'red',
+    borderRightColor: 'yellow',
+    borderBottomColor: 'green',
+    borderLeftColor: 'blue',
+  })
+})

src/__tests__/boxModel.js

@@ -0,0 +1,103 @@
+import transformCss from '..'
+
+it('transforms margin, padding with 1 value', () => {
+  expect(transformCss([['margin', '1px']])).toEqual({
+    marginTop: 1,
+    marginRight: 1,
+    marginBottom: 1,
+    marginLeft: 1,
+  })
+  expect(transformCss([['padding', '1px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 1,
+    paddingBottom: 1,
+    paddingLeft: 1,
+  })
+})
+
+it('transforms margin, padding with 2 values', () => {
+  expect(transformCss([['margin', '1px 2px']])).toEqual({
+    marginTop: 1,
+    marginRight: 2,
+    marginBottom: 1,
+    marginLeft: 2,
+  })
+  expect(transformCss([['padding', '1px 2px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 2,
+    paddingBottom: 1,
+    paddingLeft: 2,
+  })
+})
+
+it('transforms margin, padding with 3 values', () => {
+  expect(transformCss([['margin', '1px 2px 3px']])).toEqual({
+    marginTop: 1,
+    marginRight: 2,
+    marginBottom: 3,
+    marginLeft: 2,
+  })
+  expect(transformCss([['padding', '1px 2px 3px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 2,
+    paddingBottom: 3,
+    paddingLeft: 2,
+  })
+})
+
+it('transforms margin, padding with 4 values', () => {
+  expect(transformCss([['margin', '1px 2px 3px 4px']])).toEqual({
+    marginTop: 1,
+    marginRight: 2,
+    marginBottom: 3,
+    marginLeft: 4,
+  })
+  expect(transformCss([['padding', '1px 2px 3px 4px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 2,
+    paddingBottom: 3,
+    paddingLeft: 4,
+  })
+})
+
+it('transforms margin, allowing unitless zero, percentages', () => {
+  expect(transformCss([['margin', '0 0% 10% 100%']])).toEqual({
+    marginTop: 0,
+    marginRight: '0%',
+    marginBottom: '10%',
+    marginLeft: '100%',
+  })
+  expect(transformCss([['padding', '0 0% 10% 100%']])).toEqual({
+    paddingTop: 0,
+    paddingRight: '0%',
+    paddingBottom: '10%',
+    paddingLeft: '100%',
+  })
+})
+
+it('transforms shorthand and overrides previous values', () => {
+  expect(transformCss([['margin-top', '2px'], ['margin', '1px']])).toEqual({
+    marginTop: 1,
+    marginRight: 1,
+    marginBottom: 1,
+    marginLeft: 1,
+  })
+})
+
+it('transforms border width', () => {
+  expect(transformCss([['border-width', '1px 2px 3px 4px']])).toEqual({
+    borderTopWidth: 1,
+    borderRightWidth: 2,
+    borderBottomWidth: 3,
+    borderLeftWidth: 4,
+  })
+})
+
+it('transforms border radius', () => {
+  expect(transformCss([['border-radius', '1px 2px 3px 4px']])).toEqual({
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 2,
+    borderBottomRightRadius: 3,
+    borderBottomLeftRadius: 4,
+  })
+})

src/__tests__/boxShadow.js

@@ -0,0 +1,83 @@
+import transformCss from '..'
+
+it('transforms box-shadow into shadow- properties', () => {
+  expect(transformCss([['box-shadow', '10px 20px 30px red']])).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 30,
+    shadowColor: 'red',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow without blur-radius', () => {
+  expect(transformCss([['box-shadow', '10px 20px red']])).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'red',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow without color', () => {
+  expect(transformCss([['box-shadow', '10px 20px']])).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'black',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with rgb color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px rgb(100, 100, 100)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'rgb(100, 100, 100)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with rgba color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px rgba(100, 100, 100, 0.5)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'rgba(100, 100, 100, 0.5)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with hsl color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px hsl(120, 100%, 50%)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'hsl(120, 100%, 50%)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with hsla color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px hsla(120, 100%, 50%, 0.7)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'hsla(120, 100%, 50%, 0.7)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow and throws if multiple colors are used', () => {
+  expect(() =>
+    transformCss([['box-shadow', '0 0 0 red yellow green blue']])
+  ).toThrow()
+})
+
+it('transforms box-shadow enforces offset to be present', () => {
+  expect(() => transformCss([['box-shadow', 'red']])).toThrow()
+  expect(() => transformCss([['box-shadow', '10px red']])).toThrow()
+})

src/__tests__/flex.js

@@ -0,0 +1,102 @@
+import transformCss from '..'
+
+it('transforms flex shorthand with 3 values', () => {
+  expect(transformCss([['flex', '1 2 3px']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: 3,
+  })
+})
+
+it('transforms flex shorthand with 3 values in reverse order', () => {
+  expect(transformCss([['flex', '3px 1 2']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: 3,
+  })
+})
+
+it('transforms flex shorthand with 2 values of flex-grow and flex-shrink', () => {
+  expect(transformCss([['flex', '1 2']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: 0,
+  })
+})
+
+it('transforms flex shorthand with 2 values of flex-grow and flex-basis', () => {
+  expect(transformCss([['flex', '2 2px']])).toEqual({
+    flexGrow: 2,
+    flexShrink: 1,
+    flexBasis: 2,
+  })
+})
+
+it('transforms flex shorthand with 2 values of flex-grow and flex-basis (reversed)', () => {
+  expect(transformCss([['flex', '2px 2']])).toEqual({
+    flexGrow: 2,
+    flexShrink: 1,
+    flexBasis: 2,
+  })
+})
+
+it('transforms flex shorthand with 1 value of flex-grow', () => {
+  expect(transformCss([['flex', '2']])).toEqual({
+    flexGrow: 2,
+    flexShrink: 1,
+    flexBasis: 0,
+  })
+})
+
+it('transforms flex shorthand with 1 value of flex-basis', () => {
+  expect(transformCss([['flex', '10px']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 10,
+  })
+})
+
+/*
+A unitless zero that is not already preceded by two flex factors must be interpreted as a flex
+factor. To avoid misinterpretation or invalid declarations, authors must specify a zero
+<‘flex-basis’> component with a unit or precede it by two flex factors.
+*/
+it('transforms flex shorthand with flex-grow/shrink taking priority over basis', () => {
+  expect(transformCss([['flex', '0 1 0']])).toEqual({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 0,
+  })
+})
+
+it('transforms flex shorthand with flex-basis set to auto', () => {
+  expect(transformCss([['flex', '0 1 auto']])).toEqual({
+    flexGrow: 0,
+    flexShrink: 1,
+  })
+})
+
+it('transforms flex shorthand with flex-basis set to auto appearing first', () => {
+  expect(transformCss([['flex', 'auto 0 1']])).toEqual({
+    flexGrow: 0,
+    flexShrink: 1,
+  })
+})
+
+it('transforms flex auto keyword', () => {
+  expect(transformCss([['flex', 'auto']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+})
+
+it('transforms flex none keyword', () => {
+  expect(transformCss([['flex', 'none']])).toEqual({
+    flexGrow: 0,
+    flexShrink: 0,
+  })
+})
+
+it('does not transform invalid flex', () => {
+  expect(() => transformCss([['flex', '1 2px 3']])).toThrow()
+})

src/__tests__/flexFlow.js

@@ -0,0 +1,22 @@
+import transformCss from '..'
+
+it('transforms flexFlow shorthand with two values', () => {
+  expect(transformCss([['flex-flow', 'column wrap']])).toEqual({
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+  })
+})
+
+it('transforms flexFlow shorthand missing flexDirection', () => {
+  expect(transformCss([['flex-flow', 'wrap']])).toEqual({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  })
+})
+
+it('transforms flexFlow shorthand missing flexWrap', () => {
+  expect(transformCss([['flex-flow', 'column']])).toEqual({
+    flexDirection: 'column',
+    flexWrap: 'nowrap',
+  })
+})