Mocha Chai Component Test Enzyme

mocha-test.spec.js

import React from 'react';
import chai, { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import sinonChai from 'sinon-chai';
import EditPageView from './EditPageView';
import FormControl from './FormControl';
import ErrorList from './errorList';

chai.use(sinonChai);

describe('Edit Page View Component', () => {
  it('renders a Dynamic input for each question passed', () => {
    const props = {
      solicitationId: 1,
      page: {
        userAnswers: {},
        questions: [
          {
            id: 2,
            name: 'entity-level',
            component: FormControl,
            conditionalRules: [],
          }, {
            id: 4,
            name: 'entity',
            component: FormControl,
            conditionalRules: [],
          },
        ],
      },
      onChange: sinon.spy(),
      nextClick: sinon.spy(),
    };

    const wrapper = shallow(<EditPageView {...props} />);

    // get non-native child nodes
    const actual = wrapper.find('div').children()
    .filterWhere(child => typeof(child.type()) !== 'string')
    .map(child => child.type());

    const expected = [ErrorList, FormControl, FormControl];

    expect(actual).to.deep.equal(expected);
  });

  it('renders \'Questions Loading...\' when no questions passed', () => {
    const props = {
      solicitationId: 1,
      page: {
        title: 'Page 1',
      },
      solicitation: {
        answers: {},
      },
    };
    const wrapper = shallow(<EditPageView {...props} />);

    expect(wrapper.containsMatchingElement(<div>Questions Loading...</div>)).to.equal(true);
  });

  it('onChange called when input changed', () => {
    const props = {
      solicitationId: 1,
      page: {
        userAnswers: {},
        questions: [
          {
            id: 1,
            name: 'start-date',
            questionType: 8,
            label: 'Start Date',
            defaultAnswerValue: '2010',
            component: FormControl,
            conditionalRules: [],
          },
        ],
      },
      onChange: sinon.spy(),
      nextClick: sinon.spy(),
    };

    const wrapper = shallow(<EditPageView {...props} />);
    const input = wrapper.find(FormControl).at(0);
    expect(props.onChange).to.have.been.callCount(0);
    input.simulate('change');
    expect(props.onChange).to.have.been.callCount(1);
  });

  it('onChange called from direct call', () => {
    const props = {
      solicitationId: 1,
      page: {
        userAnswers: {},
        questions: [
          {
            id: 1,
            name: 'start-date',
            questionType: 8,
            label: 'Start Date',
            defaultAnswerValue: '2010',
            component: FormControl,
            conditionalRules: [],
          },
        ],
      },
      onChange: sinon.spy(),
      nextClick: sinon.spy(),
    };

    const wrapper = shallow(<EditPageView {...props} />);
    const input = wrapper.find(FormControl).at(0);
    expect(props.onChange).to.have.been.callCount(0);
    input.prop('onChange')('2012');
    expect(props.onChange).to.have.been.callCount(1);
    expect(props.onChange).to.have.been.calledWith(1, '2012');
  });
});