Skip to content

Commit 7ba889d

Browse files
test(shared): improve test coverage
1 parent 020851e commit 7ba889d

File tree

1 file changed

+189
-2
lines changed

1 file changed

+189
-2
lines changed

packages/shared/__tests__/normalizeProp.spec.ts

Lines changed: 189 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
1-
import { normalizeClass, parseStringStyle } from '../src'
1+
import {
2+
normalizeClass,
3+
parseStringStyle,
4+
normalizeStyle,
5+
stringifyStyle,
6+
normalizeProps
7+
} from '../src'
8+
import { expect } from 'vitest'
29

310
describe('normalizeClass', () => {
411
test('handles string correctly', () => {
512
expect(normalizeClass('foo')).toEqual('foo')
13+
expect(normalizeClass('foo1 ')).toEqual('foo1')
614
})
715

816
test('handles array correctly', () => {
9-
expect(normalizeClass(['foo', undefined, true, false, 'bar'])).toEqual(
17+
expect(normalizeClass(['foo ', undefined, true, false, 'bar'])).toEqual(
1018
'foo bar'
1119
)
1220
})
@@ -44,3 +52,182 @@ describe('normalizeClass', () => {
4452
`)
4553
})
4654
})
55+
56+
describe('normalizeStyle', () => {
57+
test('handles string correctly', () => {
58+
expect(normalizeStyle('foo')).toEqual('foo')
59+
})
60+
test('handles array correctly', () => {
61+
const style: any = normalizeStyle([
62+
`border: 1px solid transparent;
63+
background: linear-gradient(white, white) padding-box,
64+
repeating-linear-gradient(
65+
-45deg,
66+
#ccc 0,
67+
#ccc 0.5em,
68+
white 0,
69+
white 0.75em
70+
);`
71+
])
72+
expect(style.border).toEqual('1px solid transparent')
73+
expect(style.background).toEqual(`linear-gradient(white, white) padding-box,
74+
repeating-linear-gradient(
75+
-45deg,
76+
#ccc 0,
77+
#ccc 0.5em,
78+
white 0,
79+
white 0.75em
80+
)`)
81+
})
82+
test('handles object correctly', () => {
83+
const styleObj = {
84+
border: '1px solid transparent',
85+
background: `linear-gradient(white, white) padding-box,
86+
repeating-linear-gradient(
87+
-45deg,
88+
#ccc 0,
89+
#ccc 0.5em,
90+
white 0,
91+
white 0.75em
92+
)`
93+
}
94+
const style: any = normalizeStyle(styleObj)
95+
expect(style.border).toEqual(styleObj.border)
96+
expect(style.background).toEqual(styleObj.background)
97+
})
98+
})
99+
100+
describe('stringifyStyle', () => {
101+
it('should return empty string for undefined or string styles', () => {
102+
expect(stringifyStyle(undefined)).toBe('')
103+
expect(stringifyStyle('')).toBe('')
104+
expect(stringifyStyle('color: blue;')).toBe('')
105+
})
106+
107+
it('should return valid CSS string for normalized style object', () => {
108+
const style = {
109+
color: 'blue',
110+
fontSize: '14px',
111+
backgroundColor: 'white',
112+
opacity: 0.8,
113+
'--custom-color': 'red'
114+
}
115+
116+
expect(stringifyStyle(style)).toBe(
117+
'color:blue;font-size:14px;background-color:white;opacity:0.8;--custom-color:red;'
118+
)
119+
})
120+
121+
it('should ignore non-string or non-number values in style object', () => {
122+
const style: any = {
123+
color: 'blue',
124+
fontSize: '14px',
125+
lineHeight: true,
126+
padding: null,
127+
margin: undefined
128+
}
129+
130+
const expected = 'color:blue;font-size:14px;'
131+
expect(stringifyStyle(style)).toBe(expected)
132+
})
133+
})
134+
135+
describe('normalizeStyle', () => {
136+
it('should normalize an array of styles', () => {
137+
const styles = [
138+
{ color: 'blue' },
139+
'font-size: 14px',
140+
{ backgroundColor: 'white', opacity: 0.5 }
141+
]
142+
143+
const expected = {
144+
color: 'blue',
145+
'font-size': '14px',
146+
backgroundColor: 'white',
147+
opacity: 0.5
148+
}
149+
150+
expect(normalizeStyle(styles)).toEqual(expected)
151+
})
152+
153+
it('should normalize a string array', () => {
154+
const styles = ['color: blue', 'font-size: 14px']
155+
const expected = {
156+
color: 'blue',
157+
'font-size': '14px'
158+
}
159+
expect(normalizeStyle(styles)).toEqual(expected)
160+
})
161+
162+
it('should return the input string style', () => {
163+
const style = 'color: blue; font-size: 14px;'
164+
expect(normalizeStyle(style)).toBe(style)
165+
})
166+
167+
it('should return the input object style', () => {
168+
const style = { color: 'blue', fontSize: 14 }
169+
expect(normalizeStyle(style)).toBe(style)
170+
})
171+
172+
it('should return undefined for unsupported value types', () => {
173+
expect(normalizeStyle(null)).toBeUndefined()
174+
expect(normalizeStyle(123)).toBeUndefined()
175+
})
176+
})
177+
178+
describe('normalizeProps', () => {
179+
test('should return null when props is null', () => {
180+
const props = null
181+
const result = normalizeProps(props)
182+
expect(result).toBeNull()
183+
})
184+
185+
test('should normalize class prop when it is an array', () => {
186+
const props = {
187+
class: ['class1', 'class2']
188+
}
189+
const result = normalizeProps(props)
190+
expect(result).toEqual({
191+
class: 'class1 class2'
192+
})
193+
})
194+
195+
test('should normalize class prop when it is an object', () => {
196+
const props = {
197+
class: {
198+
class1: true,
199+
class2: false,
200+
class3: true
201+
}
202+
}
203+
const result = normalizeProps(props)
204+
expect(result).toEqual({
205+
class: 'class1 class3'
206+
})
207+
})
208+
209+
test('should normalize style prop', () => {
210+
const props = {
211+
style: ['color: blue', 'font-size: 14px']
212+
}
213+
const result = normalizeProps(props)
214+
expect(result).toEqual({
215+
style: {
216+
color: 'blue',
217+
'font-size': '14px'
218+
}
219+
})
220+
})
221+
222+
test('should not modify props when class and style are already normalized', () => {
223+
const props = {
224+
class: 'class1 class2',
225+
style: {
226+
color: 'red',
227+
background: 'blue'
228+
}
229+
}
230+
const result = normalizeProps(props)
231+
expect(result).toEqual(props)
232+
})
233+
})

0 commit comments

Comments
 (0)