• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1var chai = require('chai')
2var sinon = require('sinon')
3var sinonChai = require('sinon-chai')
4var expect = chai.expect
5chai.use(sinonChai)
6
7var styler = require('../')
8
9describe('validate', function () {
10
11  it('parse normal style code', function (done) {
12    var code = {
13      foo: {
14        color: '#FF0000',
15        width: '200',
16        position: 'sticky',
17        zIndex: 4
18      }
19    }
20    styler.validate(code, function (err, data) {
21      expect(err).is.undefined
22      expect(data).is.an.object
23      expect(data.jsonStyle).eql({foo: {color: '#FF0000', width: 200, position: 'sticky', zIndex: 4}})
24      expect(data.log).eql([])
25      done()
26    })
27  })
28
29  it('parse length', function (done) {
30    var code = {
31      foo: {
32        width: '200px',
33        paddingLeft: '300',
34        borderWidth: '1pt',
35        left: '0',
36        right: '0px',
37        marginRight: 'asdf'
38      }
39    }
40    styler.validate(code, function (err, data) {
41      expect(err).is.undefined
42      expect(data).is.an.object
43      expect(data.jsonStyle).eql({foo: {
44        width: '200px',
45        paddingLeft: 300,
46        borderWidth: '1pt',
47        left: 0,
48        right: '0px'
49      }})
50      expect(data.log).eql([
51        {reason: 'ERROR: property value `asdf` is not supported for `margin-right` (only number and pixel values are supported)'}
52      ])
53      done()
54    })
55  })
56
57  it('parse number', function (done) {
58    var code = {
59      foo: {
60        opacity: '1'
61      },
62      bar: {
63        opacity: '0.5'
64      },
65      baz: {
66        opacity: 'a'
67      },
68      boo: {
69        opacity: '0.5a'
70      },
71      zero: {
72        opacity: '0'
73      }
74    }
75    styler.validate(code, function (err, data) {
76      expect(err).is.undefined
77      expect(data).is.an.object
78      expect(data.jsonStyle).eql({
79        foo: {
80          opacity: 1
81        },
82        bar: {
83          opacity: 0.5
84        },
85        baz: {},
86        boo: {},
87        zero: {
88          opacity: 0
89        }
90      })
91      expect(data.log).eql([
92        {reason: 'ERROR: property value `a` is not supported for `opacity` (only number is supported)'},
93        {reason: 'ERROR: property value `0.5a` is not supported for `opacity` (only number is supported)'}
94      ])
95      done()
96    })
97  })
98
99  it('parse integer', function (done) {
100    var code = {
101      foo: {
102        zIndex: '1'
103      },
104      bar: {
105        zIndex: '0.5'
106      },
107      baz: {
108        zIndex: 'a'
109      },
110      boo: {
111        zIndex: '0.5a'
112      },
113      zero: {
114        zIndex: '0'
115      }
116    }
117    styler.validate(code, function (err, data) {
118      expect(err).is.undefined
119      expect(data).is.an.object
120      expect(data.jsonStyle).eql({
121        foo: {
122          zIndex: 1
123        },
124        bar: {},
125        baz: {},
126        boo: {},
127        zero: {
128          zIndex: 0
129        }
130      })
131      expect(data.log).eql([
132        {reason: 'ERROR: property value `0.5` is not supported for `z-index` (only integer is supported)'},
133        {reason: 'ERROR: property value `a` is not supported for `z-index` (only integer is supported)'},
134        {reason: 'ERROR: property value `0.5a` is not supported for `z-index` (only integer is supported)'}
135      ])
136      done()
137    })
138  })
139
140  it('parse color', function (done) {
141    var code = {
142      foo: {
143        color: '#FF0000',
144        backgroundColor: '#ff0000'
145      },
146      bar: {
147        color: '#F00',
148        backgroundColor: '#f00'
149      },
150      baz: {
151        color: 'red',
152        backgroundColor: 'lightpink'
153      },
154      rgba: {
155        color: 'rgb(23, 0, 255)',
156        backgroundColor: 'rgba(234, 45, 99, .4)'
157      },
158      transparent: {
159        color: 'transparent',
160        backgroundColor: 'asdf'
161      },
162      errRgba: {
163        color: 'rgb(266,0,255)',
164        backgroundColor: 'rgba(234,45,99,1.3)'
165      }
166    }
167    styler.validate(code, function (err, data) {
168      expect(err).is.undefined
169      expect(data).is.an.object
170      expect(data.jsonStyle).eql({
171        foo: {
172          color: '#FF0000',
173          backgroundColor: '#ff0000'
174        },
175        bar: {
176          color: '#FF0000',
177          backgroundColor: '#ff0000'
178        },
179        baz: {
180          color: '#FF0000',
181          backgroundColor: '#FFB6C1'
182        },
183        rgba: {
184          color: 'rgb(23,0,255)',
185          backgroundColor: 'rgba(234,45,99,0.4)'
186        },
187        transparent: {
188          color: 'rgba(0,0,0,0)'
189        },
190        errRgba: {}
191      })
192      expect(data.log).eql([
193        {reason: 'NOTE: property value `#F00` is autofixed to `#FF0000`'},
194        {reason: 'NOTE: property value `#f00` is autofixed to `#ff0000`'},
195        {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
196        {reason: 'NOTE: property value `lightpink` is autofixed to `#FFB6C1`'},
197        {reason: 'ERROR: property value `asdf` is not valid for `background-color`'},
198        {reason: 'ERROR: property value `rgb(266,0,255)` is not valid for `color`'},
199        {reason: 'ERROR: property value `rgba(234,45,99,1.3)` is not valid for `background-color`'}
200      ])
201      done()
202    })
203  })
204
205  it('parse color', function (done) {
206    var code = {
207      foo: {
208        color: '#FF0000',
209        backgroundColor: '#ff0000'
210      },
211      bar: {
212        color: '#F00',
213        backgroundColor: '#f00'
214      },
215      baz: {
216        color: 'red',
217        backgroundColor: 'lightpink'
218      },
219      rgba: {
220        color: 'rgb(23, 0, 255)',
221        backgroundColor: 'rgba(234, 45, 99, .4)'
222      },
223      transparent: {
224        color: 'transparent',
225        backgroundColor: 'asdf'
226      },
227      errRgba: {
228        color: 'rgb(266,0,255)',
229        backgroundColor: 'rgba(234,45,99,1.3)'
230      }
231    }
232    styler.validate(code, function (err, data) {
233      expect(err).is.undefined
234      expect(data).is.an.object
235      expect(data.jsonStyle).eql({
236        foo: {
237          color: '#FF0000',
238          backgroundColor: '#ff0000'
239        },
240        bar: {
241          color: '#FF0000',
242          backgroundColor: '#ff0000'
243        },
244        baz: {
245          color: '#FF0000',
246          backgroundColor: '#FFB6C1'
247        },
248        rgba: {
249          color: 'rgb(23,0,255)',
250          backgroundColor: 'rgba(234,45,99,0.4)'
251        },
252        transparent: {
253          color: 'rgba(0,0,0,0)'
254        },
255        errRgba: {}
256      })
257      expect(data.log).eql([
258        {reason: 'NOTE: property value `#F00` is autofixed to `#FF0000`'},
259        {reason: 'NOTE: property value `#f00` is autofixed to `#ff0000`'},
260        {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
261        {reason: 'NOTE: property value `lightpink` is autofixed to `#FFB6C1`'},
262        {reason: 'ERROR: property value `asdf` is not valid for `background-color`'},
263        {reason: 'ERROR: property value `rgb(266,0,255)` is not valid for `color`'},
264        {reason: 'ERROR: property value `rgba(234,45,99,1.3)` is not valid for `background-color`'}
265      ])
266      done()
267    })
268  })
269
270  it('parse flex-wrap', function (done) {
271    var code = {
272      foo: { flexWrap: 'nowrap' },
273      bar: { flexWrap: 'wrap' }
274    }
275    styler.validate(code, function (err, data) {
276      expect(err).is.undefined
277      expect(data).is.an.object
278      expect(data.jsonStyle).eql({
279        foo: { flexWrap: 'nowrap' },
280        bar: { flexWrap: 'wrap' }
281      })
282      expect(data.log).eql([
283        {reason: 'NOTE: property value `nowrap` is the DEFAULT value for `flex-wrap` (could be removed)'},
284        {reason: 'NOTE: the flex-wrap property may have compatibility problem on native'},
285      ])
286      done()
287    })
288  })
289
290  it('parse transition-property', function (done) {
291    var code = {
292      foo: {
293        transitionProperty: 'margin-top'
294      },
295      bar: {
296        transitionProperty: 'height'
297      },
298      foobar: {
299        transitionProperty: 'margin-top, height'
300      },
301      baz: {
302        transitionProperty: 'abc'
303      }
304    }
305    styler.validate(code, function (err, data) {
306      expect(err).is.undefined
307      expect(data).is.an.object
308      expect(data.jsonStyle).eql({
309        foo: {
310          transitionProperty: 'marginTop'
311        },
312        bar: {
313          transitionProperty: 'height'
314        },
315        foobar: {
316          transitionProperty: 'marginTop,height'
317        },
318        baz: {}
319      })
320      expect(data.log).eql([
321        {reason: 'ERROR: property value `abc` is not supported for `transition-property` (only css property is valid)'}
322      ])
323      done()
324    })
325  })
326
327  it('parse transition-duration & transition-delay', function (done) {
328    var code = {
329      foo: {
330        transitionDuration: '200ms',
331        transitionDelay: '0.5s'
332      },
333      bar: {
334        transitionDuration: '200',
335        transitionDelay: 'abc'
336      }
337    }
338    styler.validate(code, function (err, data) {
339      expect(err).is.undefined
340      expect(data).is.an.object
341      expect(data.jsonStyle).eql({
342        foo: {
343          transitionDuration: 200,
344          transitionDelay: 500
345        },
346        bar: {
347          transitionDuration: 200
348        }
349      })
350      expect(data.log).eql([
351        {reason: 'NOTE: property value `200ms` is autofixed to `200`'},
352        {reason: 'NOTE: property value `0.5s` is autofixed to `500`'},
353        {reason: 'ERROR: property value `abc` is not supported for `transition-delay` (only number of seconds and milliseconds is valid)'}
354      ])
355      done()
356    })
357  })
358
359  it('parse transition-timing-function', function (done) {
360    var code = {
361      foo: {
362        transitionTimingFunction: 'ease-in-out'
363      },
364      bar: {
365        transitionTimingFunction: 'cubic-bezier(.88, 1.0, -0.67, 1.37)'
366      },
367      baz: {
368        transitionTimingFunction: 'abc'
369      }
370    }
371    styler.validate(code, function (err, data) {
372      expect(err).is.undefined
373      expect(data).is.an.object
374      expect(data.jsonStyle).eql({
375        foo: {
376          transitionTimingFunction: 'ease-in-out'
377        },
378        bar: {
379          transitionTimingFunction: 'cubic-bezier(0.88,1,-0.67,1.37)'
380        },
381        baz: {}
382      })
383      expect(data.log).eql([
384        {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)`)'}
385      ])
386      done()
387    })
388  })
389
390  it('parse unknown', function (done) {
391    var code = {
392      foo: {
393        background: '#ff0000',
394        abc: '123',
395        def: '456px',
396        ghi: '789pt',
397        AbcDef: '456',
398        abcDef: 'abc'
399      }
400    }
401    styler.validate(code, function (err, data) {
402      expect(err).is.undefined
403      expect(data).is.an.object
404      expect(data.jsonStyle).eql({
405        foo: {
406          background: '#ff0000',
407          abc: 123,
408          def: '456px',
409          ghi: '789pt',
410          AbcDef: 456,
411          abcDef: 'abc'
412        }
413      })
414      expect(data.log).eql([
415        {reason: 'WARNING: `background` is not a standard property name (may not be supported), suggest `background-color`'},
416        {reason: 'WARNING: `abc` is not a standard property name (may not be supported)'},
417        {reason: 'WARNING: `def` is not a standard property name (may not be supported)'},
418        {reason: 'WARNING: `ghi` is not a standard property name (may not be supported)'},
419        {reason: 'WARNING: `-abc-def` is not a standard property name (may not be supported)'},
420        {reason: 'WARNING: `abc-def` is not a standard property name (may not be supported)'}
421      ])
422      done()
423    })
424  })
425
426  it('parse complex style code', function (done) {
427    var code = {
428      foo: {
429        color: 'red',
430        WebkitTransform: 'rotate(90deg)',
431        width: '200px'
432      }
433    }
434    styler.validate(code, function (err, data) {
435      expect(err).is.undefined
436      expect(data).is.an.object
437      expect(data.jsonStyle).eql({foo: {color: '#FF0000', WebkitTransform: 'rotate(90deg)', width: '200px'}})
438      expect(data.log).eql([
439        {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
440        {reason: 'WARNING: `-webkit-transform` is not a standard property name (may not be supported)'}
441      ])
442      done()
443    })
444  })
445})
446