text: import React from 'react';
  
  import { shallow, mount } from 'enzyme';
  import { expect } from 'chai';
  import sinon from 'sinon';
  import { describe, it } from 'mocha';
  
  import Spinner from '../app/components/common/Spinner';
  
  // we can import styles as css modules and compare created class names with original ones
  import style from '../app/components/common/styles.styl';
  
  // Shallow Rendering
  // https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md
  describe('Shallow Rendering', () => {
    it('to have one .cube-grid', () => {
      const wrapper = shallow(<Spinner />);
      // here we check the proper class names generated by CSS Modules mechanism
      expect(wrapper.find('.' + style['cube-grid'])).to.have.length(1);
    });
    it('has proper class name', () => {
      const wrapper = shallow(<Spinner />);
      expect(wrapper.find('.' + style['cube-grid'])
        .childAt(3)
        .hasClass(style.cube4))
        .to.equal(true);
    });
  });
  
  // Full DOM Rendering
  // https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md
  describe('Full DOM Rendering', () => {
    it('calls componentDidMount', () => {
      sinon.spy(Spinner.prototype, 'componentDidMount');
      mount(<Spinner />);
      expect(Spinner.prototype.componentDidMount.calledOnce).to.be.true;
      Spinner.prototype.componentDidMount.restore();
    });
    it('allows us to set props', () => {
      const wrapper = mount(<Spinner bar="baz" />);
      expect(wrapper.props().bar).to.equal('baz');
      wrapper.setProps({ bar: 'foo' });
      expect(wrapper.props().bar).to.equal('foo');
    });
  });
  