From 117a27f86bdaacfafb43dd5ca894aa308ef23fc1 Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Thu, 16 Apr 2020 12:21:49 +0530
Subject: [PATCH] Setup render tests for components

Adds basic rendering test for all components/pages for expected outputs
---
 ghost/portal/src/App.test.js                  |  9 ++------
 ghost/portal/src/components/MagicLinkPage.js  |  2 +-
 .../src/components/MagicLinkPage.test.js      | 15 +++++++++++++
 .../src/components/PopupMenuComponent.js      |  3 ++-
 .../src/components/PopupMenuComponent.test.js | 15 +++++++++++++
 ghost/portal/src/components/SignedInPage.js   |  2 +-
 .../src/components/SignedInPage.test.js       | 18 ++++++++++++++++
 .../portal/src/components/SigninPage.test.js  | 19 +++++++++++++++++
 ghost/portal/src/components/SignupPage.js     |  7 ++++---
 .../portal/src/components/SignupPage.test.js  | 21 +++++++++++++++++++
 .../src/components/TriggerComponent.test.js   | 14 +++++++++++++
 ghost/portal/src/test/fixtures/data.js        | 20 ++++++++++++++++++
 12 files changed, 132 insertions(+), 13 deletions(-)
 create mode 100644 ghost/portal/src/components/MagicLinkPage.test.js
 create mode 100644 ghost/portal/src/components/PopupMenuComponent.test.js
 create mode 100644 ghost/portal/src/components/SignedInPage.test.js
 create mode 100644 ghost/portal/src/components/SigninPage.test.js
 create mode 100644 ghost/portal/src/components/SignupPage.test.js
 create mode 100644 ghost/portal/src/components/TriggerComponent.test.js
 create mode 100644 ghost/portal/src/test/fixtures/data.js

diff --git a/ghost/portal/src/App.test.js b/ghost/portal/src/App.test.js
index f627f23d57..bf67a2775a 100644
--- a/ghost/portal/src/App.test.js
+++ b/ghost/portal/src/App.test.js
@@ -1,16 +1,11 @@
 import React from 'react';
 import {render} from '@testing-library/react';
 import App from './App';
+import {site} from './test/fixtures/data';
 
 test('renders App', () => {
-    const data = {
-        site: {
-            siteUrl: '',
-            adminUrl: ''
-        }
-    };
     const {container} = render(
-        <App data={data} />
+        <App data={{site}} />
     );
 
     // dashboard component should be rendered on root route
diff --git a/ghost/portal/src/components/MagicLinkPage.js b/ghost/portal/src/components/MagicLinkPage.js
index e638baf57f..3af2a6e9b9 100644
--- a/ghost/portal/src/components/MagicLinkPage.js
+++ b/ghost/portal/src/components/MagicLinkPage.js
@@ -4,7 +4,7 @@ export default class MagicLinkPage extends React.Component {
     renderFormHeader() {
         return (
             <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '12px'}}>
-                <div style={{fontSize: '18px', fontWeight: 'bold'}}> Check your Inbox! </div>
+                <div style={{fontSize: '18px', fontWeight: 'bold'}}> Awesome! </div>
                 <div> We just sent you a login link, check your Inbox! </div>
             </div>
         );
diff --git a/ghost/portal/src/components/MagicLinkPage.test.js b/ghost/portal/src/components/MagicLinkPage.test.js
new file mode 100644
index 0000000000..ae13ae2f67
--- /dev/null
+++ b/ghost/portal/src/components/MagicLinkPage.test.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import MagicLinkPage from './MagicLinkPage';
+
+describe('MagicLinkPage', () => {
+    test('renders', () => {
+        const {getByText} = render(
+            <MagicLinkPage />
+        );
+
+        const inboxText = getByText(/check your inbox/i);
+
+        expect(inboxText).toBeInTheDocument();
+    });
+});
diff --git a/ghost/portal/src/components/PopupMenuComponent.js b/ghost/portal/src/components/PopupMenuComponent.js
index 8f09e04bcc..a2099fba4e 100644
--- a/ghost/portal/src/components/PopupMenuComponent.js
+++ b/ghost/portal/src/components/PopupMenuComponent.js
@@ -3,6 +3,7 @@ import SignupPage from './SignupPage';
 import SigninPage from './SigninPage';
 import SignedInPage from './SignedInPage';
 import MagicLinkPage from './MagicLinkPage';
+
 const React = require('react');
 const PropTypes = require('prop-types');
 
@@ -123,7 +124,7 @@ export default class PopupMenuComponent extends React.Component {
         };
 
         return (
-            <FrameComponent style={frameStyle}>
+            <FrameComponent style={frameStyle} title="membersjs-popup">
                 {this.renderPopupContent()}
             </FrameComponent>
         );
diff --git a/ghost/portal/src/components/PopupMenuComponent.test.js b/ghost/portal/src/components/PopupMenuComponent.test.js
new file mode 100644
index 0000000000..ac476379d2
--- /dev/null
+++ b/ghost/portal/src/components/PopupMenuComponent.test.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import PopupMenuComponent from './PopupMenuComponent';
+import {site} from '../test/fixtures/data';
+
+describe('PopupMenuComponentTest', () => {
+    test('renders', () => {
+        const {getByTitle} = render(
+            <PopupMenuComponent data={{site}} page='signin' action={{}} onAction={() => {}} />
+        );
+        const popupFrame = getByTitle('membersjs-popup');
+
+        expect(popupFrame).toBeInTheDocument();
+    });
+});
diff --git a/ghost/portal/src/components/SignedInPage.js b/ghost/portal/src/components/SignedInPage.js
index c9e1463359..921aabc5dd 100644
--- a/ghost/portal/src/components/SignedInPage.js
+++ b/ghost/portal/src/components/SignedInPage.js
@@ -111,7 +111,7 @@ export default class SignedInPage extends React.Component {
             marginBottom: '12px'
         };
         const siteTitle = this.props.data.site && this.props.data.site.title;
-        const plans = this.props.data.member && this.props.data.member.plans;
+        const plans = this.props.data.site && this.props.data.site.plans;
         return (
             <div style={{padding: '12px 12px'}}>
                 <div style={{marginBottom: '12px', fontSize: '14px'}}>
diff --git a/ghost/portal/src/components/SignedInPage.test.js b/ghost/portal/src/components/SignedInPage.test.js
new file mode 100644
index 0000000000..0d5107b48e
--- /dev/null
+++ b/ghost/portal/src/components/SignedInPage.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import SignedInPage from './SignedInPage';
+import {site, member} from '../test/fixtures/data';
+
+describe('SignedInPage', () => {
+    test('renders', () => {
+        const {getByText} = render(
+            <SignedInPage data={{site, member}} onAction={() => {}} switchPage={() => {}} />
+        );
+
+        const memberEmail = getByText(member.email);
+        const logoutButton = getByText(/logout/i);
+
+        expect(memberEmail).toBeInTheDocument();
+        expect(logoutButton).toBeInTheDocument();
+    });
+});
diff --git a/ghost/portal/src/components/SigninPage.test.js b/ghost/portal/src/components/SigninPage.test.js
new file mode 100644
index 0000000000..59a75901d8
--- /dev/null
+++ b/ghost/portal/src/components/SigninPage.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import SigninPage from './SigninPage';
+import {site} from '../test/fixtures/data';
+
+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);
+
+        expect(emailInput).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+        expect(signupButton).toBeInTheDocument();
+    });
+});
diff --git a/ghost/portal/src/components/SignupPage.js b/ghost/portal/src/components/SignupPage.js
index d4f38e2539..f2ec0d5732 100644
--- a/ghost/portal/src/components/SignupPage.js
+++ b/ghost/portal/src/components/SignupPage.js
@@ -9,7 +9,8 @@ export default class SignupPage extends React.Component {
                 description: PropTypes.string
             }).isRequired
         }).isRequired,
