TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

Added action tests for SIgnup page

Browse Source 
Adds test to check actions for signing up with name, email, plan and switching to signin page
This commit is contained in:
Rish 2020-04-16 14:30:02 +05:30
parent 4789f473e3
commit bf901c99cd
3 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/portal/src/components/SigninPage.js
View File

@ -89,12 +89,6 @@ export default class SigninPage extends React.Component {
};
const fields = {
name: {
type: 'text',
value: this.state.name,
placeholder: 'Name...',
label: 'name'
},
email: {
type: 'email',
value: this.state.email,

9
ghost/portal/src/components/SignupPage.js
View File

@ -244,12 +244,14 @@ export default class SignupPage extends React.Component {
name: {
type: 'text',
value: this.state.name,
placeholder: 'Name'
placeholder: 'Name',
label: 'name'
},
email: {
type: 'email',
value: this.state.email,
placeholder: 'Email'
placeholder: 'Email',
label: 'email'
}
};
const field = fields[fieldName];
@ -262,6 +264,7 @@ export default class SignupPage extends React.Component {
this.handleInput(e, fieldName);
}}
style={inputStyle}
aria-label={field.label}
/>
);
}
@ -270,7 +273,7 @@ export default class SignupPage extends React.Component {
return (
<div style={{display: 'flex'}}>
<div style={{marginRight: '6px'}}> Already a member ? </div>
<div style={{color: '#3db0ef', fontWeight: 'bold', cursor: 'pointer'}} onClick={() => this.props.switchPage('signin')}> Log in </div>
<div style={{color: '#3db0ef', fontWeight: 'bold', cursor: 'pointer'}} role="button" onClick={() => this.props.switchPage('signin')}> Log in </div>
</div>
);
}

56
ghost/portal/src/components/SignupPage.test.js
View File

@ -1,21 +1,59 @@
import React from 'react';
import {render} from '@testing-library/react';
import {render, fireEvent} from '@testing-library/react';
import SignupPage from './SignupPage';
import {site} from '../test/fixtures/data';
const setup = (overrides) => {
const mockOnActionFn = jest.fn();
const mockSwitchPageFn = jest.fn();
const utils = render(
<SignupPage data={{site}} onAction={mockOnActionFn} switchPage={mockSwitchPageFn} />
);
const emailInput = utils.getByLabelText(/email/i);
const nameInput = utils.getByLabelText(/name/i);
const submitButton = utils.queryByRole('button', {name: 'Continue'});
const signinButton = utils.queryByRole('button', {name: 'Log in'});
return {
nameInput,
emailInput,
submitButton,
signinButton,
mockOnActionFn,
mockSwitchPageFn,
...utils
};
};
describe('SignupPage', () => {
test('renders', () => {
const {getByPlaceholderText, getByText} = render(
<SignupPage data={{site}} onAction={() => {}} switchPage={() => {}} />
);
const nameInput = getByPlaceholderText(/name/i);
const emailInput = getByPlaceholderText(/email/i);
const submitButton = getByText(/continue/i);
const loginButton = getByText(/log in/i);
const {nameInput, emailInput, submitButton, signinButton} = setup();
expect(nameInput).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(loginButton).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
});
test('can call signup action with name, email and plan', () => {
const {nameInput, emailInput, submitButton, mockOnActionFn} = setup();
const nameVal = 'J Smith';
const emailVal = 'jsmith@example.com';
const planVal = 'Free';
fireEvent.change(nameInput, {target: {value: nameVal}});
fireEvent.change(emailInput, {target: {value: emailVal}});
expect(nameInput).toHaveValue(nameVal);
expect(emailInput).toHaveValue(emailVal);
fireEvent.click(submitButton);
expect(mockOnActionFn).toHaveBeenCalledWith('signup', {email: emailVal, name: nameVal, plan: planVal});
});
test('can call swithPage for signin', () => {
const {signinButton, mockSwitchPageFn} = setup();
fireEvent.click(signinButton);
expect(mockSwitchPageFn).toHaveBeenCalledWith('signin');
});
});