|
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' |
2 | 9 |
|
3 | 10 | describe('normalizeClass', () => {
|
4 | 11 | test('handles string correctly', () => {
|
5 | 12 | expect(normalizeClass('foo')).toEqual('foo')
|
| 13 | + expect(normalizeClass('foo1 ')).toEqual('foo1') |
6 | 14 | })
|
7 | 15 |
|
8 | 16 | test('handles array correctly', () => {
|
9 |
| - expect(normalizeClass(['foo', undefined, true, false, 'bar'])).toEqual( |
| 17 | + expect(normalizeClass(['foo ', undefined, true, false, 'bar'])).toEqual( |
10 | 18 | 'foo bar'
|
11 | 19 | )
|
12 | 20 | })
|
@@ -44,3 +52,182 @@ describe('normalizeClass', () => {
|
44 | 52 | `)
|
45 | 53 | })
|
46 | 54 | })
|
| 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