Adding Tests After to Messy Legacy Code Looks Ugly. TDD should have been a First Class Citizen

test.after.spec.js

/*
  Before we venture on trying to refactor a 1500 line React Container that's a mess, we have to add some high level
  unit tests to give us some kind of confidence during small refactorings.
  
  If we had TDD'd this originally, it wouldn't have been a 1500 line container and instead we'd have a bunch of nice little
  simple tests, and our code would have been extremely modular, unlike this legacy container
  
  Because this container is doing too much, we end up also having to mock a ton of shit, that we'd otherwise not need to 
  do if we had TDD'd this because our modules would be super small, therefore tests woudld be 10x simpler and testing very
  small pieces of behavior.  Here, we've had to mock (dummy) several collaborators with arrow functions becasue the code we're testing at a high level
  is a TON, meaning the code we're testing at the lower level is tangled up in many calls down the React tree down many
  other children, etc.  If this container was smaller, and we had extracted similiar behavior into their own containers, 
  separate methods for cleaner code, etc. life would have been so much simpler wouldn't it?
  
  These tests may not look "bad" to the average joe but were as simple as I could get them considering the tangled 
  mess of production code.  Tests should be much much easier to read, and shouldn't have to be mocking so many collaborators
  or stub so many values like we did here:
  
          breakpoint="site-web"
          setOverlay={() => ''}
          overlay=""
          renderInfoInDetail={() => {}}
          getUseUtagGlobal={() => {}}
          pageViewEvent={() => {}}
          AccessEnablerUrl=""
          
  Test Conventions
    - I use "Successful" describes to group my positive tests
    - I use "Unsuccessful" describes to group my negative tests
*/
import { createStore, expect, shallow, mount, Provider, React } from 'test/test.helpers';
import Live from 'app/screens/Live/index';
import Error500 from 'app/screens/Error500/index';
import Error404 from 'app/screens/Error404/index';
import { OVERLAY_POPUP } from 'helpers/FilterHelper';

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

  describe('Successful', () => {
    it('renders a loader when no panels exist', () => {
      const store = createStore(reducers, {}),
            liveScreen = shallow(<Live setOverlay={() => {}} store={store} />),
            loader = liveScreen.dive().dive().find('.ft-loader');

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

    it('renders a location pop-up', () => {
      const store = createStore(reducers, { live: { panels: [{}] } }),
            panels = { member: [{}] },
            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);
    });
  });

  describe('Unsuccessful', () => {
    it('renders errors for error codes', () => {
      const errors = [{ 404: Error404 }, { 500: Error500 }];
      let errorCode, errorComponent, store, liveScreen;

      errors.forEach((error) => {
        errorCode = parseInt(Object.keys(error)[0]);
        errorComponent = error[errorCode];

        store = createStore(reducers, { live: { errors: errorCode } });
        liveScreen = shallow(<Live setOverlay={() => {}} store={store} />);
        const renderedError = liveScreen.dive().dive().find('.ft-error');

        expect(renderedError.type()).to.equal(errorComponent);
      });
    });

    it('does not render location pop-up when overlay type is not a popup', () => {
      const store = createStore(reducers, { live: { panels: [{}] } }),
            panels = { member: [{}] },
            liveScreen = mount(<Provider store={createStore(reducers, { live: { panels } })}>
       
        <Live
          breakpoint="site-web"
          setOverlay={() => ''}
          overlay=""
          renderInfoInDetail={() => {}}
          getUseUtagGlobal={() => {}}
          pageViewEvent={() => {}}
          AccessEnablerUrl=""
        />
      </Provider>);

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

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