test: Implement `setClassIncremental` and `setStyleIncremental` tests.

diff --git a/packages/runtime-vapor/__tests__/dom/prop.spec.ts b/packages/runtime-vapor/__tests__/dom/prop.spec.ts
index dd29281bac8e1d64e2ed9bf1caecaffd3e439f04..a2f49b87599d787abed0be00ee873f16d65b2ab9 100644 (file)
--- a/packages/runtime-vapor/__tests__/dom/prop.spec.ts
+++ b/packages/runtime-vapor/__tests__/dom/prop.spec.ts
@@ -188,9 +188,92 @@ describe('patchProp', () => {
     })
   })
 
-  describe.todo('setClassIncremental', () => {})
+  describe('setClassIncremental', () => {
+    test('should set class', () => {
+      const el = document.createElement('div')
+      // mark as root
+      ;(el as any).$root = true
+      setClass(el, 'foo')
+      expect(el.className).toBe('foo')
+
+      // Should replace previous class set by setClass
+      setClass(el, 'bar')
+      expect(el.className).toBe('bar')
+    })
+
+    test('should coexist with existing classes', () => {
+      const el = document.createElement('div')
+      el.className = 'existing'
+      ;(el as any).$root = true
+
+      setClass(el, 'foo')
+      expect(el.className).toBe('existing foo')
+
+      setClass(el, 'bar')
+      expect(el.className).toBe('existing bar')
+
+      setClass(el, '')
+      expect(el.className).toBe('existing')
+    })
+
+    test('should handle multiple classes', () => {
+      const el = document.createElement('div')
+      ;(el as any).$root = true
+
+      setClass(el, 'foo bar')
+      expect(el.className).toBe('foo bar')
+
+      setClass(el, 'baz')
+      expect(el.className).toBe('baz')
+    })
+  })
+
+  describe('setStyleIncremental', () => {
+    test('should set style', () => {
+      const el = document.createElement('div')
+      ;(el as any).$root = true
+      setStyle(el, 'color: red')
+      expect(el.style.cssText).toBe('color: red;')
 
-  describe.todo('setStyleIncremental', () => {})
+      setStyle(el, 'font-size: 12px')
+      expect(el.style.cssText).toBe('font-size: 12px;')
+    })
+
+    test('should coexist with existing styles', () => {
+      const el = document.createElement('div')
+      el.style.display = 'block'
+      ;(el as any).$root = true
+
+      setStyle(el, 'color: red')
+      expect(el.style.display).toBe('block')
+      expect(el.style.color).toBe('red')
+
+      setStyle(el, 'font-size: 12px')
+      expect(el.style.display).toBe('block')
+      expect(el.style.fontSize).toBe('12px')
+      expect(el.style.color).toBe('')
+    })
+
+    test('should set style with object', () => {
+      const el = document.createElement('div')
+      ;(el as any).$root = true
+      setStyle(el, { color: 'red' })
+      expect(el.style.cssText).toBe('color: red;')
+
+      setStyle(el, { fontSize: '12px' })
+      expect(el.style.cssText).toBe('font-size: 12px;')
+    })
+
+    test('should remove style', () => {
+      const el = document.createElement('div')
+      ;(el as any).$root = true
+      setStyle(el, 'color: red')
+      expect(el.style.cssText).toBe('color: red;')
+
+      setStyle(el, '')
+      expect(el.style.cssText).toBe('')
+    })
+  })
 
   describe('setAttr', () => {
     test('should set attribute', () => {