MetaPhase-Consulting/State-TalentMAP

View on GitHub
src/Containers/Notifications/Notifications.test.jsx

Summary

Maintainability
A
0 mins
Test Coverage
import { shallow } from 'enzyme';
import TestUtils from 'react-dom/test-utils';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import sinon from 'sinon';
import NotificationsContainer, { mapDispatchToProps } from './Notifications';
import { testDispatchFunctions } from '../../testUtilities/testUtilities';

const middlewares = [thunk];
const mockStore = configureStore(middlewares);

describe('NotificationsContainer', () => {
  const props = {
    fetchData: () => {},
    delete: () => {},
    notifications: {},
    isLoading: false,
    hasErrored: false,
    markNotificationIsLoading: false,
    markNotificationHasErrored: false,
  };
  it('is defined', () => {
    const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter>
      <NotificationsContainer {...props}>{() => <div /> }</NotificationsContainer>
    </MemoryRouter></Provider>);
    expect(wrapper).toBeDefined();
  });

  it('calls fetchData on this.getNotifications()', () => {
    const spy = sinon.spy();
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
        fetchData={spy}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );
    wrapper.instance().getNotifications();

    // called once on mount
    sinon.assert.calledTwice(spy);
  });

  it('calls delete on this.delete()', () => {
    const spy = sinon.spy();
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
        delete={spy}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );
    wrapper.instance().delete();
    sinon.assert.calledOnce(spy);
  });

  it('updates state on this.onPageChange()', () => {
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );
    wrapper.instance().onPageChange({ page: 5 });
    expect(wrapper.instance().state.page).toBe(5);
  });

  it('updates state on this.onCheck()', () => {
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );
    wrapper.instance().onCheck(true, { _id: 2 });
    expect(wrapper.instance().state.selectedNotifications.has(2)).toBe(true);
  });

  it('returns the correct value on this.getCheckedValueById()', () => {
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );
    expect(wrapper.instance().getCheckedValueById(2)).toBe(false);
    wrapper.instance().setState({ selectedNotifications: new Set([2]) });
    expect(wrapper.instance().getCheckedValueById(2)).toBe(true);
  });

  it('returns the correct value on this.getCurrentResults()', () => {
    const notifications = { results: [{ id: 1 }] };
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
        notifications={notifications}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );
    expect(wrapper.instance().getCurrentResults()).toEqual(notifications.results);
  });

  it('sets state correctly on this.selectAll()', () => {
    const notifications = { results: [{ id: 1 }, { id: 2 }] };
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
        notifications={notifications}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );
    wrapper.instance().selectAll();
    const { selectedNotifications } = wrapper.instance().state;

    // should add 1 and 2
    expect([...selectedNotifications]).toEqual([1, 2]);

    wrapper.instance().selectAll();
    // should remove 1 and 2
    expect([...selectedNotifications]).toEqual([]);
  });

  it('passes the correct values and config on this.markNotificationsByType() when deleting', () => {
    const notifications = { results: [{ id: 1 }, { id: 2 }] };
    let output = {};
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
        notifications={notifications}
        markNotifications={a => output = a} // eslint-disable-line
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );

    // contains id from another page (3)
    wrapper.instance().setState({ selectedNotifications: new Set([1, 2, 3]) });

    wrapper.instance().markNotificationsByType('delete');
    expect(output.ids).toEqual([1, 2]);
    expect(output.shouldDelete).toBe(true);
  });

  it('passes the correct values and config on this.markNotificationsByType() when marking as read', () => {
    const notifications = { results: [{ id: 1 }, { id: 2 }] };
    let output = {};
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
        notifications={notifications}
        markNotifications={a => output = a} // eslint-disable-line
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );

    // contains id from another page (3)
    wrapper.instance().setState({ selectedNotifications: new Set([1, 2, 3]) });

    wrapper.instance().markNotificationsByType('read');
    expect(output.ids).toEqual([1, 2]);
    expect(output.shouldDelete).toBe(false);
    expect(output.markAsRead).toBe(true);
  });

  it('passes the correct values and config on this.markNotificationsByType() when marking as unread', () => {
    const notifications = { results: [{ id: 1 }, { id: 2 }] };
    let output = {};
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
        notifications={notifications}
        markNotifications={a => output = a} // eslint-disable-line
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );

    // contains id from another page (3)
    wrapper.instance().setState({ selectedNotifications: new Set([1, 2, 3]) });

    wrapper.instance().markNotificationsByType('unread');
    expect(output.ids).toEqual([1, 2]);
    expect(output.shouldDelete).toBe(false);
    expect(output.markAsRead).toBe(false);
  });

  it('returns the correct value for selectionsExist()', () => {
    const wrapper = shallow(
      <NotificationsContainer.WrappedComponent
        {...props}
      >{() => <div /> }</NotificationsContainer.WrappedComponent>,
    );

    wrapper.instance().setState({ selectedNotifications: new Set([1, 2, 3]) });
    expect(wrapper.instance().selectionsExist()).toBe(true);

    wrapper.instance().setState({ selectedNotifications: new Set([]) });
    expect(wrapper.instance().selectionsExist()).toBe(false);
  });
});

describe('mapDispatchToProps', () => {
  const config = {
    fetchData: [10],
    delete: [1],
    markNotifications: [{}],
  };
  testDispatchFunctions(mapDispatchToProps, config);
});