Test3.remove()']);
expect(ref).to.have.been.calledOnce;
});
+
+ it('should properly mount and unmount text nodes with placeholders', () => {
+ function App({ show = false }) {
+ return
{show && 'Hello'}
;
+ }
+
+ render(
, scratch);
+ expect(scratch.innerHTML).to.equal('
Hello
');
+
+ render(
, scratch);
+ expect(scratch.innerHTML).to.equal('
');
+ });
});
diff --git a/test/browser/render.test.js b/test/browser/render.test.js
index 96bef10bb0..8ce10b8013 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,
@@ -305,6 +305,28 @@ describe('render()', () => {
expect(scratch.innerHTML).to.equal('Testing, huh! How is it going?');
});
+ it('should render strings delimited by fragments text content', () => {
+ render(
+
+ Foo
+ Bar
+ Baz
+ ,
+ scratch
+ );
+ expect(scratch.innerHTML).to.equal('FooBarBaz');
+
+ render(
+
+ Baz
+ Bar
+ Foo
+ ,
+ scratch
+ );
+ expect(scratch.innerHTML).to.equal('BazBarFoo');
+ });
+
it('should render arrays of mixed elements', () => {
render(getMixedArray(), scratch);
expect(scratch.innerHTML).to.equal(mixedArrayHTML);
@@ -1676,10 +1698,10 @@ describe('render()', () => {
expect(getLog()).to.deep.equal([
'
.appendChild(#text)',
'
1352640.insertBefore(
11,
1)',
- '
111352640.insertBefore(
1,
5)',
- '
113152640.insertBefore(
6,
0)',
- '
113152460.insertBefore(
2,
0)',
- '
113154620.insertBefore(
5,
0)',
+ '
111352640.insertBefore(
3,
1)',
+ '
113152640.insertBefore(
4,
5)',
+ '
113145260.insertBefore(
6,
5)',
+ '
113146520.insertBefore(
2,
5)',
'
.appendChild(#text)',
'
113146250.appendChild(
9)',
'
.appendChild(#text)',
@@ -1813,4 +1835,37 @@ describe('render()', () => {
);
}
});
+
+ it('should correctly transition from multiple children to single text node and back', () => {
+ class Child extends Component {
+ componentDidMount() {}
+ componentWillUnmount() {}
+ render() {
+ return 'Child';
+ }
+ }
+
+ const proto = Child.prototype;
+ sinon.spy(Child.prototype, 'componentDidMount');
+ sinon.spy(Child.prototype, 'componentWillUnmount');
+
+ function App({ textChild = false }) {
+ return
{textChild ? 'Hello' : [, b]}
;
+ }
+
+ render(
, scratch);
+ expect(scratch.innerHTML).to.equal('
Childb
');
+ expect(proto.componentDidMount).to.have.been.calledOnce;
+ expect(proto.componentWillUnmount).to.have.not.been.called;
+
+ render(
, scratch);
+ expect(scratch.innerHTML).to.equal('
Hello
');
+ expect(proto.componentDidMount).to.have.been.calledOnce;
+ expect(proto.componentWillUnmount).to.have.been.calledOnce;
+
+ render(
, scratch);
+ expect(scratch.innerHTML).to.equal('
Childb
');
+ expect(proto.componentDidMount).to.have.been.calledTwice;
+ expect(proto.componentWillUnmount).to.have.been.calledOnce;
+ });
});