Fixed missing element issues by calling update on wrapper component

- enzymejs/enzyme#1153 (comment)
dtonys · Dec 19, 2017 · acffe63 · acffe63
1 parent 0922b12
commit acffe63
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 21 deletions.
diff --git a/pages/__tests__/__snapshots__/reset-password.js.snap b/pages/__tests__/__snapshots__/reset-password.js.snap
@@ -1063,6 +1063,7 @@ exports[`Reset password page Should mount and render successfully 1`] = `
                                     >
                                       <button
                                         className="jsx-4189866565 w50"
+                                        data-test="submit"
                                       >
                                         Submit
                                       </button>

diff --git a/pages/__tests__/login.js b/pages/__tests__/login.js
@@ -40,7 +40,8 @@ describe('Login page', () => {
       .simulate('change', { target: { value: '12345678' } });
     loginPage.find('[data-test="submit"]').getDOMNode().click();
     setTimeout(() => {
-      expect(loginPage.find('form')).toIncludeText('Email not found');
+      loginPage.update();
+      expect(loginPage.find('[data-test="serverError"]')).toIncludeText('Email not found');
       done();
     }, 100);
   });

diff --git a/pages/__tests__/lost-password.js b/pages/__tests__/lost-password.js
@@ -34,7 +34,9 @@ describe('Lost password page', () => {
       .simulate('change', { target: { value: '[email protected]' } });
     lostPasswordPage.find('[data-test="submit"]').getDOMNode().click();
     setTimeout(() => {
-      expect(lostPasswordPage.find('form')).toIncludeText('Email not found');
+      lostPasswordPage.update();
+      expect(lostPasswordPage.find('[data-test="serverError"]'))
+        .toIncludeText('Email not found');
       done();
     }, 100);
   });
@@ -51,11 +53,11 @@ describe('Lost password page', () => {
       .simulate('change', { target: { value: '[email protected]' } });
     lostPasswordPage.find('[data-test="submit"]').getDOMNode().click();
     setTimeout(() => {
-      expect(lostPasswordPage.find('form'))
+      lostPasswordPage.update();
+      expect(lostPasswordPage.find('[data-test="successWrap"]'))
         .toIncludeText('Check your email to reset your password.');
       done();
     }, 100);
-    done();
   });
 
 });
diff --git a/pages/__tests__/reset-password.js b/pages/__tests__/reset-password.js
@@ -1,12 +1,16 @@
+jest.mock('superagent', () => ( require('../../jest-config/__mocks__/superagent') ));
 import { getMockUrlProp } from './helpers/utils';
 import { mount } from 'enzyme';
 import ResetPasswordPage from '../reset-password';
 
 
 describe('Reset password page', () => {
 
+  let superagent = null;
   let resetPasswordPage = null;
   beforeAll((done) => {
+    superagent = require('superagent');
+    superagent.__setMockDelay(1);
     resetPasswordPage = mount(<ResetPasswordPage url={getMockUrlProp('/reset-password')} />);
     done();
   });
@@ -16,16 +20,48 @@ describe('Reset password page', () => {
     done();
   });
 
-  test('If passwords do not match, should show inline errors', (done) => {
-    done();
-  });
-
   test('If token is invalid, should display server error', (done) => {
-    done();
+    const invalidSessionError = {
+      error: [ {
+        message: 'Invalid or expired session.',
+      } ],
+    };
+    superagent.__setMockResponse({
+      status: 422,
+      text: JSON.stringify(invalidSessionError),
+    });
+    resetPasswordPage.find('[data-test="password"]')
+      .simulate('change', { target: { value: 'abcdefg' } });
+    resetPasswordPage.find('[data-test="passwordConfirm"]')
+      .simulate('change', { target: { value: 'abcdefg' } });
+    resetPasswordPage.find('[data-test="submit"]').getDOMNode().click();
+    setTimeout(() => {
+      resetPasswordPage.update();
+      expect(resetPasswordPage.find('[data-test="serverError"]'))
+        .toIncludeText('Invalid or expired session.');
+      done();
+    }, 100);
   });
 
-  test('On submit success, should show a success message with a login page prompt', (done) => {
-    done();
+  test('On submit success, should show a success message', (done) => {
+    const successResponse = {
+      data: null,
+    };
+    superagent.__setMockResponse({
+      status: 200,
+      text: JSON.stringify(successResponse),
+    });
+    resetPasswordPage.find('[data-test="password"]')
+      .simulate('change', { target: { value: 'abcdefg' } });
+    resetPasswordPage.find('[data-test="passwordConfirm"]')
+      .simulate('change', { target: { value: 'abcdefg' } });
+    resetPasswordPage.find('[data-test="submit"]').getDOMNode().click();
+    setTimeout(() => {
+      resetPasswordPage.update();
+      expect(resetPasswordPage.find('[data-test="successWrap"]'))
+        .toIncludeText('Your password was changed successfully');
+      done();
+    }, 100);
   });
 
 });
diff --git a/pages/lost-password.js b/pages/lost-password.js
@@ -71,7 +71,10 @@ class LostPasswordPage extends Component {
               />
             }
             { apiSuccess &&
-              <div className="successWrap">
+              <div
+                data-test="successWrap"
+                className="successWrap"
+              >
                 <div className="messageWrap">
                   <div>{'Request submitted.'}</div>
                   <br />

diff --git a/pages/reset-password.js b/pages/reset-password.js
@@ -39,7 +39,10 @@ class ResetPasswordPage extends Component {
   }
 
   submitForm = ( payload ) => {
-    const sessionToken = window.location.search.split('sessionToken=')[1].split('&')[0];
+    const sessionToken = ( window.location.search
+      ? window.location.search.split('sessionToken=')[1].split('&')[0]
+      : ''
+    );
     const payloadWithToken = {
       ...payload,
       sessionToken,
@@ -49,11 +52,15 @@ class ResetPasswordPage extends Component {
       payloadWithToken,
       { deferred: true },
     ) );
-    resetPasswordPromise.then(() => {
-      this.setState({
-        apiSuccess: true,
+    resetPasswordPromise
+      .then(() => {
+        this.setState({
+          apiSuccess: true,
+        });
+      })
+      .catch(() => {
       });
-    });
+
   }
 
   render() {
@@ -74,9 +81,12 @@ class ResetPasswordPage extends Component {
               />
             }
             { apiSuccess &&
-              <div className="successWrap">
+              <div
+                className="successWrap"
+                data-test="successWrap"
+              >
                 <div className="messageWrap">
-                  <div>{'You password was changed successfully'}</div>
+                  <div>{'Your password was changed successfully'}</div>
                   <br />
                   <div>
                     {'Go to the '}

diff --git a/src/client/components/ResetPasswordForm.js b/src/client/components/ResetPasswordForm.js
@@ -27,7 +27,11 @@ const ResetPasswordFormView = ({
         <h3> Reset Password </h3>
         <fieldset>
           { serverErrorMessage &&
-            <div className="error" style={{ marginBottom: '10px' }} >
+            <div
+              className="error"
+              style={{ marginBottom: '10px' }}
+              data-test="serverError"
+            >
               {serverErrorMessage}
             </div>
           }
@@ -46,7 +50,12 @@ const ResetPasswordFormView = ({
             requiredStar
           />
           <div className="form-item">
-            <button className="w50" >Submit</button>
+            <button
+              className="w50"
+              data-test="submit"
+            >
+              Submit
+            </button>
           </div>
         </fieldset>
       </form>