falcon-styler/test/validate.js

Falcon <style> transformer

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