ManageProfile.spec.js

import React from 'react';
import expect from 'expect';
import { shallow, configure } from 'enzyme';
import { createStore } from 'redux';
import moment from 'moment';
import { NewProfilePage } from '../../../src/components/user/NewProfilePage';
import ManageProfile from '../../../src/components/user/ManageProfile';
import defaultState from '../../../src/components/user/defaultState';
import rootReducer from '../../../src/reducers';
import initialState from '../../../src/reducers/initialState';
import { t } from '../../../src/helpers/I18n';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

const store = createStore(rootReducer, initialState);

describe('User ManageProfile (Through NewProfilePage)', () => {
    let props;
    let wrapper;
    let saveButton;
    let NewProfilePageWrapper;

    beforeEach(() => {
        props = {
            store: store
        };

        const Component = ManageProfile(NewProfilePage);
        const shallowWrapper = shallow(<Component {...props}/>);
        wrapper = shallowWrapper.find('ManageProfileComponent').dive();

        NewProfilePageWrapper = wrapper.find('NewProfilePage').dive();
        saveButton = NewProfilePageWrapper.find('FormButton').dive();
    });

    it('should render a heading with the page title', () => {
        expect(NewProfilePageWrapper.find('Header').at(0).dive().text()).toBe(t('user.profile.new'));
    });

    it('should display a ErrorBlock component div when errors are found', () => {
        saveButton.simulate('click', { preventDefault: () => {} });
        
        wrapper.update();
        NewProfilePageWrapper = wrapper.find('NewProfilePage').dive();

        expect(NewProfilePageWrapper.find('ErrorBlock').length).toBe(1);
    });

    it('should throw an error when the passwords don\'t match', () => {
        const user = Object.assign({}, defaultState, {
            name: 'Rodrigo',
            username: 'rodd',
            email: '[email protected]',
            password: 'abc123',
            passwordConfirmation: '123abc',
            termsAgreed: true
        });
        
        // Simulate user input
        NewProfilePageWrapper.find('FormInput[name="name"]').simulate('change', { target: { value: user.name } }, { name: 'name', value: user.name});
        NewProfilePageWrapper.find('FormInput[name="email"]').simulate('change', { target: { value: user.email } }, { name: 'email', value: user.email } );
        NewProfilePageWrapper.find('FormInput[name="username"]').simulate('change', { target: { value: user.username } }, { name: 'username', value: user.username } );
        NewProfilePageWrapper.find('PasswordInput[fieldName="password"]').simulate('change', { target: { value: user.password } }, { name: 'password', value: user.password } );
        NewProfilePageWrapper.find('PasswordInput[fieldName="passwordConfirmation"]').simulate('change', {
            target: { value: user.passwordConfirmation }
        });
        
        saveButton.simulate('click', { preventDefault: () => { } });
        wrapper.update();

        NewProfilePageWrapper = wrapper.find('NewProfilePage');

        expect(NewProfilePageWrapper.props().errors.passwordConfirmation).toBeDefined();
    });

    it('should throw an error when the selected trip date does not correspond to the selected trip status', () => {
        const date = moment('2037-10-10');
        
        NewProfilePageWrapper.find('FormRadio[name="tripStatus"]').at(1).simulate('change', { target: { checked: 'true' } }, { name: 'tripStatus', value: 'true' });
        wrapper.find('NewProfilePage').props().onSelectDate(date);

        saveButton.simulate('click', { preventDefault: () => { } });
        wrapper.update();
        
        expect(wrapper.find('NewProfilePage').props().errors.tripDate).toBeDefined();
        expect(wrapper.find('NewProfilePage').props().errors.tripDate).toBe(t('validation.user.trip.status_date_mismatch'));
    });

    it('should not throw an error when the selected trip date corresponds to the selected trip status', () => {
        const date = moment('2016-10-10');

        NewProfilePageWrapper.find('FormRadio[name="tripStatus"]').at(1).simulate('change', { target: { checked: 'true' } }, { name: 'tripStatus', value: 'true' });
        wrapper.find('NewProfilePage').props().onSelectDate(date);

        saveButton.simulate('click', { preventDefault: () => { } });
        wrapper.update();

        expect(wrapper.find('NewProfilePage').props().errors.tripDate).toBeUndefined();
    });

    it('should throw an error telling user to select a country when trip status and trip date have been selected but not a country', () => {
        const date = moment('2016-09-10');

        NewProfilePageWrapper.find('FormRadio[name="tripStatus"]').at(1).simulate('change', { target: { checked: 'true' } }, { name: 'tripStatus', value: 'true' });
        wrapper.find('NewProfilePage').props().onSelectDate(date);

        saveButton.simulate('click', { preventDefault: () => { } });
        wrapper.update();

        expect(wrapper.find('NewProfilePage').props().errors.country).toBeDefined();
        expect(wrapper.find('NewProfilePage').props().errors.country).toBe(t('validation.user.trip.empty_country'));
    });

    it('should display an error and have state.saving as false if user dont agree to terms', () => {
        const user = Object.assign({}, defaultState, {
            name: 'Rodrigo',
            username: 'rodd',
            email: '[email protected]',
            password: 'abc123',
            passwordConfirmation: 'abc123',
            termsAgreed: false
        });

        const passwordInput = NewProfilePageWrapper.find('PasswordInput').at(0).dive();
        const passwordConfirmationInput = NewProfilePageWrapper.find('PasswordInput').at(1).dive();

        // Simulate user input
        NewProfilePageWrapper.find('FormInput[name="name"]').simulate('change', { target: { value: user.name } }, { name: 'name', value: user.name });
        NewProfilePageWrapper.find('FormInput[name="email"]').simulate('change', { target: { value: user.email } }, { name: 'email', value: user.email });
        NewProfilePageWrapper.find('FormInput[name="username"]').simulate('change', { target: { value: user.username } }, { name: 'username', value: user.username });
        passwordInput.simulate('change', { target: { value: user.password } }, { name: 'password', value: user.password });
        passwordConfirmationInput.simulate('change',
            { target: { value: user.passwordConfirmation } },
            { name: 'passwordConfirmation', value: user.passwordConfirmation }
        );

        saveButton.simulate('click', { preventDefault: () => { } });
        wrapper.update();

        NewProfilePageWrapper = wrapper.find('NewProfilePage');

        expect(Object.keys(NewProfilePageWrapper.props().errors).length).toBe(1);
        expect(NewProfilePageWrapper.props().errors.termsAgreed).toBeDefined();
    });

    it('should not have a ErrorBlock component div when form passes', () => {
        const user = Object.assign({}, defaultState, {
            name: 'Rodrigo',
            username: 'rodd',
            email: '[email protected]',
            password: 'abc123',
            passwordConfirmation: 'abc123',
            termsAgreed: true
        });

        const passwordInput = NewProfilePageWrapper.find('PasswordInput').at(0).dive();
        const passwordConfirmationInput = NewProfilePageWrapper.find('PasswordInput').at(1).dive();

        // Simulate user input
        NewProfilePageWrapper.find('FormInput[name="name"]').simulate('change', { target: { value: user.name } }, { name: 'name', value: user.name });
        NewProfilePageWrapper.find('FormInput[name="email"]').simulate('change', { target: { value: user.email } }, { name: 'email', value: user.email });
        NewProfilePageWrapper.find('FormInput[name="username"]').simulate('change', { target: { value: user.username } }, { name: 'username', value: user.username });
        passwordInput.simulate('change', { target: { value: user.password } }, { name: 'password', value: user.password });
        passwordConfirmationInput.simulate('change',
            { target: { value: user.passwordConfirmation } },
            { name: 'passwordConfirmation', value: user.passwordConfirmation }
        );

        saveButton.simulate('click', { preventDefault: () => { } });
        wrapper.update();

        NewProfilePageWrapper = wrapper.find('NewProfilePage');

        expect(NewProfilePageWrapper.find('ErrorBlock').length).toBe(0);
    });
});

