diff --git a/test/browser/fragments.test.js b/test/browser/fragments.test.js
index def769683a..f04a80d3a7 100644
--- a/test/browser/fragments.test.js
+++ b/test/browser/fragments.test.js
@@ -646,7 +646,7 @@ describe('Fragment', () => {
expect(scratch.innerHTML).to.equal('
Hello
');
});
- it('should preserver order', () => {
+ it('should preserve order for fragment switching', () => {
let set;
class Foo extends Component {
constructor(props) {
@@ -677,6 +677,79 @@ describe('Fragment', () => {
);
});
+ it('should preserve order for nested fragment switching w/ child return', () => {
+ let set;
+ const Wrapper = ({ children }) => {children};
+ class Foo extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { isLoading: true, data: null };
+ set = this.setState.bind(this);
+ }
+ render(props, { isLoading, data }) {
+ return (
+
+ HEADER
+ {isLoading ? Loading...
: null}
+ {data ? Content: {data}
: null}
+
+ );
+ }
+ }
+
+ render(
+
+
+ ,
+ scratch
+ );
+ expect(scratch.innerHTML).to.equal(
+ 'HEADER
Loading...
'
+ );
+
+ set({ isLoading: false, data: 2 });
+ rerender();
+ expect(scratch.innerHTML).to.equal(
+ 'HEADER
Content: 2
'
+ );
+ });
+
+ it('should preserve order for nested fragment switching', () => {
+ let set;
+ const Wrapper = () => (
+
+
+
+ );
+ class Foo extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { isLoading: true, data: null };
+ set = this.setState.bind(this);
+ }
+ render(props, { isLoading, data }) {
+ return (
+
+ HEADER
+ {isLoading ? Loading...
: null}
+ {data ? Content: {data}
: null}
+
+ );
+ }
+ }
+
+ render(, scratch);
+ expect(scratch.innerHTML).to.equal(
+ 'HEADER
Loading...
'
+ );
+
+ set({ isLoading: false, data: 2 });
+ rerender();
+ expect(scratch.innerHTML).to.equal(
+ 'HEADER
Content: 2
'
+ );
+ });
+
it('should preserve state with reordering in multiple levels', () => {
function Foo({ condition }) {
return condition ? (