Example React Integration Tests - mount()

integration-tests-mount-spec.js

/*
  Someone: "But Dave that’s an integration test.  I thought you said integration tests are a scam!!!”
  Dave: "they are for the most part.  And my preference is not to focus or start on those first, those come after you TDD
        a feature (after you have TDD, micro tests are done).  And... I find it usually not necessary to tack on 
        integration tests...when I do they're only a handful.  BUT when you have legacy code that’s a mess and 
        not decoupled and has NO coverage, that’s sometimes the first test you have to write on that kind of code…so 
        that you can have _some_ confidence when you start making little refactorings to start breaking it down”
*/
import { createStore, expect, mount, Provider, React } from 'test/test.helpers';
import Live from 'app/screens/Live/index';
import { OVERLAY_POPUP } from 'helpers/FilterHelper';
import { Helmet } from 'react-helmet';

describe('Live Screen', () => {
  let panels,
    store;
  const reducers = require('../../../../config/reducers').default;
  global.AccessEnablerUrl = '';

  beforeEach(() => {
    panels = { member: [{}] };
    store = createStore(reducers, { live: { panels: [{}] } });
  });

  describe('Successful', () => {
    it('renders a location pop-up', () => {
      const liveScreen = mount(<Provider store={createStore(reducers, { live: { panels } })}>
        <Live
          breakpoint="site-web"
          setOverlay={() => OVERLAY_POPUP}
          overlay={OVERLAY_POPUP}
          renderInfoInDetail={() => {}}
          getUseUtagGlobal={() => {}}
          pageViewEvent={() => {}}
          AccessEnablerUrl=""
        />
      </Provider>);

      const popup = liveScreen.find('.ft-location-popup');

      expect(popup).to.have.length(1);
    });

    it('renders a helmet tag for title', () => {
      const data = { live: { panels, seo: { title: 'Test Title' } } },
        liveScreen = mount(
          <Provider store={createStore(reducers, data)}>
            <Live
              breakpoint="site-web"
              setOverlay={() => ''}
              overlay=""
              geoLocationDeclined
              renderInfoInDetail={() => {}}
              getUseUtagGlobal={() => {}}
              pageViewEvent={() => {}}
              AccessEnablerUrl=""
            />
          </Provider>);

      const title = liveScreen.find(Helmet).props(),
        text = title.children[0][0].props.children;

      expect(text).to.equal(data.live.seo.title);
    });
  });

  describe('Unsuccessful', () => {
    it('does not render location pop-up when geo location is declined', () => {
      const liveScreen = mount(<Provider store={createStore(reducers, { live: { panels } })}>
        <Live
          breakpoint="site-web"
          setOverlay={() => ''}
          overlay=""
          geoLocationDeclined
          renderInfoInDetail={() => {}}
          getUseUtagGlobal={() => {}}
          pageViewEvent={() => {}}
          AccessEnablerUrl=""
        />
      </Provider>);

      const popup = liveScreen.find('.ft-location-popup');

      expect(popup).to.have.length(0);
    });

    it('does not render a helmet tag when no seo data exists', () => {
      const data = { live: { panels } },
        liveScreen = mount(
          <Provider store={createStore(reducers, data)}>
            <Live
              breakpoint="site-web"
              setOverlay={() => ''}
              overlay=""
              geoLocationDeclined
              renderInfoInDetail={() => {}}
              getUseUtagGlobal={() => {}}
              pageViewEvent={() => {}}
              AccessEnablerUrl=""
            />
          </Provider>);

      const tag = liveScreen.find(Helmet).props();

      expect(tag.children[0][0]).to.not.exist;
    });
  });
});