SigninPage.spec.js

import React from 'react';
import expect from 'expect';
import { shallow } from 'enzyme';
import SigninPage from '../../../src/components/auth/SigninPage';

describe('SigninPage', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = shallow(<SigninPage />);
    });

    it('should render a Form', () => {
        expect(wrapper.find('Form')).toBeDefined();
    });

    it('should render a username input', () => {
        expect(wrapper.find('FormInput').at(0)).toBeDefined();
        expect(wrapper.find('FormInput').at(0).props().name).toBe('username');
    });

    it('should render a password input', () => {
        expect(wrapper.find('FormInput').at(1)).toBeDefined();
        expect(wrapper.find('FormInput').at(1).props().name).toBe('password');
    });

    it('should render a submit button', () => {
        expect(wrapper.find('FormButton')).toBeDefined();
    });

    it('should detect errors when form is invalid', () => {
        const button = wrapper.find('FormButton');
        button.simulate('click');

        expect(wrapper.state().errors.username).toBeDefined();
        expect(wrapper.state().errors.password).toBeDefined();
    });

    it('should update state when user enters a username and a password', () => {
        const testUsername = 'mary';
        const testPassword = 'bass123';

        wrapper.find('FormInput').at(0).simulate('change', { target: {} }, { name: 'username', value: testUsername });
        wrapper.find('FormInput').at(1).simulate('change', { target: {} }, { name: 'password', value: testPassword });

        expect(wrapper.state().username).toBe(testUsername);
        expect(wrapper.state().password).toBe(testPassword);
    });
});