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

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});
         });