refactor: adjust runtime-dom test structure + tests for dom props

packages/runtime-dom/__tests__/patchAttrs.spec.ts

@@ -1,5 +1,5 @@
-import { patchProp } from '../../src/patchProp'
+import { patchProp } from '../src/patchProp'
-import { xlinkNS } from '../../src/modules/attrs'
+import { xlinkNS } from '../src/modules/attrs'
 
 describe('runtime-dom: attrs patching', () => {
   test('xlink attributes', () => {

packages/runtime-dom/__tests__/patchClass.spec.ts

@@ -1,6 +1,6 @@
-import { patchProp } from '../../src/patchProp'
+import { patchProp } from '../src/patchProp'
-import { ElementWithTransition } from '../../src/components/Transition'
+import { ElementWithTransition } from '../src/components/Transition'
-import { svgNS } from '../../src/nodeOps'
+import { svgNS } from '../src/nodeOps'
 
 describe('runtime-dom: class patching', () => {
   test('basics', () => {

packages/runtime-dom/__tests__/patchEvents.spec.ts

@@ -1,4 +1,4 @@
-import { patchProp } from '../../src/patchProp'
+import { patchProp } from '../src/patchProp'
 
 const timeout = () => new Promise(r => setTimeout(r))
 

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -0,0 +1,62 @@
+import { patchProp } from '../src/patchProp'
+import { render, h } from '../src'
+
+describe('runtime-dom: props patching', () => {
+  test('basic', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'id', null, 'foo')
+    expect(el.id).toBe('foo')
+    patchProp(el, 'id', null, null)
+    expect(el.id).toBe('')
+  })
+
+  test('value', () => {
+    const el = document.createElement('input')
+    patchProp(el, 'value', null, 'foo')
+    expect(el.value).toBe('foo')
+    patchProp(el, 'value', null, null)
+    expect(el.value).toBe('')
+    const obj = {}
+    patchProp(el, 'value', null, obj)
+    expect(el.value).toBe(obj.toString())
+    expect((el as any)._value).toBe(obj)
+  })
+
+  test('boolean prop', () => {
+    const el = document.createElement('select')
+    patchProp(el, 'multiple', null, '')
+    expect(el.multiple).toBe(true)
+    patchProp(el, 'multiple', null, null)
+    expect(el.multiple).toBe(false)
+  })
+
+  test('innerHTML unmount prev children', () => {
+    const fn = jest.fn()
+    const comp = {
+      render: () => 'foo',
+      unmounted: fn
+    }
+    const root = document.createElement('div')
+    render(h('div', null, [h(comp)]), root)
+    expect(root.innerHTML).toBe(`<div>foo</div>`)
+
+    render(h('div', { innerHTML: 'bar' }), root)
+    expect(root.innerHTML).toBe(`<div>bar</div>`)
+    expect(fn).toHaveBeenCalled()
+  })
+
+  test('textContent unmount prev children', () => {
+    const fn = jest.fn()
+    const comp = {
+      render: () => 'foo',
+      unmounted: fn
+    }
+    const root = document.createElement('div')
+    render(h('div', null, [h(comp)]), root)
+    expect(root.innerHTML).toBe(`<div>foo</div>`)
+
+    render(h('div', { textContent: 'bar' }), root)
+    expect(root.innerHTML).toBe(`<div>bar</div>`)
+    expect(fn).toHaveBeenCalled()
+  })
+})

packages/runtime-dom/__tests__/patchStyle.spec.ts

@@ -1,4 +1,4 @@
-import { patchProp } from '../../src/patchProp'
+import { patchProp } from '../src/patchProp'
 
 describe(`runtime-dom: style patching`, () => {
   it('string', () => {

packages/runtime-dom/src/modules/props.ts

@@ -14,8 +14,10 @@ export function patchDOMProp(
   parentSuspense: any,
   unmountChildren: any
 ) {
-  if ((key === 'innerHTML' || key === 'textContent') && prevChildren) {
+  if (key === 'innerHTML' || key === 'textContent') {
-    unmountChildren(prevChildren, parentComponent, parentSuspense)
+    if (prevChildren) {
+      unmountChildren(prevChildren, parentComponent, parentSuspense)
+    }
     el[key] = value == null ? '' : value
     return
   }