Setup render tests for components

Adds basic rendering test for all components/pages for expected outputs

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

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>
         );

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

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>
         );

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

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'}}>

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

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

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];

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

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

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: []
+};