var chai = require('chai') var sinon = require('sinon') var sinonChai = require('sinon-chai') var expect = chai.expect chai.use(sinonChai) var styler = require('../') describe('validate', function () { it('parse normal style code', function (done) { var code = { foo: { color: '#FF0000', width: '200', position: 'sticky', zIndex: 4 } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({foo: {color: '#FF0000', width: 200, position: 'sticky', zIndex: 4}}) expect(data.log).eql([]) done() }) }) it('parse length', function (done) { var code = { foo: { width: '200px', paddingLeft: '300', borderWidth: '1pt', left: '0', right: '0px', marginRight: 'asdf' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({foo: { width: '200px', paddingLeft: 300, borderWidth: '1pt', left: 0, right: '0px' }}) expect(data.log).eql([ {reason: 'ERROR: property value `asdf` is not supported for `margin-right` (only number and pixel values are supported)'} ]) done() }) }) it('parse number', function (done) { var code = { foo: { opacity: '1' }, bar: { opacity: '0.5' }, baz: { opacity: 'a' }, boo: { opacity: '0.5a' }, zero: { opacity: '0' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { opacity: 1 }, bar: { opacity: 0.5 }, baz: {}, boo: {}, zero: { opacity: 0 } }) expect(data.log).eql([ {reason: 'ERROR: property value `a` is not supported for `opacity` (only number is supported)'}, {reason: 'ERROR: property value `0.5a` is not supported for `opacity` (only number is supported)'} ]) done() }) }) it('parse integer', function (done) { var code = { foo: { zIndex: '1' }, bar: { zIndex: '0.5' }, baz: { zIndex: 'a' }, boo: { zIndex: '0.5a' }, zero: { zIndex: '0' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { zIndex: 1 }, bar: {}, baz: {}, boo: {}, zero: { zIndex: 0 } }) expect(data.log).eql([ {reason: 'ERROR: property value `0.5` is not supported for `z-index` (only integer is supported)'}, {reason: 'ERROR: property value `a` is not supported for `z-index` (only integer is supported)'}, {reason: 'ERROR: property value `0.5a` is not supported for `z-index` (only integer is supported)'} ]) done() }) }) it('parse color', function (done) { var code = { foo: { color: '#FF0000', backgroundColor: '#ff0000' }, bar: { color: '#F00', backgroundColor: '#f00' }, baz: { color: 'red', backgroundColor: 'lightpink' }, rgba: { color: 'rgb(23, 0, 255)', backgroundColor: 'rgba(234, 45, 99, .4)' }, transparent: { color: 'transparent', backgroundColor: 'asdf' }, errRgba: { color: 'rgb(266,0,255)', backgroundColor: 'rgba(234,45,99,1.3)' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { color: '#FF0000', backgroundColor: '#ff0000' }, bar: { color: '#FF0000', backgroundColor: '#ff0000' }, baz: { color: '#FF0000', backgroundColor: '#FFB6C1' }, rgba: { color: 'rgb(23,0,255)', backgroundColor: 'rgba(234,45,99,0.4)' }, transparent: { color: 'rgba(0,0,0,0)' }, errRgba: {} }) expect(data.log).eql([ {reason: 'NOTE: property value `#F00` is autofixed to `#FF0000`'}, {reason: 'NOTE: property value `#f00` is autofixed to `#ff0000`'}, {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'}, {reason: 'NOTE: property value `lightpink` is autofixed to `#FFB6C1`'}, {reason: 'ERROR: property value `asdf` is not valid for `background-color`'}, {reason: 'ERROR: property value `rgb(266,0,255)` is not valid for `color`'}, {reason: 'ERROR: property value `rgba(234,45,99,1.3)` is not valid for `background-color`'} ]) done() }) }) it('parse color', function (done) { var code = { foo: { color: '#FF0000', backgroundColor: '#ff0000' }, bar: { color: '#F00', backgroundColor: '#f00' }, baz: { color: 'red', backgroundColor: 'lightpink' }, rgba: { color: 'rgb(23, 0, 255)', backgroundColor: 'rgba(234, 45, 99, .4)' }, transparent: { color: 'transparent', backgroundColor: 'asdf' }, errRgba: { color: 'rgb(266,0,255)', backgroundColor: 'rgba(234,45,99,1.3)' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { color: '#FF0000', backgroundColor: '#ff0000' }, bar: { color: '#FF0000', backgroundColor: '#ff0000' }, baz: { color: '#FF0000', backgroundColor: '#FFB6C1' }, rgba: { color: 'rgb(23,0,255)', backgroundColor: 'rgba(234,45,99,0.4)' }, transparent: { color: 'rgba(0,0,0,0)' }, errRgba: {} }) expect(data.log).eql([ {reason: 'NOTE: property value `#F00` is autofixed to `#FF0000`'}, {reason: 'NOTE: property value `#f00` is autofixed to `#ff0000`'}, {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'}, {reason: 'NOTE: property value `lightpink` is autofixed to `#FFB6C1`'}, {reason: 'ERROR: property value `asdf` is not valid for `background-color`'}, {reason: 'ERROR: property value `rgb(266,0,255)` is not valid for `color`'}, {reason: 'ERROR: property value `rgba(234,45,99,1.3)` is not valid for `background-color`'} ]) done() }) }) it('parse flex-wrap', function (done) { var code = { foo: { flexWrap: 'nowrap' }, bar: { flexWrap: 'wrap' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { flexWrap: 'nowrap' }, bar: { flexWrap: 'wrap' } }) expect(data.log).eql([ {reason: 'NOTE: property value `nowrap` is the DEFAULT value for `flex-wrap` (could be removed)'}, {reason: 'NOTE: the flex-wrap property may have compatibility problem on native'}, ]) done() }) }) it('parse transition-property', function (done) { var code = { foo: { transitionProperty: 'margin-top' }, bar: { transitionProperty: 'height' }, foobar: { transitionProperty: 'margin-top, height' }, baz: { transitionProperty: 'abc' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { transitionProperty: 'marginTop' }, bar: { transitionProperty: 'height' }, foobar: { transitionProperty: 'marginTop,height' }, baz: {} }) expect(data.log).eql([ {reason: 'ERROR: property value `abc` is not supported for `transition-property` (only css property is valid)'} ]) done() }) }) it('parse transition-duration & transition-delay', function (done) { var code = { foo: { transitionDuration: '200ms', transitionDelay: '0.5s' }, bar: { transitionDuration: '200', transitionDelay: 'abc' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { transitionDuration: 200, transitionDelay: 500 }, bar: { transitionDuration: 200 } }) expect(data.log).eql([ {reason: 'NOTE: property value `200ms` is autofixed to `200`'}, {reason: 'NOTE: property value `0.5s` is autofixed to `500`'}, {reason: 'ERROR: property value `abc` is not supported for `transition-delay` (only number of seconds and milliseconds is valid)'} ]) done() }) }) it('parse transition-timing-function', function (done) { var code = { foo: { transitionTimingFunction: 'ease-in-out' }, bar: { transitionTimingFunction: 'cubic-bezier(.88, 1.0, -0.67, 1.37)' }, baz: { transitionTimingFunction: 'abc' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { transitionTimingFunction: 'ease-in-out' }, bar: { transitionTimingFunction: 'cubic-bezier(0.88,1,-0.67,1.37)' }, baz: {} }) expect(data.log).eql([ {reason: 'ERROR: property value `abc` is not supported for `transition-timing-function` (supported values are: `linear`|`ease`|`ease-in`|`ease-out`|`ease-in-out`|`cubic-bezier(n,n,n,n)`)'} ]) done() }) }) it('parse unknown', function (done) { var code = { foo: { background: '#ff0000', abc: '123', def: '456px', ghi: '789pt', AbcDef: '456', abcDef: 'abc' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({ foo: { background: '#ff0000', abc: 123, def: '456px', ghi: '789pt', AbcDef: 456, abcDef: 'abc' } }) expect(data.log).eql([ {reason: 'WARNING: `background` is not a standard property name (may not be supported), suggest `background-color`'}, {reason: 'WARNING: `abc` is not a standard property name (may not be supported)'}, {reason: 'WARNING: `def` is not a standard property name (may not be supported)'}, {reason: 'WARNING: `ghi` is not a standard property name (may not be supported)'}, {reason: 'WARNING: `-abc-def` is not a standard property name (may not be supported)'}, {reason: 'WARNING: `abc-def` is not a standard property name (may not be supported)'} ]) done() }) }) it('parse complex style code', function (done) { var code = { foo: { color: 'red', WebkitTransform: 'rotate(90deg)', width: '200px' } } styler.validate(code, function (err, data) { expect(err).is.undefined expect(data).is.an.object expect(data.jsonStyle).eql({foo: {color: '#FF0000', WebkitTransform: 'rotate(90deg)', width: '200px'}}) expect(data.log).eql([ {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'}, {reason: 'WARNING: `-webkit-transform` is not a standard property name (may not be supported)'} ]) done() }) }) })