[tests] Write tests for password reset and confirm component

client/components/organization-wrapper/organization-wrapper.js

@@ -96,6 +96,7 @@ OrganizationWrapper.propTypes = {
     params: PropTypes.shape({
       organization: PropTypes.string.isRequired,
     }),
+    path: PropTypes.string,
   }).isRequired,
   setOrganization: PropTypes.func.isRequired,
   organization: PropTypes.shape({

client/components/password-confirm/__snapshots__/password-confirm.test.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PasswordConfirm /> rendering should render correctly 1`] = `
+<div
+  className="owisp-password-confirm-container"
+>
+  <form
+    className="owisp-password-confirm-form"
+    onSubmit={[Function]}
+  >
+    <div
+      className="owisp-password-confirm-header"
+    >
+      <div
+        className="owisp-password-confirm-heading"
+      >
+        reset your password
+      </div>
+      <div
+        className="owisp-password-confirm-subheading"
+      >
+        please enter your new password
+      </div>
+    </div>
+    <div
+      className="owisp-password-confirm-fieldset"
+    >
+      <label
+        className="owisp-password-confirm-label owisp-password-confirm-label-password"
+        htmlFor="owisp-password-confirm-password"
+      >
+        <div
+          className="owisp-password-confirm-label-text"
+        >
+          password
+        </div>
+        <input
+          className="owisp-password-confirm-input owisp-password-confirm-input-password
+                      "
+          id="owisp-password-confirm-password"
+          name="newPassword1"
+          onChange={[Function]}
+          pattern=".{6,}"
+          placeholder="password"
+          required={true}
+          title="password must be a minimum of 6 characters"
+          type="password"
+          value=""
+        />
+      </label>
+      <label
+        className="owisp-password-confirm-label owisp-password-confirm-label-confirm"
+        htmlFor="owisp-password-confirm-password-confirm"
+      >
+        <div
+          className="owisp-password-confirm-label-text"
+        >
+          confirm
+        </div>
+        <input
+          className="owisp-password-confirm-input owisp-password-confirm-input-confirm "
+          id="owisp-password-confirm-password-confirm"
+          name="newPassword2"
+          onChange={[Function]}
+          placeholder="confirm password"
+          required={true}
+          title={null}
+          type="password"
+          value=""
+        />
+      </label>
+    </div>
+    <input
+      className="owisp-password-confirm-submit-btn"
+      type="submit"
+      value="change password"
+    />
+  </form>
+</div>
+`;

client/components/password-confirm/password-confirm.js

@@ -38,13 +38,13 @@ export default class PasswordConfirm extends React.Component {
             newPassword2: passwordConfirmError,
           },
         });
-        return;
+        return false;
       }
     }
     this.setState({errors: {...errors, newPassword2: ""}});
     const url = confirmApiUrl.replace("{orgSlug}", orgSlug);
     const {uid, token} = match.params;
-    axios({
+    return axios({
       method: "post",
       headers: {
         "content-type": "application/x-www-form-urlencoded",

client/components/password-confirm/password-confirm.test.js

@@ -0,0 +1,202 @@
+/* eslint-disable prefer-promise-reject-errors */
+/* eslint-disable camelcase */
+import axios from "axios";
+import {shallow} from "enzyme";
+import React from "react";
+import {BrowserRouter as Router} from "react-router-dom";
+import renderer from "react-test-renderer";
+
+import PasswordConfirm from "./password-confirm";
+
+jest.mock("axios");
+
+const createTestProps = props => {
+  return {
+    language: "en",
+    orgSlug: "default",
+    passwordConfirm: {
+      heading: {
+        en: "reset your password",
+      },
+      additional_text: {
+        en: "please enter your new password",
+      },
+      input_fields: {
+        password: {
+          type: "password",
+          pattern: ".{6,}",
+          pattern_description: {
+            en: "password must be a minimum of 6 characters",
+          },
+          placeholder: {
+            en: "password",
+          },
+          label: {
+            en: "password",
+          },
+        },
+        password_confirm: {
+          type: "password",
+          pattern: null,
+          pattern_description: {
+            en: null,
+          },
+          placeholder: {
+            en: "confirm password",
+          },
+          label: {
+            en: "confirm",
+          },
+        },
+      },
+      buttons: {
+        submit: {
+          en: "change password",
+        },
+      },
+    },
+    match: {
+      params: {
+        uid: "testUid",
+        token: "testToken",
+      },
+    },
+    ...props,
+  };
+};
+
+describe("<PasswordConfirm /> rendering", () => {
+  let props;
+  let wrapper;
+  beforeEach(() => {
+    props = createTestProps();
+    wrapper = shallow(<PasswordConfirm {...props} />);
+  });
+  it("should render correctly", () => {
+    props = createTestProps();
+    const component = renderer
+      .create(
+        <Router>
+          <PasswordConfirm {...props} />
+        </Router>,
+      )
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
+  it("should render 2 input fields", () => {
+    expect(wrapper.find(".owisp-password-confirm-input")).toHaveLength(2);
+  });
+
+  it("should render password field correctly", () => {
+    const {password} = props.passwordConfirm.input_fields;
+    expect(wrapper.find(".owisp-password-confirm-label-password").text()).toBe(
+      password.label.en,
+    );
+    expect(
+      wrapper
+        .find(".owisp-password-confirm-input-password")
+        .prop("placeholder"),
+    ).toBe(password.placeholder.en);
+    expect(
+      wrapper.find(".owisp-password-confirm-input-password").prop("title"),
+    ).toBe(password.pattern_description.en);
+    expect(
+      wrapper.find(".owisp-password-confirm-input-password").prop("type"),
+    ).toBe(password.type);
+  });
+  it("should render password confirm field correctly", () => {
+    const {password_confirm} = props.passwordConfirm.input_fields;
+    expect(wrapper.find(".owisp-password-confirm-label-confirm").text()).toBe(
+      password_confirm.label.en,
+    );
+    expect(
+      wrapper.find(".owisp-password-confirm-input-confirm").prop("placeholder"),
+    ).toBe(password_confirm.placeholder.en);
+    expect(
+      wrapper.find(".owisp-password-confirm-input-confirm").prop("title"),
+    ).toBe(password_confirm.pattern_description.en);
+    expect(
+      wrapper.find(".owisp-password-confirm-input-confirm").prop("type"),
+    ).toBe(password_confirm.type);
+  });
+});
+
+describe("<PasswordConfirm /> interactions", () => {
+  let props;
+  let wrapper;
+  beforeEach(() => {
+    props = createTestProps();
+    wrapper = shallow(<PasswordConfirm {...props} />);
+  });
+  it("should change state values when handleChange function is invoked", () => {
+    wrapper
+      .find("#owisp-password-confirm-password")
+      .simulate("change", {target: {value: "123456", name: "newPassword1"}});
+    expect(wrapper.state("newPassword1")).toEqual("123456");
+    wrapper
+      .find("#owisp-password-confirm-password-confirm")
+      .simulate("change", {target: {value: "123456", name: "newPassword2"}});
+    expect(wrapper.state("newPassword2")).toEqual("123456");
+  });
+
+  it("should execute handleSubmit correctly when form is submitted", () => {
+    axios
+      .mockImplementationOnce(() => {
+        return Promise.reject({response: {data: {detail: "errors"}}});
+      })
+      .mockImplementationOnce(() => {
+        return Promise.reject({
+          response: {data: {non_field_errors: ["non field errors"]}},
+        });
+      })
+      .mockImplementationOnce(() => {
+        return Promise.resolve({data: {detail: true}});
+      });
+    wrapper.setState({
+      newPassword1: "wrong password",
+      newPassword2: "wrong password1",
+    });
+    wrapper.instance().handleSubmit({preventDefault: () => {}});
+    expect(
+      wrapper.update().find(".owisp-password-confirm-error-confirm"),
+    ).toHaveLength(1);
+    wrapper.setState({
+      newPassword1: "password",
+      newPassword2: "password",
+    });
+    return wrapper
+      .instance()
+      .handleSubmit({preventDefault: () => {}})
+      .then(() => {
+        expect(wrapper.instance().state.errors.nonField).toEqual("errors");
+        expect(
+          wrapper.find(".owisp-password-confirm-error-non-field"),
+        ).toHaveLength(1);
+      })
+      .then(() => {
+        return wrapper
+          .instance()
+          .handleSubmit({preventDefault: () => {}})
+          .then(() => {
+            expect(wrapper.instance().state.errors.nonField).toEqual(
+              "non field errors",
+            );
+          });
+      })
+      .then(() => {
+        return wrapper
+          .instance()
+          .handleSubmit({preventDefault: () => {}})
+          .then(() => {
+            expect(wrapper.instance().state.errors).toEqual({});
+            expect(wrapper.instance().state.success).toBe(true);
+            expect(
+              wrapper.find(".owisp-password-confirm-input.error"),
+            ).toHaveLength(0);
+            expect(
+              wrapper.find(".owisp-password-confirm-success"),
+            ).toHaveLength(1);
+          });
+      });
+  });
+});

client/components/password-reset/__snapshots__/password-reset.test.js.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PasswordReset /> rendering should render correctly 1`] = `
+<div
+  className="owisp-password-reset-container"
+>
+  <form
+    className="owisp-password-reset-form"
+    onSubmit={[Function]}
+  >
+    <div
+      className="owisp-password-reset-header"
+    >
+      <div
+        className="owisp-password-reset-heading"
+      >
+        reset your password
+      </div>
+      <div
+        className="owisp-password-reset-subheading"
+      >
+        enter your email and we'll send you the instructions to reset your password
+      </div>
+    </div>
+    <div
+      className="owisp-password-reset-fieldset"
+    >
+      <label
+        className="owisp-password-reset-label owisp-password-reset-label-email"
+        htmlFor="owisp-password-reset-email"
+      >
+        <div
+          className="owisp-password-reset-label-text owisp-password-reset-label-text-email"
+        >
+          email
+        </div>
+        <input
+          className="owisp-password-reset-input owisp-password-reset-input-email "
+          id="owisp-password-reset-email"
+          name="email"
+          onChange={[Function]}
+          placeholder="email address"
+          required={true}
+          title={null}
+          type="email"
+          value=""
+        />
+      </label>
+    </div>
+    <input
+      className="owisp-password-reset-send-btn"
+      type="submit"
+      value="send"
+    />
+    <a
+      className="owisp-password-reset-links"
+      href="/default/login"
+      onClick={[Function]}
+    >
+      Take me Back to Sign In
+    </a>
+  </form>
+</div>
+`;