Added action tests to Signin page

Adds tests for send magic link and subscribe button actions
This commit is contained in:
Rish 2020-04-16 14:13:37 +05:30
parent 117a27f86b
commit 22bee293bc
2 changed files with 46 additions and 11 deletions

View File

@ -57,7 +57,7 @@ export default class SigninPage extends React.Component {
marginBottom: '12px'
};
const isRunning = this.props.action && this.props.action.name === 'signin' && this.props.action.isRunning;
const label = this.state.isLoading ? 'Sending' : 'Continue';
const label = this.state.isLoading ? 'Sending' : 'Send Login Link';
const disabled = isRunning ? true : false;
if (disabled) {
buttonStyle.backgroundColor = 'grey';
@ -92,12 +92,14 @@ export default class SigninPage 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];
@ -109,6 +111,7 @@ export default class SigninPage extends React.Component {
onChange={(e) => {
this.handleInput(e, fieldName);
}}
aria-label={field.label}
style={inputStyle}
/>
);
@ -118,7 +121,7 @@ export default class SigninPage extends React.Component {
return (
<div style={{display: 'flex'}}>
<div style={{marginRight: '6px'}}> Not a member ? </div>
<div style={{color: '#3db0ef', fontWeight: 'bold', cursor: 'pointer'}} onClick={() => this.props.switchPage('signup')}> Signup </div>
<div style={{color: '#3db0ef', fontWeight: 'bold', cursor: 'pointer'}} role="button" onClick={() => this.props.switchPage('signup')}> Subscribe </div>
</div>
);
}

View File

@ -1,19 +1,51 @@
import React from 'react';
import {render} from '@testing-library/react';
import {render, fireEvent} from '@testing-library/react';
import SigninPage from './SigninPage';
import {site} from '../test/fixtures/data';
const setup = (overrides) => {
const mockOnActionFn = jest.fn();
const mockSwitchPageFn = jest.fn();
const utils = render(
<SigninPage data={{site}} onAction={mockOnActionFn} switchPage={mockSwitchPageFn} />
);
const emailInput = utils.getByLabelText(/email/i);
const submitButton = utils.queryByRole('button', {name: 'Send Login Link'});
const signupButton = utils.queryByRole('button', {name: 'Subscribe'});
return {
emailInput,
submitButton,
signupButton,
mockOnActionFn,
mockSwitchPageFn,
...utils
};
};
describe('SigninPage', () => {
test('renders', () => {
const {getByPlaceholderText, getByText} = render(
<SigninPage data={{site}} onAction={() => {}} switchPage={() => {}} />
);
const emailInput = getByPlaceholderText(/email/i);
const submitButton = getByText(/continue/i);
const signupButton = getByText(/Signup/i);
const {emailInput, submitButton, signupButton} = setup();
expect(emailInput).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(signupButton).toBeInTheDocument();
});
test('can call signin action with email', () => {
const {emailInput, submitButton, mockOnActionFn} = setup();
fireEvent.change(emailInput, {target: {value: 'member@example.com'}});
expect(emailInput).toHaveValue('member@example.com');
fireEvent.click(submitButton);
expect(mockOnActionFn).toHaveBeenCalledWith('signin', {email: 'member@example.com'});
});
test('can call swithPage for signup', () => {
const {signupButton, mockSwitchPageFn} = setup();
fireEvent.click(signupButton);
expect(mockSwitchPageFn).toHaveBeenCalledWith('signup');
});
});