accounts-frontend/src/components/contact/ContactForm.test.js

import expect from 'unexpected';
import sinon from 'sinon';
import { shallow, mount } from 'enzyme';

import { IntlProvider } from 'react-intl';

import feedback from 'services/api/feedback';

import { ContactForm } from 'components/contact/ContactForm';

describe('ContactForm', () => {
    describe('when rendered', () => {
        const user = {};
        let component;

        beforeEach(() => {
            component = shallow(<ContactForm user={user} />);
        });

        [
            {
                type: 'Input',
                name: 'subject'
            }, {
                type: 'Input',
                name: 'email'
            }, {
                type: 'Dropdown',
                name: 'category'
            }, {
                type: 'TextArea',
                name: 'message'
            },
        ].forEach((el) => {
            it(`should have ${el.name} field`, () => {
                expect(
                    component.find(`${el.type}[name="${el.name}"]`),
                    'to satisfy', {length: 1}
                );
            });
        });

        it('should contain Form', () => {
            expect(
                component.find('Form'),
                'to satisfy',
                {length: 1}
            );
        });

        it('should contain submit Button', () => {
            expect(
                component.find('Button[type="submit"]'),
                'to satisfy',
                {length: 1}
            );
        });
    });

    describe('when rendered with user', () => {
        const user = {
            email: 'foo@bar.com'
        };
        let component;

        beforeEach(() => {
            component = shallow(<ContactForm user={user} />);
        });

        it('should render email field with user email', () => {
            expect(
                component.find('Input[name="email"]').prop('defaultValue'),
                'to equal', user.email
            );
        });
    });

    describe('when email was successfully sent', () => {
        const user = {
            email: 'foo@bar.com'
        };
        let component;

        beforeEach(() => {
            component = shallow(<ContactForm user={{user}} />);

            component.setState({isSuccessfullySent: true});
        });

        it('should not contain Form', () => {
            expect(
                component.find('Form'),
                'to satisfy',
                {length: 0}
            );
        });
    });

    xdescribe('validation', () => {
        const user = {
            email: 'foo@bar.com'
        };
        let component;
        let wrapper;

        beforeEach(() => {
            // TODO: add polyfill for from validation for jsdom

            wrapper = mount(
                <IntlProvider locale="en" defaultLocale="en">
                    <ContactForm user={{user}} ref={(el) => component = el} />
                </IntlProvider>
            );
        });

        it('should require email, subject and message', () => {
            // wrapper.find('[type="submit"]').simulate('click');
            wrapper.find('form').simulate('submit');

            expect(component.form.hasErrors(), 'to be true');
        });
    });

    describe('when user submits form', () => {
        const user = {
            email: 'foo@bar.com'
        };
        let component;
        let wrapper;
        const requestData = {
            email: user.email,
            subject: 'Test subject',
            message: 'Test message'
        };

        beforeEach(() => {
            sinon.stub(feedback, 'send');
            // TODO: add polyfill for from validation for jsdom
            if (!Element.prototype.checkValidity) {
                Element.prototype.checkValidity = () => true;
            }

            // TODO: try to rewrite with unexpected-react
            wrapper = mount(
                <IntlProvider locale="en" defaultLocale="en">
                    <ContactForm user={{user}} ref={(el) => component = el} />
                </IntlProvider>
            );

            wrapper.find('[name="email"]').node.value = requestData.email;
            wrapper.find('[name="subject"]').node.value = requestData.subject;
            wrapper.find('[name="message"]').node.value = requestData.message;
        });

        afterEach(() => {
            feedback.send.restore();
        });

        xit('should call onSubmit', () => {
            sinon.stub(component, 'onSubmit');

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

            expect(component.onSubmit, 'was called');
        });

        it('should call send with required data', () => {
            feedback.send.returns(Promise.resolve());
            component.onSubmit();

            expect(feedback.send, 'to have a call satisfying', [
                requestData
            ]);
        });

        it('should set isSuccessfullySent', () => {
            feedback.send.returns(Promise.resolve());

            return component.onSubmit().then(() =>
                expect(component.state, 'to satisfy', {isSuccessfullySent: true})
            );
        });

        it('should handle isLoading during request', () => {
            feedback.send.returns(Promise.resolve());

            const promise = component.onSubmit();

            expect(component.state, 'to satisfy', {isLoading: true});

            return promise.then(() =>
                expect(component.state, 'to satisfy', {isLoading: false})
            );
        });

        it('should render success message with user email', () => {
            feedback.send.returns(Promise.resolve());

            return component.onSubmit().then(() =>
                expect(wrapper.text(), 'to contain', user.email)
            );
        });
    });
});