@@ -160,62 +160,30 @@ describe('attributes to props', () => {
160
160
161
161
// cssToJs
162
162
describe ( 'style' , ( ) => {
163
- it ( 'parses empty inline style to object' , ( ) => {
164
- expect ( attributesToProps ( { style : '' } ) ) . toEqual ( { style : { } } ) ;
163
+ const propsEmptyStyle = { style : { } } ;
164
+
165
+ it . each ( [ undefined , null ] ) ( 'does not parse invalid value: %s' , style => {
166
+ expect ( attributesToProps ( { style } ) ) . toEqual ( { style } ) ;
165
167
} ) ;
166
168
167
169
it ( 'does not parse CSS comment' , ( ) => {
168
- expect ( attributesToProps ( { style : '/* comment */' } ) ) . toEqual ( {
169
- style : { }
170
- } ) ;
170
+ const style = '/* comment */' ;
171
+ expect ( attributesToProps ( { style } ) ) . toEqual ( propsEmptyStyle ) ;
171
172
} ) ;
172
173
173
- it ( 'parses inline style to object' , ( ) => {
174
- expect (
175
- attributesToProps ( {
176
- style :
177
- 'color: #f00; font-size: 42px; z-index: -1; -moz-border-radius-topright: 10px; background: url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)'
178
- } )
179
- ) . toEqual ( {
180
- style : {
181
- color : '#f00' ,
182
- fontSize : '42px' ,
183
- zIndex : '-1' ,
184
- MozBorderRadiusTopright : '10px' ,
185
- background :
186
- 'url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)'
187
- }
188
- } ) ;
189
-
190
- expect (
191
- attributesToProps ( {
192
- style :
193
- 'border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1;-moz-border-radius-bottomleft:20px'
194
- } )
195
- ) . toEqual ( {
196
- style : {
197
- borderBottomLeftRadius : '1em' ,
198
- borderRightStyle : 'solid' ,
199
- zIndex : '-1' ,
200
- MozBorderRadiusBottomleft : '20px'
201
- }
202
- } ) ;
203
-
204
- expect (
205
- attributesToProps ( {
206
- style : null
207
- } )
208
- ) . toEqual ( {
209
- style : null
210
- } ) ;
174
+ it ( 'parses "" to {}' , ( ) => {
175
+ const style = '' ;
176
+ expect ( attributesToProps ( { style } ) ) . toEqual ( propsEmptyStyle ) ;
177
+ } ) ;
211
178
212
- expect (
213
- attributesToProps ( {
214
- style : undefined
215
- } )
216
- ) . toEqual ( {
217
- style : undefined
218
- } ) ;
179
+ it ( 'parses CSS to JS' , ( ) => {
180
+ const style = `
181
+ color: #f00; font-size: 42px; z-index: -1; -webkit-border-top-right-radius: 10rem; background: url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif);
182
+ /* display: block; */
183
+ --custom-property: #f00;
184
+ border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1;-moz-border-radius-bottomleft:20px'
185
+ ` ;
186
+ expect ( attributesToProps ( { style } ) ) . toMatchSnapshot ( ) ;
219
187
} ) ;
220
188
} ) ;
221
189
0 commit comments