Updated tests structure

no issue

- Use jsdom-fourteen to allow waitFor tests from testing lib - https://github.com/facebook/create-react-app/issues/7491#issuecomment-534832697
- Updated test-utils to pass context
- Added tests for account plan and profile using new test options

ghost/portal/package.json

@@ -28,7 +28,7 @@
     "build": "npm run build:combined && npm run build:bundle",
     "build:combined": "node ./scripts/build-combined.js",
     "build:bundle": "webpack --config webpack.config.js",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jsdom-fourteen",
     "eject": "react-scripts eject",
     "lint": "eslint src --ext .js --cache",
     "preship": "yarn lint",

ghost/portal/src/components/pages/AccountPlanPage.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import {render, fireEvent, waitFor} from 'test-utils';
+import AccountPlanPage from './AccountPlanPage';
+
+const setup = (overrides) => {
+    const {mockOnActionFn, context, ...utils} = render(
+        <AccountPlanPage />
+    );
+    const monthlyCheckboxEl = utils.getByLabelText('Monthly');
+    const yearlyCheckboxEl = utils.getByLabelText('Yearly');
+    const continueBtn = utils.queryByRole('button', {name: 'Continue'});
+    return {
+        monthlyCheckboxEl,
+        yearlyCheckboxEl,
+        continueBtn,
+        mockOnActionFn,
+        context,
+        ...utils
+    };
+};
+
+describe('Account Plan Page', () => {
+    test('renders', () => {
+        const {monthlyCheckboxEl, yearlyCheckboxEl, continueBtn} = setup();
+
+        expect(monthlyCheckboxEl).toBeInTheDocument();
+        expect(yearlyCheckboxEl).toBeInTheDocument();
+        expect(continueBtn).toBeInTheDocument();
+    });
+
+    test('can choose plan and continue', async () => {
+        const {mockOnActionFn, monthlyCheckboxEl, continueBtn} = setup();
+        expect(monthlyCheckboxEl.checked).toEqual(false);
+        fireEvent.click(monthlyCheckboxEl);
+        expect(monthlyCheckboxEl.checked).toEqual(true);
+        await waitFor(() => {
+            expect(continueBtn).toBeEnabled();
+        });
+
+        fireEvent.click(continueBtn);
+        expect(mockOnActionFn).toHaveBeenCalledWith('checkoutPlan', {plan: 'Monthly'});
+    });
+});

ghost/portal/src/components/pages/AccountProfilePage.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {render, fireEvent} from 'test-utils';
+import AccountProfilePage from './AccountProfilePage';
+
+const setup = (overrides) => {
+    const {mockOnActionFn, context, ...utils} = render(
+        <AccountProfilePage />
+    );
+    const emailInputEl = utils.getByLabelText(/email/i);
+    const nameInputEl = utils.getByLabelText(/name/i);
+    const saveBtn = utils.queryByRole('button', {name: 'Save'});
+    return {
+        emailInputEl,
+        nameInputEl,
+        saveBtn,
+        mockOnActionFn,
+        context,
+        ...utils
+    };
+};
+
+describe('Account Profile Page', () => {
+    test('renders', () => {
+        const {emailInputEl, nameInputEl, saveBtn} = setup();
+
+        expect(emailInputEl).toBeInTheDocument();
+        expect(nameInputEl).toBeInTheDocument();
+        expect(saveBtn).toBeInTheDocument();
+    });
+
+    test('can call save', () => {
+        const {mockOnActionFn, saveBtn, context} = setup();
+
+        fireEvent.click(saveBtn);
+        const {email, name} = context.member;
+        expect(mockOnActionFn).toHaveBeenCalledWith('updateMember', {email, name});
+    });
+});

ghost/portal/src/utils/test-utils.js

@@ -29,6 +29,7 @@ const customRender = (ui, {options = {}, overrideContext = {}} = {}) => {
     const utils = render(ui, {wrapper: setupProvider(context), ...options});
     return {
         ...utils,
+        context,
         mockOnActionFn
     };
 };