1- import { normalizeClass , parseStringStyle } from '../src'
1+ import {
2+ normalizeClass ,
3+ normalizeProps ,
4+ normalizeStyle ,
5+ parseStringStyle ,
6+ stringifyStyle ,
7+ } from '../src'
28
39describe ( 'normalizeClass' , ( ) => {
410 test ( 'handles undefined correctly' , ( ) => {
@@ -15,6 +21,11 @@ describe('normalizeClass', () => {
1521 )
1622 } )
1723
24+ test ( 'handles string containing spaces correctly' , ( ) => {
25+ expect ( normalizeClass ( 'foo1 ' ) ) . toEqual ( 'foo1' )
26+ expect ( normalizeClass ( [ 'foo ' , ' baz ' ] ) ) . toEqual ( 'foo baz' )
27+ } )
28+
1829 test ( 'handles empty array correctly' , ( ) => {
1930 expect ( normalizeClass ( [ ] ) ) . toEqual ( '' )
2031 } )
@@ -92,3 +103,132 @@ describe('normalizeClass', () => {
92103 ` )
93104 } )
94105} )
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