From bf901c99cd1394bed6709fe87eb5318c31bbb41a Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Thu, 16 Apr 2020 14:30:02 +0530
Subject: [PATCH] Added action tests for SIgnup page

Adds test to check actions for signing up with name, email, plan and switching to signin page
---
 ghost/portal/src/components/SigninPage.js     |  6 --
 ghost/portal/src/components/SignupPage.js     |  9 ++-
 .../portal/src/components/SignupPage.test.js  | 56 ++++++++++++++++---
 3 files changed, 53 insertions(+), 18 deletions(-)

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 (
             <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>
         );
     }
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(
+        <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');
     });
 });