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

  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

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

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

  state = {
    isPastDelay: false
  };

bruceharris

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

bruceharris

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

bruceharris

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

  state = {
    isPastDelay: false
  };

  componentDidMount () {

bruceharris

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

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