jest-mocking.js

import React from 'react';
import {mount} from 'enzyme';
import {createReduxStore} from '../../../store';
import GrindingYieldModelForm from '../grindingYieldModelForm';
import {Provider} from 'react-redux';
import semanticUI from '../../../../test-helpers/semantic-ui';

import GrindingYieldModelFactory from '../../../../test-factories/grindingYieldModel';
import {getProduct} from '../../../shared/components/product/actionsDuplicate';
import {createGrindingYieldModel, showPricingModelConfirmation, clearYieldModelInfo} from '../../actions/yieldModelActions';

// jest mocks will get hoisted above all other import statements
//   typically list them below the normal imports

// a jest.fn will capture calls to itself,
// allow test-run time mock implemenation of return values

jest.mock('../../../shared/components/product/actionsDuplicate', () => ({
  getProduct: jest.fn()
}));

// mock the createGrindingYieldModel thunk within the yieldModelActions module
//   to return a plain action object immediately.
//   Essentially turning an asynchronous action into a synchronous one
// createGrindingYieldModel is a jest.fn(), which will capture calls to itself

jest.mock('../../actions/yieldModelActions', () => ({
  createGrindingYieldModel: jest.fn(() => ({
    type: 'MOCK_CREATE_GRINDING_YIELD_MODEL_ACTION'
  })),
  showPricingModelConfirmation: jest.fn(() => ({
    type: 'MOCK_SHOW_PRICING_MODAL'
  })),
  clearYieldModelInfo: jest.fn(() => ({
    type: 'MOCK_CLEAR_YIELD_MODEL_INFO'
  }))

}));


describe('GrindingYieldModelForm', () => {
  // Integration of Store, Component, Action. Test boundary: Action called
  // during Async validation
  test('should call getProduct with the correct args when async validation is happening', () => {

    let store = createReduxStore();
    const form = mount(<Provider store={store}>
      <GrindingYieldModelForm shouldAsyncValidate={() => true}/>
    </Provider>);

    getProduct.mockImplementation(() => () => Promise.resolve()); // redux form requires a Promise to be returned to async validation

    semanticUI.changeInput(form, 'finishedProductCode', '78889');

    jestExpect(getProduct).toHaveBeenCalledWith('0078889', jestExpect.any(Function));
  });


  test('should call getProduct with the correct args when async validation is happening', () => {

    let store = createReduxStore();
    const form = mount(<Provider store={store}>
      <GrindingYieldModelForm shouldAsyncValidate={() => true}/>
    </Provider>);

    getProduct.mockImplementation(() => () => Promise.resolve()); // redux form requires a Promise to be returned to async validation

    semanticUI.changeInput(form, 'finishedProductCode', '78889');

    jestExpect(getProduct).toHaveBeenCalledWith('0078889', jestExpect.any(Function));
  });

  test('should call createGrindingYieldModel with form values on submit', () => {

    let store = createReduxStore();

    const dispatchSpy = jest.spyOn(store, 'dispatch');
    const form = mount(<Provider store={store}>
      <GrindingYieldModelForm shouldAsyncValidate={() => false}/>
    </Provider>);

    semanticUI.changeInput(form, 'finishedProductCode', '78889');
    semanticUI.changeInput(form, 'blend', 'Natural');
    semanticUI.changeInput(form, 'additives', '2.3');
    semanticUI.changeInput(form, 'labor', '3.3');
    semanticUI.changeInput(form, 'wastePercentage', '5.5');


    form.find('form').simulate('submit');

    const expectedValues = {
      finishedProductCode: '0078889',
      blend: 'Natural',
      additives: '2.30',
      labor: '3.30',
      wastePercentage: '5.50',
      pricingModel: false
    };

    jestExpect(createGrindingYieldModel).toBeCalledWith(expectedValues, jestExpect.any(Function));

    jestExpect(dispatchSpy).toBeCalledWith(createGrindingYieldModel());

  });

  test('should call showPricingModalConfirmation action if pricing model is submitted', () => {
    let store = createReduxStore();

    const dispatchSpy = jest.spyOn(store, 'dispatch');

    const form = mount(
      <Provider store={store}>
        <GrindingYieldModelForm shouldAsyncValidate={() => false}/>
      </Provider>
    );

    semanticUI.changeInput(form, 'finishedProductCode', '78889');
    semanticUI.changeInput(form, 'blend', 'Natural');
    semanticUI.changeInput(form, 'labor', '3.3');
    semanticUI.changeInput(form, 'wastePercentage', '2');
    semanticUI.changeInput(form, 'pricingModel', true);

    form.find('form').simulate('submit');

    jestExpect(dispatchSpy).toHaveBeenCalledWith(showPricingModelConfirmation());

    jestExpect(showPricingModelConfirmation).toHaveBeenCalled();
  });

  // downside, its a little more work to mock individual functions within a module (and
  // not the entire module itself

  test('should call call YieldModelData upon unmount', () => {
    const yieldModel = GrindingYieldModelFactory.build();
    const store = createReduxStore({
      yieldModelInfo: {
        yieldModel: yieldModel,
        pricingModelConfirmationShowing: true
      }
    });

    const dispatchSpy = jest.spyOn(store, 'dispatch')

    const form = mount(<Provider store={store}>
      <GrindingYieldModelForm shouldAsyncValidate={() => false}/>
    </Provider>);

    form.unmount();

    jestExpect(dispatchSpy).toHaveBeenCalledWith(clearYieldModelInfo());

    // expect(store.getState().yieldModelInfo.yieldModel).to.eql({});
    // expect(store.getState().yieldModelInfo.pricingModelConfirmationShowing).to.eql(false);
  });

});