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

Render components when browser is idle

import _Array$from from 'babel-runtime/core-js/array/from';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';
import { renderToString } from 'react-dom/server';
import OnIdle from './index';

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

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

  var wrapper = renderer.create(React.createElement(
    OnIdle,
    rest,
    element
  ));
  var tree = wrapper.toJSON();
  expect(tree).toMatchSnapshot();
  return tree;
};

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

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

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

    expect(renderToString(React.createElement(
      OnIdle,
      { skipSSR: true },
      React.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(renderToString(React.createElement(
      OnIdle,
      { placeholder: React.createElement(Placeholder, null) },
      React.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();
    };
    ReactDOM.render(React.createElement(
      OnIdle,
      { onRender: onRender },
      React.createElement(Delayed, null)
    ), div);
  });

  it('are not mounted immediately', function () {
    var div = document.createElement('div');
    ReactDOM.render(React.createElement(
      OnIdle,
      null,
      React.createElement(Delayed, null)
    ), div);

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

  it('are replaced with placeholder before idle', function () {
    var div = document.createElement('div');
    ReactDOM.render(React.createElement(
      OnIdle,
      { placeholder: React.createElement(Placeholder, null) },
      React.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;

    ReactDOM.render(React.createElement(
      OnIdle,
      { skipSSR: true, placeholder: React.createElement(Placeholder, null) },
      React.createElement(Delayed, null)
    ), div);

    expect(_Array$from(div.childNodes)).toHaveLength(0);
  });
});