bruceharris

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LoadingIndicator from './components/LoadingIndicator';

class App extends Component {
  state = {
    isLoading: true,
  };

bruceharris

  describe('on unmount', () => {
    it('should clear timeout', () => {
      jest.useFakeTimers();

      const mockTimerValue = 12345;
      setTimeout.mockReturnValue(mockTimerValue);

      const wrapper = mount(
        <LoadingIndicator isLoading={true}>
          <div>ahoy!</div>

bruceharris

  componentWillUnmount() {
    clearTimeout();
  }

bruceharris

  componentWillUnmount() {
    clearTimeout(this._delayTimer);
  }
 

bruceharris

  describe('on unmount', () => {
    it('should clear timeout', () => {
      jest.useFakeTimers();
      const wrapper = mount(
        <LoadingIndicator isLoading={true}>
          <div>ahoy!</div>
        </LoadingIndicator>
      );

      wrapper.unmount();

bruceharris

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

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>
        );

bruceharris

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

bruceharris

export default class LoadingIndicator extends Component {
  static propTypes = {
    isLoading: PropTypes.bool.isRequired,
  };

  state = {
    isPastDelay: false
  };

  componentDidMount () {

bruceharris

  render() {
    if (this.props.isLoading) {
      if (!this.state.isPastDelay) {
        return null;
      }
      return <div>loading...</div>;
    }
    return this.props.children;
  }