LoginPage.test.jsx

import React from 'react';
import { shallow } from 'enzyme';
import defer from 'defer-promise';

import Analytics from '../../utils/Analytics';
import Router from '../../utils/Router';

import LoginPage from '../LoginPage';

const defaultProps = {};

const setupWrapper = (props = {}) => {
  const wrapper = shallow(
    <LoginPage
      {...defaultProps}
      {...props}
    />
  );
};

describe('<LoginPage />', () => {
  const wrapper = setupWrapper();

  it('should render the login form', () => {
    const loginForm = wrapper.find('[data-test="loginForm"]');
    expect(loginForm.length).toBe(1);
  });

  describe('when the login button is clicked', () => {
    let validateEmail;
    beforeEach(() => {
      validateEmail = jest.mock();
    });
    
    it('should check for a valid email', () => {
      expect(validateEmail).toHaveBeenCalled();
    });

    describe('when the email in invalid', () => {
      beforeEach(() => {
        validateEmail = jest.mock(() => false);
      });

      it('should show a validation error', () => {
        const validationError = wrapper.find('[data-test="emailValidationError"]');
        expect(validationError.length).toBe(1);
      });

    });

    describe('when the email is valid', () => {
      let promise;
      let logUserIn;
      beforeEach(() => {
        promise = defer();
        logUserIn = jest.mock(() => promise);
      });

      it('should try to log the user in', () => {
        expect(logUserIn).toBeCalled();
      });

      it('should show a loading spinner', () => {
        const loadingSpinner = wrapper.find('[data-test="loadingSpinner"]');
        expect(loadingSpinner.length).toBe(1);
      });

      describe('when login succeeds', () => {
        const testUser = { id: 5, authToken: 'super-secret' };
        beforeEach(() => {
          logUserIn.resolve(testUser);
          Analytics.track = jest.mock();
          Router.redirect = jest.mock();
        });

        it('should store the auth token in local storage', () => {
          expect(localStorage.getItem('authToken')).toBe(testUser.authToken);
        });

        it('should log an event in Google Analytics', () => {
          expect(Analytics.track).toBeCalledWith('LOGIN', { userId: testUser.id });
        });

        it('should redirect the user to their NewsFeed', () => {
          expect(Router.redirect).toBeCalledWith(Router.routes.NewsFeed);
        });

      });

      describe('when login fails', () => {
        beforeEach(() => {
          logUserIn.reject();
        });

        it('should hide the loading spinner', () => {
          const loadingSpinner = wrapper.find('[data-test="loadingSpinner"]');
          expect(loadingSpinner.length).toBe(0);
        });

        it('should show an error message', () => {
          const loginErrorMessage = wrapper.find('[data-test="loginErrorMessage"]');
          expect(loginErrorMessage.length).toBe(1);
        });

      });

    });

  });

});