1
- import { normalizeClass , parseStringStyle } from '../src'
1
+ import {
2
+ normalizeClass ,
3
+ normalizeProps ,
4
+ normalizeStyle ,
5
+ parseStringStyle ,
6
+ stringifyStyle ,
7
+ } from '../src'
2
8
3
9
describe ( 'normalizeClass' , ( ) => {
4
10
test ( 'handles undefined correctly' , ( ) => {
@@ -15,6 +21,11 @@ describe('normalizeClass', () => {
15
21
)
16
22
} )
17
23
24
+ test ( 'handles string containing spaces correctly' , ( ) => {
25
+ expect ( normalizeClass ( 'foo1 ' ) ) . toEqual ( 'foo1' )
26
+ expect ( normalizeClass ( [ 'foo ' , ' baz ' ] ) ) . toEqual ( 'foo baz' )
27
+ } )
28
+
18
29
test ( 'handles empty array correctly' , ( ) => {
19
30
expect ( normalizeClass ( [ ] ) ) . toEqual ( '' )
20
31
} )
@@ -92,3 +103,132 @@ describe('normalizeClass', () => {
92
103
` )
93
104
} )
94
105
} )
106
+
107
+ describe ( 'normalizeStyle' , ( ) => {
108
+ test ( 'handles string correctly' , ( ) => {
109
+ expect ( normalizeStyle ( 'foo' ) ) . toEqual ( 'foo' )
110
+ } )
111
+
112
+ test ( 'handles array correctly' , ( ) => {
113
+ const style : any = normalizeStyle ( [
114
+ `border: 1px solid transparent;
115
+ background: linear-gradient(white, white) padding-box,
116
+ repeating-linear-gradient(
117
+ -45deg,
118
+ #ccc 0,
119
+ #ccc 0.5em,
120
+ white 0,
121
+ white 0.75em
122
+ );` ,
123
+ ] )
124
+
125
+ expect ( style . border ) . toEqual ( '1px solid transparent' )
126
+
127
+ expect ( style . background ) . toEqual ( `linear-gradient(white, white) padding-box,
128
+ repeating-linear-gradient(
129
+ -45deg,
130
+ #ccc 0,
131
+ #ccc 0.5em,
132
+ white 0,
133
+ white 0.75em
134
+ )` )
135
+ } )
136
+
137
+ test ( 'handles object correctly' , ( ) => {
138
+ const styleObj = {
139
+ border : '1px solid transparent' ,
140
+ background : `linear-gradient(white, white) padding-box,
141
+ repeating-linear-gradient(
142
+ -45deg,
143
+ #ccc 0,
144
+ #ccc 0.5em,
145
+ white 0,
146
+ white 0.75em
147
+ )` ,
148
+ }
149
+ const style : any = normalizeStyle ( styleObj )
150
+ expect ( style . border ) . toEqual ( styleObj . border )
151
+ expect ( style . background ) . toEqual ( styleObj . background )
152
+ } )
153
+ } )
154
+
155
+ describe ( 'stringifyStyle' , ( ) => {
156
+ test ( 'should return empty string for undefined or string styles' , ( ) => {
157
+ expect ( stringifyStyle ( undefined ) ) . toBe ( '' )
158
+ expect ( stringifyStyle ( '' ) ) . toBe ( '' )
159
+ expect ( stringifyStyle ( 'color: blue;' ) ) . toBe ( '' )
160
+ } )
161
+
162
+ test ( 'should return valid CSS string for normalized style object' , ( ) => {
163
+ const style = {
164
+ color : 'blue' ,
165
+ fontSize : '14px' ,
166
+ backgroundColor : 'white' ,
167
+ opacity : 0.8 ,
168
+ margin : 0 ,
169
+ '--custom-color' : 'red' ,
170
+ }
171
+
172
+ expect ( stringifyStyle ( style ) ) . toBe (
173
+ 'color:blue;font-size:14px;background-color:white;opacity:0.8;margin:0;--custom-color:red;' ,
174
+ )
175
+ } )
176
+
177
+ test ( 'should ignore non-string or non-number values in style object' , ( ) => {
178
+ const style : any = {
179
+ color : 'blue' ,
180
+ fontSize : '14px' ,
181
+ lineHeight : true ,
182
+ padding : null ,
183
+ margin : undefined ,
184
+ }
185
+
186
+ const expected = 'color:blue;font-size:14px;'
187
+ expect ( stringifyStyle ( style ) ) . toBe ( expected )
188
+ } )
189
+ } )
190
+
191
+ describe ( 'normalizeProps' , ( ) => {
192
+ test ( 'should return null when props is null' , ( ) => {
193
+ const props = null
194
+ const result = normalizeProps ( props )
195
+ expect ( result ) . toBeNull ( )
196
+ } )
197
+
198
+ test ( 'should normalize class prop when it is an array' , ( ) => {
199
+ const props = {
200
+ class : [ 'class1' , 'class2' ] ,
201
+ }
202
+ const result = normalizeProps ( props )
203
+ expect ( result ) . toEqual ( {
204
+ class : 'class1 class2' ,
205
+ } )
206
+ } )
207
+
208
+ test ( 'should normalize class prop when it is an object' , ( ) => {
209
+ const props = {
210
+ class : {
211
+ class1 : true ,
212
+ class2 : false ,
213
+ class3 : true ,
214
+ } ,
215
+ }
216
+ const result = normalizeProps ( props )
217
+ expect ( result ) . toEqual ( {
218
+ class : 'class1 class3' ,
219
+ } )
220
+ } )
221
+
222
+ test ( 'should normalize style prop' , ( ) => {
223
+ const props = {
224
+ style : [ 'color: blue' , 'font-size: 14px' ] ,
225
+ }
226
+ const result = normalizeProps ( props )
227
+ expect ( result ) . toEqual ( {
228
+ style : {
229
+ color : 'blue' ,
230
+ 'font-size' : '14px' ,
231
+ } ,
232
+ } )
233
+ } )
234
+ } )
0 commit comments