#259: fix eror when rendering success popup after feedback form submit

.eslintrc.json

@@ -211,7 +211,6 @@
         "react/no-unknown-property": "warn",
         "react/prefer-es6-class": "warn",
         "react/prop-types": "warn",
-        "react/react-in-jsx-scope": "warn",
         "react/self-closing-comp": "warn",
         "react/sort-comp": ["warn", {"order": ["lifecycle", "render", "everything-else"]}]
     }

src/components/contact/ContactForm.jsx

@@ -7,6 +7,7 @@ import { Input, TextArea, Button, Form, FormModel, Dropdown } from 'components/u
 import feedback from 'services/api/feedback';
 import icons from 'components/ui/icons.scss';
 import popupStyles from 'components/ui/popup/popup.scss';
+import logger from 'services/logger';
 
 import styles from './contactForm.scss';
 import messages from './contactForm.intl.json';
@@ -20,20 +21,29 @@ const CONTACT_CATEGORIES = [
     <Message {...messages.other} />
 ];
 
-class ContactForm extends Component {
+export class ContactForm extends Component {
     static displayName = 'ContactForm';
 
     static propTypes = {
-        onClose: PropTypes.func.isRequired,
+        onClose: PropTypes.func,
         user: PropTypes.shape({
             email: PropTypes.string
         }).isRequired
     };
 
+    static defaultProps = {
+        onClose() {}
+    };
+
+    state = {
+        isLoading: false,
+        isSuccessfullySent: false
+    };
+
     form = new FormModel();
 
     render() {
-        const {isSuccessfullySent = false} = this.state || {};
+        const {isSuccessfullySent} = this.state || {};
         const {onClose} = this.props;
 
         return (
@@ -55,9 +65,13 @@ class ContactForm extends Component {
     renderForm() {
         const {form} = this;
         const {user} = this.props;
+        const {isLoading} = this.state;
 
         return (
-            <Form form={form} onSubmit={this.onSubmit}>
+            <Form form={form}
+                onSubmit={this.onSubmit}
+                isLoading={isLoading}
+            >
                 <div className={popupStyles.body}>
                     <div className={styles.philosophicalThought}>
                         <Message {...messages.philosophicalThought} />
@@ -107,15 +121,14 @@ class ContactForm extends Component {
                 </div>
 
                 <div className={styles.footer}>
-                    <Button label={messages.send} block />
+                    <Button label={messages.send} block type="submit" />
                 </div>
             </Form>
         );
     }
 
     renderSuccess() {
-        const {form} = this;
-        const email = form.value('email');
+        const {lastEmail: email} = this.state;
         const {onClose} = this.props;
 
         return (
@@ -136,15 +149,25 @@ class ContactForm extends Component {
     }
 
     onSubmit = () => {
-        feedback(this.form.serialize())
-            .then(() => this.setState({isSuccessfullySent: true}))
+        if (this.state.isLoading) {
+            return;
+        }
+
+        this.setState({isLoading: true});
+        return feedback.send(this.form.serialize())
+            .then(() => this.setState({
+                isSuccessfullySent: true,
+                lastEmail: this.form.value('email')
+            }))
             .catch((resp) => {
                 if (resp.errors) {
                     this.form.setErrors(resp.errors);
+                    return;
                 }
 
-                return Promise.reject(resp);
+                logger.warn('Error sending feedback', resp);
             })
+            .finally(() => this.setState({isLoading: false}))
             ;
     };
 }

src/services/api/feedback.js

@@ -1,4 +1,7 @@
 import request from 'services/request';
 
-export default ({subject = '', email = '', message = '', category = ''}) =>
-    request.post('/api/feedback', {subject, email, message, category});
+export default {
+    send({subject = '', email = '', message = '', category = ''}) {
+        return request.post('/api/feedback', {subject, email, message, category});
+    }
+};

src/services/authFlow/PasswordState.js

@@ -1,3 +1,5 @@
+import logger from 'services/logger';
+
 import AbstractState from './AbstractState';
 import CompleteState from './CompleteState';
 import ForgotPasswordState from './ForgotPasswordState';
@@ -22,7 +24,8 @@ export default class PasswordState extends AbstractState {
             rememberMe,
             login
         })
-        .then(() => context.setState(new CompleteState()));
+        .then(() => context.setState(new CompleteState()))
+        .catch((err = {}) => err.errors || logger.warn(err));
     }
 
     reject(context) {

tests/components/contact/ContactForm.test.jsx

@@ -0,0 +1,204 @@
+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)
+            );
+        });
+    });
+});

tests/components/profile/changePassword/ChangePassword.test.jsx

@@ -1,5 +1,5 @@
 import expect from 'unexpected';
-import React from 'react';
+import sinon from 'sinon';
 
 import { shallow } from 'enzyme';
 

tests/services/authFlow/PasswordState.test.js

@@ -1,3 +1,5 @@
+import sinon from 'sinon';
+
 import PasswordState from 'services/authFlow/PasswordState';
 import CompleteState from 'services/authFlow/CompleteState';
 import LoginState from 'services/authFlow/LoginState';
@@ -66,7 +68,7 @@ describe('PasswordState', () => {
                     password: expectedPassword,
                     rememberMe: expectedRememberMe,
                 })
-            ).returns({then() {}});
+            ).returns(Promise.resolve());
 
             state.resolve(context, {password: expectedPassword, rememberMe: expectedRememberMe});
         });