diff --git a/packages/runtime-dom/__tests__/modules/attrs.spec.ts b/packages/runtime-dom/__tests__/patchAttrs.spec.ts similarity index 92% rename from packages/runtime-dom/__tests__/modules/attrs.spec.ts rename to packages/runtime-dom/__tests__/patchAttrs.spec.ts index 2a3bad0d..932c4a58 100644 --- a/packages/runtime-dom/__tests__/modules/attrs.spec.ts +++ b/packages/runtime-dom/__tests__/patchAttrs.spec.ts @@ -1,5 +1,5 @@ -import { patchProp } from '../../src/patchProp' -import { xlinkNS } from '../../src/modules/attrs' +import { patchProp } from '../src/patchProp' +import { xlinkNS } from '../src/modules/attrs' describe('runtime-dom: attrs patching', () => { test('xlink attributes', () => { diff --git a/packages/runtime-dom/__tests__/modules/class.spec.ts b/packages/runtime-dom/__tests__/patchClass.spec.ts similarity index 84% rename from packages/runtime-dom/__tests__/modules/class.spec.ts rename to packages/runtime-dom/__tests__/patchClass.spec.ts index d6bfdeca..a784c7d5 100644 --- a/packages/runtime-dom/__tests__/modules/class.spec.ts +++ b/packages/runtime-dom/__tests__/patchClass.spec.ts @@ -1,6 +1,6 @@ -import { patchProp } from '../../src/patchProp' -import { ElementWithTransition } from '../../src/components/Transition' -import { svgNS } from '../../src/nodeOps' +import { patchProp } from '../src/patchProp' +import { ElementWithTransition } from '../src/components/Transition' +import { svgNS } from '../src/nodeOps' describe('runtime-dom: class patching', () => { test('basics', () => { diff --git a/packages/runtime-dom/__tests__/modules/events.spec.ts b/packages/runtime-dom/__tests__/patchEvents.spec.ts similarity index 98% rename from packages/runtime-dom/__tests__/modules/events.spec.ts rename to packages/runtime-dom/__tests__/patchEvents.spec.ts index 3b365e1c..b870a8be 100644 --- a/packages/runtime-dom/__tests__/modules/events.spec.ts +++ b/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)) diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts new file mode 100644 index 00000000..96f3037c --- /dev/null +++ b/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(`
foo
`) + + render(h('div', { innerHTML: 'bar' }), root) + expect(root.innerHTML).toBe(`
bar
`) + 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(`
foo
`) + + render(h('div', { textContent: 'bar' }), root) + expect(root.innerHTML).toBe(`
bar
`) + expect(fn).toHaveBeenCalled() + }) +}) diff --git a/packages/runtime-dom/__tests__/modules/style.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts similarity index 98% rename from packages/runtime-dom/__tests__/modules/style.spec.ts rename to packages/runtime-dom/__tests__/patchStyle.spec.ts index 90fd60f0..c488e51e 100644 --- a/packages/runtime-dom/__tests__/modules/style.spec.ts +++ b/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', () => { diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts index 15f95cca..0b36578e 100644 --- a/packages/runtime-dom/src/modules/props.ts +++ b/packages/runtime-dom/src/modules/props.ts @@ -14,8 +14,10 @@ export function patchDOMProp( parentSuspense: any, unmountChildren: any ) { - if ((key === 'innerHTML' || key === 'textContent') && prevChildren) { - unmountChildren(prevChildren, parentComponent, parentSuspense) + if (key === 'innerHTML' || key === 'textContent') { + if (prevChildren) { + unmountChildren(prevChildren, parentComponent, parentSuspense) + } el[key] = value == null ? '' : value return }