bruceharris

  componentDidMount () {
    this._delayTimer = setTimeout(
      () => this.setState({ isPastDelay: true }), 200
    )
  }
 

bruceharris

  state = {
    isPastDelay: false
  };

bruceharris

  describe('when isLoading is true', () => {
    describe('given 200ms have elapsed', () => {
      it('should render loading indicator', () => {
        jest.useFakeTimers();
        const wrapper = mount(
          <LoadingIndicator isLoading={true}>
            <div>ahoy!</div>
          </LoadingIndicator>
        );
        jest.runAllTimers();

bruceharris

  render() {
    if (this.props.isLoading) {
      return null;
    }
    return this.props.children;
  }

bruceharris

  describe('when isLoading is true', () => {
    describe('given 200ms have not yet elapsed', () => {
      it('should render nothing', () => {
        const wrapper = mount(
          <LoadingIndicator isLoading={true}>
            <div>ahoy!</div>
          </LoadingIndicator>
        );
        expect(wrapper.html()).toBe(null);
        wrapper.unmount();

bruceharris

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.

bruceharris

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class LoadingIndicator extends Component {
  render() {
    return this.props.children;
  }
}

LoadingIndicator.propTypes = {

bruceharris

import React from 'react';
import { mount } from 'enzyme';
import LoadingIndicator from './LoadingIndicator'

describe('LoadingIndicator', () => {
  describe('when isLoading is false', () => {
    it('should render children', () => {
      const wrapper = mount(
        <LoadingIndicator isLoading={false}>
          <div>ahoy!</div>

bruceharris

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class LoadingIndicator extends Component {
  render() {
    return null;
  }
}

LoadingIndicator.propTypes = {

bruceharris

// Promise.all is good for executing many promises at once
Promise.all([
  promise1,
  promise2
]);

// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
  if (somethingIsNotRight()) {
    throw new Error("I will be rejected asynchronously!");