test/utils/SpinnerContainer.test.js

   1 import React from 'react';
   2 import { ClipLoader } from 'react-spinners';
   3 import { mount } from 'enzyme';
   4
   5 import SpinnerContainer from 'utils/SpinnerContainer.jsx';
   6 import {COLOR_BLUE} from 'utils/GlobalConstants';
   7
   8 describe('SpinnerContainer', () => {
   9   it('render spinner - visible', () => {
  10     const spinner = mount(
  11       <SpinnerContainer loading={true}>
  12         <div className='test-div'>Testing Spinner Child</div>
  13         <div className='test-div'>Testing Spinner Child</div>
  14       </SpinnerContainer>
  15     );
  16     expect(spinner.props().loading).toEqual(true); // check that the props match
  17     expect(spinner.find(ClipLoader)).toHaveLength(1); // ensure the ClipLoader is mounted
  18     expect(spinner.find(ClipLoader).props().color).toEqual(COLOR_BLUE); // ensure spinner is blue
  19     expect(spinner.find(ClipLoader).props().loading).toEqual(true); // ensure spinner is showing
  20     expect(spinner.find('div.spin-content')).toHaveLength(1); // ensure the children are grayed out
  21     expect(spinner.find('div.spin-content').children()).toHaveLength(2); // ensure number of children is accurate
  22   });
  23
  24   it('render spinner - not visible', () => {
  25     const spinner = mount(
  26       <SpinnerContainer loading={false}>
  27         <div className='test-div'>Testing Spinner</div>
  28       </SpinnerContainer>
  29     );
  30     expect(spinner.props().loading).toEqual(false);
  31     expect(spinner.find(ClipLoader)).toHaveLength(1);
  32     expect(spinner.find(ClipLoader).props().loading).toEqual(false); // ensure spinner is not showing
  33     expect(spinner.find('div.spin-content')).toHaveLength(0);
  34   });
  35 })