diff --git a/ghost/portal/src/components/SigninPage.js b/ghost/portal/src/components/SigninPage.js
index 13d3779af3..b8cf53ac54 100644
--- a/ghost/portal/src/components/SigninPage.js
+++ b/ghost/portal/src/components/SigninPage.js
@@ -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,
diff --git a/ghost/portal/src/components/SignupPage.js b/ghost/portal/src/components/SignupPage.js
index f2ec0d5732..66689cb1c6 100644
--- a/ghost/portal/src/components/SignupPage.js
+++ b/ghost/portal/src/components/SignupPage.js
@@ -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 (
Already a member ?
-
this.props.switchPage('signin')}> Log in
+
this.props.switchPage('signin')}> Log in
);
}
diff --git a/ghost/portal/src/components/SignupPage.test.js b/ghost/portal/src/components/SignupPage.test.js
index e703fd8f16..5fbb321517 100644
--- a/ghost/portal/src/components/SignupPage.test.js
+++ b/ghost/portal/src/components/SignupPage.test.js
@@ -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(
+
+ );
+ 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(
- {}} 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');
});
});