test(shared): improve test coverage (#8456)

Co-authored-by: edison <[email protected]>

packages/shared/__tests__/normalizeProp.spec.ts

@@ -1,4 +1,10 @@
-import { normalizeClass, parseStringStyle } from '../src'
+import {
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  parseStringStyle,
+  stringifyStyle,
+} from '../src'
 
 describe('normalizeClass', () => {
   test('handles undefined correctly', () => {
@@ -15,6 +21,11 @@ describe('normalizeClass', () => {
     )
   })
 
+  test('handles string containing spaces correctly', () => {
+    expect(normalizeClass('foo1 ')).toEqual('foo1')
+    expect(normalizeClass(['foo ', ' baz '])).toEqual('foo baz')
+  })
+
   test('handles empty array correctly', () => {
     expect(normalizeClass([])).toEqual('')
   })
@@ -92,3 +103,132 @@ describe('normalizeClass', () => {
     `)
   })
 })
+
+describe('normalizeStyle', () => {
+  test('handles string correctly', () => {
+    expect(normalizeStyle('foo')).toEqual('foo')
+  })
+
+  test('handles array correctly', () => {
+    const style: any = normalizeStyle([
+      `border: 1px solid transparent;
+    background: linear-gradient(white, white) padding-box,
+      repeating-linear-gradient(
+        -45deg,
+        #ccc 0,
+        #ccc 0.5em,
+        white 0,
+        white 0.75em
+      );`,
+    ])
+
+    expect(style.border).toEqual('1px solid transparent')
+
+    expect(style.background).toEqual(`linear-gradient(white, white) padding-box,
+      repeating-linear-gradient(
+        -45deg,
+        #ccc 0,
+        #ccc 0.5em,
+        white 0,
+        white 0.75em
+      )`)
+  })
+
+  test('handles object correctly', () => {
+    const styleObj = {
+      border: '1px solid transparent',
+      background: `linear-gradient(white, white) padding-box,
+      repeating-linear-gradient(
+        -45deg,
+        #ccc 0,
+        #ccc 0.5em,
+        white 0,
+        white 0.75em
+      )`,
+    }
+    const style: any = normalizeStyle(styleObj)
+    expect(style.border).toEqual(styleObj.border)
+    expect(style.background).toEqual(styleObj.background)
+  })
+})
+
+describe('stringifyStyle', () => {
+  test('should return empty string for undefined or string styles', () => {
+    expect(stringifyStyle(undefined)).toBe('')
+    expect(stringifyStyle('')).toBe('')
+    expect(stringifyStyle('color: blue;')).toBe('')
+  })
+
+  test('should return valid CSS string for normalized style object', () => {
+    const style = {
+      color: 'blue',
+      fontSize: '14px',
+      backgroundColor: 'white',
+      opacity: 0.8,
+      margin: 0,
+      '--custom-color': 'red',
+    }
+
+    expect(stringifyStyle(style)).toBe(
+      'color:blue;font-size:14px;background-color:white;opacity:0.8;margin:0;--custom-color:red;',
+    )
+  })
+
+  test('should ignore non-string or non-number values in style object', () => {
+    const style: any = {
+      color: 'blue',
+      fontSize: '14px',
+      lineHeight: true,
+      padding: null,
+      margin: undefined,
+    }
+
+    const expected = 'color:blue;font-size:14px;'
+    expect(stringifyStyle(style)).toBe(expected)
+  })
+})
+
+describe('normalizeProps', () => {
+  test('should return null when props is null', () => {
+    const props = null
+    const result = normalizeProps(props)
+    expect(result).toBeNull()
+  })
+
+  test('should normalize class prop when it is an array', () => {
+    const props = {
+      class: ['class1', 'class2'],
+    }
+    const result = normalizeProps(props)
+    expect(result).toEqual({
+      class: 'class1 class2',
+    })
+  })
+
+  test('should normalize class prop when it is an object', () => {
+    const props = {
+      class: {
+        class1: true,
+        class2: false,
+        class3: true,
+      },
+    }
+    const result = normalizeProps(props)
+    expect(result).toEqual({
+      class: 'class1 class3',
+    })
+  })
+
+  test('should normalize style prop', () => {
+    const props = {
+      style: ['color: blue', 'font-size: 14px'],
+    }
+    const result = normalizeProps(props)
+    expect(result).toEqual({
+      style: {
+        color: 'blue',
+        'font-size': '14px',
+      },
+    })
+  })
+})