xref: /third_party/weex-loader/deps/weex-styler/test/parse.js (revision 88c88e8e)

var chai = require('chai')
var sinon = require('sinon')
var sinonChai = require('sinon-chai')
var expect = chai.expect
chai.use(sinonChai)

var styler = require('../')

describe('parse', function () {

  it('parse normal style code', function (done) {
    var code = 'html {color: #000000;}\n\n.foo {color: red; background-color: rgba(255,255,255,0.6); -webkit-transform: rotate(90deg); width: 200px; left: 0; right: 0px; border-width: 1pt; font-weight: 100}\n\n.bar {background: red}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle).eql({foo: {color: '#FF0000', backgroundColor: 'rgba(255,255,255,0.6)', WebkitTransform: 'rotate(90deg)', width: '200px', left: 0, right: '0px', borderWidth: '1pt', fontWeight: '100'}, bar: {background: 'red'}})
      expect(data.log).eql([
        {line: 1, column: 1, reason: 'ERROR: Selector `html` is not supported. Weex only support single-classname selector'},
        {line: 3, column: 7, reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
        {line: 3, column: 60, reason: 'WARNING: `-webkit-transform` is not a standard property name (may not be supported)'},
        {line: 5, column: 7, reason: 'WARNING: `background` is not a standard property name (may not be supported), suggest `background-color`'}
      ])
      done()
    })
  })

  it('parse and fix prop value', function (done) {
    var code = '.foo {font-size: 200px;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle).eql({foo: {fontSize: '200px'}})
      done()
    })
  })

  it('parse and ensure number type value', function (done) {
    var code = '.foo {line-height: 40;}\n\n .bar {line-height: 20px;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle).eql({foo: {lineHeight: 40}, bar: {lineHeight: '20px'}})
      done()
    })
  })

  it('handle complex class definition', function (done) {
    var code = '.foo, .bar {font-size: 20;}\n\n .foo {color: #ff5000;}\n\n .bar {color: #000000;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle).eql({
        foo: {fontSize: 20, color: '#ff5000'},
        bar: {fontSize: 20, color: '#000000'}
      })
      done()
    })
  })

  it('handle more complex class definition', function (done) {
    var code = '.foo, .bar {font-size: 20; color: #000000}\n\n .foo, .bar, .baz {color: #ff5000; height: 30;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle).eql({
        foo: {fontSize: 20, color: '#ff5000', height: 30},
        bar: {fontSize: 20, color: '#ff5000', height: 30},
        baz: {color: '#ff5000', height: 30}
      })
      done()
    })
  })

  it('parse transition', function (done) {
    var code = '.foo {transition-property: margin-top; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'}})
      expect(data.jsonStyle.foo).eql({
        transitionDelay: 200,
        transitionDuration: 300,
        transitionProperty: "marginTop",
        transitionTimingFunction: "ease-in"
      })
      expect(data.log).eql([
        {line: 1, column: 40, reason: 'NOTE: property value `300ms` is autofixed to `300`'},
        {line: 1, column: 68, reason: 'NOTE: property value `0.2s` is autofixed to `200`'}
      ])
      done()
    })
  })

  it('parse transition transform', function (done) {
    var code = '.foo {transition-property: transform; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in-out;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'transform', duration: 300, delay: 200, timingFunction: 'ease-in-out'}})
      expect(data.jsonStyle.foo).eql({
        transitionDelay: 200,
        transitionDuration: 300,
        transitionProperty: "transform",
        transitionTimingFunction: "ease-in-out"
      })
      done()
    })
  })

  it('parse multi transition properties', function (done) {
    var code = '.foo {transition-property: margin-top, height; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in-out;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop,height', duration: 300, delay: 200, timingFunction: 'ease-in-out'}})
      expect(data.jsonStyle.foo).eql({
        transitionDelay: 200,
        transitionDuration: 300,
        transitionProperty: "marginTop,height",
        transitionTimingFunction: "ease-in-out"
      })
      done()
    })
  })

  it('parse complex transition', function (done) {
    var code = '.foo {font-size: 20; color: #000000}\n\n .foo, .bar {color: #ff5000; height: 30; transition-property: margin-top; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle['@TRANSITION']).eql({
        foo: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'},
        bar: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'}
      })
      expect(data.jsonStyle.foo).eql({
        fontSize: 20, color: '#ff5000', height: 30,
        transitionDelay: 200,
        transitionDuration: 300,
        transitionProperty: "marginTop",
        transitionTimingFunction: "ease-in"
      })
      expect(data.jsonStyle.bar).eql({
        color: '#ff5000', height: 30,
        transitionDelay: 200,
        transitionDuration: 300,
        transitionProperty: "marginTop",
        transitionTimingFunction: "ease-in"
      })
      expect(data.log).eql([
        {line: 3, column: 75, reason: 'NOTE: property value `300ms` is autofixed to `300`'},
        {line: 3, column: 103, reason: 'NOTE: property value `0.2s` is autofixed to `200`'}
      ])
      done()
    })
  })

  it('parse transition shorthand', function (done) {
    var code = '.foo {font-size: 20; transition: margin-top 500ms ease-in-out 1s}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 500, delay: 1000, timingFunction: 'ease-in-out' }})
      expect(data.jsonStyle.foo).eql({
        fontSize: 20,
        transitionDelay: 1000,
        transitionDuration: 500,
        transitionProperty: "marginTop",
        transitionTimingFunction: "ease-in-out"
      })
      expect(data.log).eql([
        {line: 1, column: 22, reason: 'NOTE: property value `500ms` is autofixed to `500`'},
        {line: 1, column: 22, reason: 'NOTE: property value `1s` is autofixed to `1000`'}
      ])
      done()
    })
  })

  it.skip('override transition shorthand', function (done) {
    var code = '.foo {font-size: 32px; transition: margin-top 500ms ease-in-out 1s; transition-duration: 300ms}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 300, delay: 1000, timingFunction: 'ease-in-out' }})
      expect(data.jsonStyle.foo).eql({
        fontSize: 32,
        transitionDelay: 1000,
        transitionDuration: 300,
        transitionProperty: "marginTop",
        transitionTimingFunction: "ease-in-out"
      })
      done()
    })
  })

  it('parse padding & margin shorthand', function (done) {
    var code = '.foo { padding: 20px; margin: 30px 40; } .bar { margin: 10px 20 30; padding: 10 20px 30px 40;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle.foo).eql({
        paddingTop: '20px',
        paddingRight: '20px',
        paddingBottom: '20px',
        paddingLeft: '20px',
        marginTop: '30px',
        marginRight: 40,
        marginBottom: '30px',
        marginLeft: 40
      })
      expect(data.jsonStyle.bar).eql({
        paddingTop: 10,
        paddingRight: '20px',
        paddingBottom: '30px',
        paddingLeft: 40,
        marginTop: '10px',
        marginRight: 20,
        marginBottom: 30,
        marginLeft: 20
      })
      done()
    })
  })

  it('override padding & margin shorthand', function (done) {
    var code = '.foo { padding: 20px; padding-left: 30px; } .bar { margin: 10px 20; margin-bottom: 30px;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle.foo).eql({
        paddingTop: '20px',
        paddingRight: '20px',
        paddingBottom: '20px',
        paddingLeft: '30px'
      })
      expect(data.jsonStyle.bar).eql({
        marginTop: '10px',
        marginRight: 20,
        marginBottom: '30px',
        marginLeft: 20
      })
      done()
    })
  })

  it('handle pseudo class', function (done) {
    var code = '.class-a {color: #0000ff;} .class-a:last-child:focus {color: #ff0000;}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle).eql({
        'class-a': {
          color: '#0000ff',
          'color:last-child:focus': '#ff0000'
        }
      })
      done()
    })
  })

  it('handle iconfont', function (done) {
    var code = '@font-face {font-family: "font-family-name-1"; src: url("font file url 1-1") format("truetype");} @font-face {font-family: "font-family-name-2"; src: url("font file url 2-1") format("truetype"), url("font file url 2-2") format("woff");}'
    styler.parse(code, function (err, data) {
      expect(err).is.undefined
      expect(data).is.an.object
      expect(data.jsonStyle).eql({
        '@FONT-FACE': [
          {fontFamily: 'font-family-name-1', src: 'url("font file url 1-1") format("truetype")'},
          {fontFamily: 'font-family-name-2', src: 'url("font file url 2-1") format("truetype"), url("font file url 2-2") format("woff")'}
        ]
      })
      done()
    })
  })

  it('handle syntax error', function (done) {
    var code = 'asdf'
    styler.parse(code, function (err, data) {
      expect(err).is.an.array
      expect(err[0].toString()).eql('Error: undefined:1:5: missing \'{\'')
      expect(err[0].reason).eql('missing \'{\'')
      expect(err[0].filename).eql(undefined)
      expect(err[0].line).eql(1)
      expect(err[0].column).eql(5)
      expect(err[0].source).eql('')
      expect(data.log).eql([{line: 1, column: 5, reason: 'ERROR: undefined:1:5: missing \'{\''}])
      done()
    })
  })
})