react-native/Libraries/Renderer/src/renderers/shared/fiber/__tests__/ReactTopLevelFragment-test.js

A framework for building native apps using React

/**
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @emails react-core
 */

'use strict';

var React;
var ReactNoop;
var ReactFeatureFlags;

// This is a new feature in Fiber so I put it in its own test file. It could
// probably move to one of the other test files once it is official.
describe('ReactTopLevelFragment', function() {
  beforeEach(function() {
    jest.resetModules();
    React = require('React');
    ReactNoop = require('ReactNoop');
    ReactFeatureFlags = require('ReactFeatureFlags');
    ReactFeatureFlags.disableNewFiberFeatures = false;
  });

  it('should render a simple fragment at the top of a component', function() {

    function Fragment() {
      return [<div key="a">Hello</div>, <div key="b">World</div>];
    }
    ReactNoop.render(<Fragment />);
    ReactNoop.flush();

  });

  it('should preserve state when switching from a single child', function() {

    var instance = null;

    class Stateful extends React.Component {
      render() {
        instance = this;
        return <div>Hello</div>;
      }
    }

    function Fragment({ condition }) {
      return condition ? <Stateful key="a" /> :
        [<Stateful key="a" />, <div key="b">World</div>];
    }
    ReactNoop.render(<Fragment />);
    ReactNoop.flush();

    var instanceA = instance;

    expect(instanceA).not.toBe(null);

    ReactNoop.render(<Fragment condition={true} />);
    ReactNoop.flush();

    var instanceB = instance;

    expect(instanceB).toBe(instanceA);

  });

  it('should not preserve state when switching to a nested array', function() {

    var instance = null;

    class Stateful extends React.Component {
      render() {
        instance = this;
        return <div>Hello</div>;
      }
    }

    function Fragment({ condition }) {
      return condition ? <Stateful key="a" /> :
        [[<Stateful key="a" />, <div key="b">World</div>], <div />];
    }
    ReactNoop.render(<Fragment />);
    ReactNoop.flush();

    var instanceA = instance;

    expect(instanceA).not.toBe(null);

    ReactNoop.render(<Fragment condition={true} />);
    ReactNoop.flush();

    var instanceB = instance;

    expect(instanceB).not.toBe(instanceA);

  });

  it('preserves state if an implicit key slot switches from/to null', function() {

    var instance = null;

    class Stateful extends React.Component {
      render() {
        instance = this;
        return <div>World</div>;
      }
    }

    function Fragment({ condition }) {
      return condition ? [null, <Stateful />] :
        [<div>Hello</div>, <Stateful />];
    }
    ReactNoop.render(<Fragment />);
    ReactNoop.flush();

    var instanceA = instance;

    expect(instanceA).not.toBe(null);

    ReactNoop.render(<Fragment condition={true} />);
    ReactNoop.flush();

    var instanceB = instance;

    expect(instanceB).toBe(instanceA);

    ReactNoop.render(<Fragment condition={false} />);
    ReactNoop.flush();

    var instanceC = instance;

    expect(instanceC === instanceA).toBe(true);

  });

  it('should preserve state in a reorder', function() {

    var instance = null;

    class Stateful extends React.Component {
      render() {
        instance = this;
        return <div>Hello</div>;
      }
    }

    function Fragment({ condition }) {
      return condition ? [[<div key="b">World</div>, <Stateful key="a" />]] :
        [[<Stateful key="a" />, <div key="b">World</div>], <div />];
    }
    ReactNoop.render(<Fragment />);
    ReactNoop.flush();

    var instanceA = instance;

    expect(instanceA).not.toBe(null);

    ReactNoop.render(<Fragment condition={true} />);
    ReactNoop.flush();

    var instanceB = instance;

    expect(instanceB).toBe(instanceA);

  });

});