-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[tests] Write tests for password reset and confirm component
- Loading branch information
1 parent
b8e1909
commit b1349da
Showing
7 changed files
with
507 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
client/components/password-confirm/__snapshots__/password-confirm.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
202 changes: 202 additions & 0 deletions
202
client/components/password-confirm/password-confirm.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}); | ||
}); | ||
}); |
64 changes: 64 additions & 0 deletions
64
client/components/password-reset/__snapshots__/password-reset.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
> | ||
</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> | ||
`; |
Oops, something went wrong.