@modus/react-idle/dist/commonjs/index.spec.js

Render components when browser is idle

'use strict';

var _from = require('babel-runtime/core-js/array/from');

var _from2 = _interopRequireDefault(_from);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactTestRenderer = require('react-test-renderer');

var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);

var _server = require('react-dom/server');

var _index = require('./index');

var _index2 = _interopRequireDefault(_index);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Placeholder = function Placeholder() {
  return _react2.default.createElement(
    'div',
    { className: 'placeholder' },
    'Waiting'
  );
};
var Delayed = function Delayed() {
  return _react2.default.createElement(
    'div',
    { className: 'delayed' },
    'Delayed task'
  );
};

var snapshot = function snapshot(_ref) {
  var element = _ref.element,
      rest = (0, _objectWithoutProperties3.default)(_ref, ['element']);

  var wrapper = _reactTestRenderer2.default.create(_react2.default.createElement(
    _index2.default,
    rest,
    element
  ));
  var tree = wrapper.toJSON();
  expect(tree).toMatchSnapshot();
  return tree;
};

describe('Smoke tests', function () {
  it('renders delayed', function () {
    snapshot({
      element: _react2.default.createElement(Delayed, null)
    });
  });

  it('renders placeholder', function () {
    snapshot({
      placeholder: _react2.default.createElement(Placeholder, null),
      element: _react2.default.createElement(Delayed, null)
    });
  });
});

describe('Server-side rendering', function () {
  it('skips rendering', function () {
    // tell component we are simulating Server Side Rendering
    global.__SSR__ = true;

    expect((0, _server.renderToString)(_react2.default.createElement(
      _index2.default,
      { skipSSR: true },
      _react2.default.createElement(Delayed, null)
    ))).toMatchSnapshot();

    // teardown
    global.__SSR__ = false;
  });

  it('renders just placeholder', function () {
    // tell component we are simulating Server Side Rendering
    global.__SSR__ = true;

    expect((0, _server.renderToString)(_react2.default.createElement(
      _index2.default,
      { placeholder: _react2.default.createElement(Placeholder, null) },
      _react2.default.createElement(Delayed, null)
    ))).toMatchSnapshot();

    // teardown
    global.__SSR__ = false;
  });
});

describe('Children', function () {
  it('are mounted on Render', function (done) {
    var div = document.createElement('div');
    var onRender = function onRender() {
      expect(div.querySelector('.delayed')).toBeInstanceOf(HTMLDivElement);
      done();
    };
    _reactDom2.default.render(_react2.default.createElement(
      _index2.default,
      { onRender: onRender },
      _react2.default.createElement(Delayed, null)
    ), div);
  });

  it('are not mounted immediately', function () {
    var div = document.createElement('div');
    _reactDom2.default.render(_react2.default.createElement(
      _index2.default,
      null,
      _react2.default.createElement(Delayed, null)
    ), div);

    expect(div.querySelector('.delayed')).toBeNull();
  });

  it('are replaced with placeholder before idle', function () {
    var div = document.createElement('div');
    _reactDom2.default.render(_react2.default.createElement(
      _index2.default,
      { placeholder: _react2.default.createElement(Placeholder, null) },
      _react2.default.createElement(Delayed, null)
    ), div);

    expect(div.querySelector('.placeholder')).toBeInstanceOf(HTMLDivElement);
  });

  it('will not render in SSR', function () {
    var div = document.createElement('div');
    global.__SSR__ = true;

    _reactDom2.default.render(_react2.default.createElement(
      _index2.default,
      { skipSSR: true, placeholder: _react2.default.createElement(Placeholder, null) },
      _react2.default.createElement(Delayed, null)
    ), div);

    expect((0, _from2.default)(div.childNodes)).toHaveLength(0);
  });
});