-        onAction: PropTypes.func.isRequired
+        onAction: PropTypes.func.isRequired,
+        switchPage: PropTypes.func.isRequired
     };
 
     constructor(props) {
@@ -243,12 +244,12 @@ export default class SignupPage extends React.Component {
             name: {
                 type: 'text',
                 value: this.state.name,
-                placeholder: 'Name...'
+                placeholder: 'Name'
             },
             email: {
                 type: 'email',
                 value: this.state.email,
-                placeholder: 'Email...'
+                placeholder: 'Email'
             }
         };
         const field = fields[fieldName];
diff --git a/ghost/portal/src/components/SignupPage.test.js b/ghost/portal/src/components/SignupPage.test.js
new file mode 100644
index 0000000000..e703fd8f16
--- /dev/null
+++ b/ghost/portal/src/components/SignupPage.test.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import SignupPage from './SignupPage';
+import {site} from '../test/fixtures/data';
+
+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);
+
+        expect(nameInput).toBeInTheDocument();
+        expect(emailInput).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+        expect(loginButton).toBeInTheDocument();
+    });
+});
diff --git a/ghost/portal/src/components/TriggerComponent.test.js b/ghost/portal/src/components/TriggerComponent.test.js
new file mode 100644
index 0000000000..7a32da9594
--- /dev/null
+++ b/ghost/portal/src/components/TriggerComponent.test.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import TriggerComponent from './TriggerComponent';
+
+describe('TriggerComponentTest', () => {
+    test('renders', () => {
+        const {getByTitle} = render(
+            <TriggerComponent />
+        );
+        const triggerFrame = getByTitle('membersjs-trigger');
+
+        expect(triggerFrame).toBeInTheDocument();
+    });
+});
diff --git a/ghost/portal/src/test/fixtures/data.js b/ghost/portal/src/test/fixtures/data.js
new file mode 100644
index 0000000000..bb15402f6f
--- /dev/null
+++ b/ghost/portal/src/test/fixtures/data.js
@@ -0,0 +1,20 @@
+export const site = {
+    title: 'Ghost Site',
+    description: 'Thoughts, stories and ideas',
+    logo: '',
+    siteUrl: window.location.origin,
+    adminUrl: window.location.origin + '/ghost',
+    plans: {
+        monthly: '10',
+        yearly: '99',
+        currency: 'USD',
+        currencySymbol: '$'
+    }
+};
+
+export const member = {
+    email: 'member@example.com',
+    isPaid: false,
+    avatarImage: '',
+    subscriptions: []
+};
\ No newline at end of file