diff --git a/hooks/test/browser/errorBoundary.test.js b/hooks/test/browser/errorBoundary.test.js index 0e7de2f6253..fa4c443d42b 100644 --- a/hooks/test/browser/errorBoundary.test.js +++ b/hooks/test/browser/errorBoundary.test.js @@ -1,6 +1,6 @@ -import { createElement, render } from 'preact'; +import { Fragment, createElement, render } from 'preact'; import { setupScratch, teardown } from '../../../test/_util/helpers'; -import { useErrorBoundary, useLayoutEffect } from 'preact/hooks'; +import { useErrorBoundary, useLayoutEffect, useState } from 'preact/hooks'; import { setupRerender } from 'preact/test-utils'; /** @jsx createElement */ diff --git a/test/browser/render.test.js b/test/browser/render.test.js index 6dab0019ab5..4367681d91f 100644 --- a/test/browser/render.test.js +++ b/test/browser/render.test.js @@ -1,5 +1,5 @@ import { setupRerender } from 'preact/test-utils'; -import { createElement, render, Component, options } from 'preact'; +import { createElement, render, Component, options, Fragment } from 'preact'; import { setupScratch, teardown, @@ -1061,6 +1061,91 @@ describe('render()', () => { expect(scratch.textContent).to.equal('01'); }); + it('should not remove iframe with memoized components', () => { + function renderLeaf(props) { + if (props.text === '') { + return null; + } + + return {props.text}; + } + + const value = [ + { + id: 2, + type: 'paragraph', + children: [{ text: 'hello world.' }] + }, + { + id: 1, + type: 'iframe', + url: 'https://codesandbox.io/embed/sweet-haze-6izou?fontsize=14&hidenavigation=1&theme=dark', + children: [{ text: '' }] + } + ]; + + function renderElement(props) { + if (props.element.type === 'iframe') { + return
{props.children}
; + } + + class MemoizedComponent extends Component { + shouldComponentUpdate(prevProps) { + return prevProps.element.id !== this.props.element.id; + } + + render() { + return renderElement({ + element: this.props.element, + children: this.props.element.children.map(leaf => renderLeaf(leaf)) + }); + } + } + + function Editor({ value }) { + return ( +hello world.
' + ); + + clearLog(); + set({ value: value.filter((_, index) => index !== 0) }); + rerender(); + + expect(scratch.innerHTML).to.equal(''); + expect(getLog()).to.deep.equal(['hello world..remove()']); + }); + it('should not remove iframe', () => { let setState; const Iframe = () => {