Test loading indicator component for ReactJS

PendingData-test.js

/** @jsx React.DOM */

jest.dontMock('../components/pendingData.jsx');

describe('PendingData', function() {
    
    var React = require('react/addons');
    var PendingData = require('../components/pendingData.jsx');
    
    var TestUtils = React.addons.TestUtils;
    
    var slowPendingData = TestUtils.renderIntoDocument(
        <PendingData waitFor={null}>data loaded</PendingData>
    );
    
    it('starts out empty', function() {
        expect(slowPendingData.state.showLoading).toBeFalsy();
        expect(slowPendingData.state.dataLoaded).toBeFalsy();
    });
    
    it('shows loading indicator after 500 ms', function() {
        setTimeout(function() { 
            expect(slowPendingData.state.showLoading).toBeTruthy();
            expect(slowPendingData.state.dataLoaded).toBeFalsy();
        }, 500);
    });
    
    it('shows contents when data arrives', function() {
        slowPendingData.setProps({ waitFor: true }, function() {
            expect(slowPendingData.state.showLoading).toBeFalsy();
            expect(slowPendingData.state.dataLoaded).toBeTruthy();
            
            var span = TestUtils.findRenderedDOMComponentWithTag(slowPendingData, 'span');
            expect(span.getDOMNode().textContent).toEqual('data loaded');
            
        });
    });
    
    var quickPendingData = TestUtils.renderIntoDocument(
        <PendingData>data loaded</PendingData>
    );
    
    it('fills in data immediately (quick response)', function() {
        setTimeout(function() { 
            expect(quickPendingData.state.showLoading).toBeFalsy();
            expect(quickPendingData.state.dataLoaded).toBeTruthy();
            
            var span = TestUtils.findRenderedDOMComponentWithTag(quickPendingData, 'span');
            expect(span.getDOMNode().textContent).toEqual('data loaded');
        }, 1); // the state isn't set immediately so maybe waiting 1ms is okay? 
    });

});