Add tests for login functionality
Tests added for: - LoginPage - LoginHelpLinks VAN-60
This commit is contained in:
Zainab Amir
58
src/logistration/tests/LoginHelpLinks.test.jsx
Normal file
58
src/logistration/tests/LoginHelpLinks.test.jsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import LoginHelpLinks from '../LoginHelpLinks';
|
||||
|
||||
describe('LoginHelpLinks', () => {
|
||||
let props = {};
|
||||
const otherSignInIssues = 'https://support.edx.org/hc/en-us/sections/115004153367-Solve-a-Sign-in-Problem';
|
||||
|
||||
const reduxWrapper = children => (
|
||||
<IntlProvider locale="en">
|
||||
{children}
|
||||
</IntlProvider>
|
||||
);
|
||||
|
||||
it('renders help links on button click', () => {
|
||||
props = {
|
||||
...props,
|
||||
page: 'login',
|
||||
};
|
||||
const loginHelpLinks = mount(reduxWrapper(<LoginHelpLinks {...props} />));
|
||||
|
||||
expect(loginHelpLinks.find('.login-help').length).toBe(0);
|
||||
loginHelpLinks.find('button').simulate('click');
|
||||
expect(loginHelpLinks.find('.login-help').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should display login page help links', () => {
|
||||
props = {
|
||||
...props,
|
||||
page: 'login',
|
||||
};
|
||||
|
||||
const wrapper = mount(reduxWrapper(<LoginHelpLinks {...props} />));
|
||||
wrapper.find('button').simulate('click');
|
||||
|
||||
const loginHelpLinks = wrapper.find('a');
|
||||
|
||||
expect(loginHelpLinks.at(0).prop('href')).toEqual('/reset');
|
||||
expect(loginHelpLinks.at(1).prop('href')).toEqual(otherSignInIssues);
|
||||
});
|
||||
|
||||
it('should display forget password page help links', () => {
|
||||
props = {
|
||||
...props,
|
||||
page: 'forget-password',
|
||||
};
|
||||
|
||||
const wrapper = mount(reduxWrapper(<LoginHelpLinks {...props} />));
|
||||
wrapper.find('button').simulate('click');
|
||||
|
||||
const loginHelpLinks = wrapper.find('a');
|
||||
|
||||
expect(loginHelpLinks.at(0).prop('href')).toEqual('/register');
|
||||
expect(loginHelpLinks.at(1).prop('href')).toEqual(otherSignInIssues);
|
||||
});
|
||||
});
|
||||
@@ -40,20 +40,51 @@ describe('LoginPage', () => {
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should match forget password alert message snapshot', () => {
|
||||
props = {
|
||||
...props,
|
||||
forgotPassword: { status: 'complete', email: 'test@example.com' },
|
||||
};
|
||||
const tree = renderer.create(reduxWrapper(<IntlLoginPage {...props} />)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should display login help button', () => {
|
||||
const root = mount(reduxWrapper(<IntlLoginPage {...props} />));
|
||||
expect(root.find('button.field-link').text()).toEqual('Need help signing in?');
|
||||
});
|
||||
|
||||
it('updates the error state for invalid email', () => {
|
||||
const errorState = { email: null, password: null };
|
||||
const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
|
||||
|
||||
loginPage.find('button.submit').simulate('click');
|
||||
expect(loginPage.find('LoginPage').state('errors')).toEqual(errorState);
|
||||
});
|
||||
|
||||
it('updates the error state for invalid password', () => {
|
||||
const errorState = { email: '', password: null };
|
||||
const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
|
||||
|
||||
loginPage.find('input#loginEmail').simulate('change', { target: { value: 'test@example.com', name: 'email' } });
|
||||
loginPage.find('button.submit').simulate('click');
|
||||
expect(loginPage.find('LoginPage').state('errors')).toEqual(errorState);
|
||||
});
|
||||
|
||||
it('should match url after redirection', () => {
|
||||
const dasboardUrl = 'http://test.com/dashboard/';
|
||||
props = {
|
||||
...props,
|
||||
loginResult: { success: true, redirectUrl: dasboardUrl },
|
||||
};
|
||||
store = mockStore({
|
||||
...store,
|
||||
logistration: {
|
||||
...store.logistration,
|
||||
loginResult: {
|
||||
success: true,
|
||||
redirectUrl: dasboardUrl,
|
||||
},
|
||||
},
|
||||
});
|
||||
delete window.location;
|
||||
window.location = { href: '' };
|
||||
window.location.href = dasboardUrl;
|
||||
renderer.create(reduxWrapper(<IntlLoginPage {...props} />));
|
||||
expect(window.location.href).toBe(dasboardUrl);
|
||||
});
|
||||
|
||||
@@ -246,3 +246,250 @@ exports[`LoginPage should match default section snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`LoginPage should match forget password alert message snapshot 1`] = `
|
||||
<div
|
||||
className="d-flex justify-content-center logistration-container"
|
||||
>
|
||||
<div
|
||||
className="d-flex flex-column"
|
||||
style={
|
||||
Object {
|
||||
"width": "400px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="d-flex flex-row"
|
||||
>
|
||||
<p>
|
||||
First time here?
|
||||
<a
|
||||
className="ml-1"
|
||||
href="/register"
|
||||
>
|
||||
Create an Account.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
className="m-0"
|
||||
>
|
||||
<div
|
||||
className="form-group"
|
||||
>
|
||||
<h3
|
||||
className="text-center mt-3"
|
||||
>
|
||||
Sign In
|
||||
</h3>
|
||||
<div
|
||||
className="d-flex flex-column align-items-start"
|
||||
>
|
||||
<div
|
||||
className="form-group"
|
||||
>
|
||||
<label
|
||||
className="h6 mr-1"
|
||||
htmlFor="loginEmail"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
aria-describedby=""
|
||||
className="form-control"
|
||||
id="loginEmail"
|
||||
name="email"
|
||||
onChange={[Function]}
|
||||
placeholder="username@domain.com"
|
||||
style={
|
||||
Object {
|
||||
"width": "400px",
|
||||
}
|
||||
}
|
||||
type="email"
|
||||
value=""
|
||||
/>
|
||||
<strong
|
||||
className="invalid-feedback"
|
||||
id="email-invalid-feedback"
|
||||
>
|
||||
The email address you've provided isn't formatted correctly.
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="mb-4"
|
||||
>
|
||||
The email address you used to register with edX.
|
||||
</p>
|
||||
<div
|
||||
className="d-flex flex-column align-items-start"
|
||||
>
|
||||
<div
|
||||
className="form-group mb-0"
|
||||
>
|
||||
<label
|
||||
className="h6 mr-1"
|
||||
htmlFor="loginPassword"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
aria-describedby=""
|
||||
className="form-control"
|
||||
id="loginPassword"
|
||||
name="password"
|
||||
onChange={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"width": "400px",
|
||||
}
|
||||
}
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
<strong
|
||||
className="invalid-feedback"
|
||||
id="password-invalid-feedback"
|
||||
>
|
||||
Please enter your password.
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="btn mt-0 field-link"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
|
||||
data-icon="caret-right"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 192 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
Need help signing in?
|
||||
</button>
|
||||
<div
|
||||
className="pgn-transition-replace-group position-relative"
|
||||
style={
|
||||
Object {
|
||||
"height": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"padding": ".1px 0",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary submit"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
className="section-heading-line mb-4"
|
||||
>
|
||||
<h4>
|
||||
or sign in with
|
||||
</h4>
|
||||
</div>
|
||||
<div
|
||||
className="row text-center d-block mb-4"
|
||||
>
|
||||
<button
|
||||
className="btn-social facebook"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-facebook-f fa-w-10 mr-2"
|
||||
data-icon="facebook-f"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 320 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
Facebook
|
||||
</button>
|
||||
<button
|
||||
className="btn-social google"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-google fa-w-16 mr-2"
|
||||
data-icon="google"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 488 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
Google
|
||||
</button>
|
||||
<button
|
||||
className="btn-social microsoft"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-microsoft fa-w-14 mr-2"
|
||||
data-icon="microsoft"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
Microsoft
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user