From dbcdc8219da343b2f81da108dbad3c8d332138e9 Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Tue, 30 May 2023 11:57:56 +0200 Subject: [PATCH] Added E2E tests for API in signup form fixes https://github.com/TryGhost/Team/issues/3330 --- .../src/components/pages/FormPage.tsx | 6 +- .../src/components/pages/SuccessPage.tsx | 2 +- ghost/signup-form/test/e2e/form.test.ts | 203 +++++++++++++++--- ghost/signup-form/test/utils/e2e.ts | 35 ++- 4 files changed, 207 insertions(+), 39 deletions(-) diff --git a/ghost/signup-form/src/components/pages/FormPage.tsx b/ghost/signup-form/src/components/pages/FormPage.tsx index 6d98cb137d..fe10ebb0a3 100644 --- a/ghost/signup-form/src/components/pages/FormPage.tsx +++ b/ghost/signup-form/src/components/pages/FormPage.tsx @@ -59,10 +59,10 @@ const Form: React.FC = () => { return (
- setEmail(e.target.value)}/> - + setEmail(e.target.value)}/> +
- {error &&

{error}

} + {error &&

{error}

}
); }; diff --git a/ghost/signup-form/src/components/pages/SuccessPage.tsx b/ghost/signup-form/src/components/pages/SuccessPage.tsx index 38d76e7394..42676bd9d1 100644 --- a/ghost/signup-form/src/components/pages/SuccessPage.tsx +++ b/ghost/signup-form/src/components/pages/SuccessPage.tsx @@ -14,7 +14,7 @@ export const SuccessPage: React.FC = ({email}) => {

Now check your email!

; } - return
+ return

Now check your email!

An email has been send to {email}.

; diff --git a/ghost/signup-form/test/e2e/form.test.ts b/ghost/signup-form/test/e2e/form.test.ts index 8a012d08fe..c3fd7b66c2 100644 --- a/ghost/signup-form/test/e2e/form.test.ts +++ b/ghost/signup-form/test/e2e/form.test.ts @@ -3,47 +3,182 @@ import {initialize} from '../utils/e2e'; import {test} from '@playwright/test'; test.describe('Form', async () => { - test('Displays the title', async ({page}) => { - const frame = await initialize({page, title: 'Sign up to get the latest news and updates.'}); + test.describe('Display options', () => { + test('Displays the title', async ({page}) => { + const {frame} = await initialize({page, title: 'Sign up to get the latest news and updates.'}); - // Check the Frame - const h1 = frame.getByRole('heading'); - expect(await h1.innerText()).toBe('Sign up to get the latest news and updates.'); - }); - - test('Displays the description', async ({page}) => { - const frame = await initialize({page, title: 'Title', description: 'Sign up to get the latest news and updates.'}); - - // Check the Frame - const p = frame.getByRole('paragraph'); - expect(await p.innerText()).toBe('Sign up to get the latest news and updates.'); - }); - - test('Uses the accent color', async ({page}) => { - // Need rgb notation here, because getComputedStyle returns rgb notation - const color = 'rgb(255, 123, 0)'; - const frame = await initialize({page, color}); - const submitButton = frame.getByRole('button'); - - // Check calculated background color of the button - const backgroundColor = await submitButton.evaluate((el) => { - return window.getComputedStyle(el).backgroundColor; + // Check the Frame + const h1 = frame.getByRole('heading'); + expect(await h1.innerText()).toBe('Sign up to get the latest news and updates.'); + }); + + test('Displays the description', async ({page}) => { + const {frame} = await initialize({page, title: 'Title', description: 'Sign up to get the latest news and updates.'}); + + // Check the Frame + const p = frame.getByRole('paragraph'); + expect(await p.innerText()).toBe('Sign up to get the latest news and updates.'); + }); + + test('Uses the accent color', async ({page}) => { + // Need rgb notation here, because getComputedStyle returns rgb notation + const color = 'rgb(255, 123, 0)'; + const {frame} = await initialize({page, color}); + const submitButton = frame.getByRole('button'); + + // Check calculated background color of the button + const backgroundColor = await submitButton.evaluate((el) => { + return window.getComputedStyle(el).backgroundColor; + }); + expect(backgroundColor).toBe(color); + }); + + test('Has a minimal style when title is missing', async ({page}) => { + let {frame} = await initialize({page}); + + // Check no title or description present + await expect(frame.getByRole('heading')).toHaveCount(0); + await expect(frame.getByRole('paragraph')).toHaveCount(0); + + frame = (await initialize({page, description: 'Ignored'})).frame; + + // Check no title or description present + await expect(frame.getByRole('heading')).toHaveCount(0); + await expect(frame.getByRole('paragraph')).toHaveCount(0); }); - expect(backgroundColor).toBe(color); }); - test('Has a minimal style when title is missing', async ({page}) => { - let frame = await initialize({page}); + test.describe('Submitting', () => { + test('Can submit the form', async ({page}) => { + const {frame, lastApiRequest} = await initialize({page, title: 'Sign up'}); - // Check no title or description present - await expect(frame.getByRole('heading')).toHaveCount(0); - await expect(frame.getByRole('paragraph')).toHaveCount(0); + // Fill out the form + const emailInput = frame.getByTestId('input'); + await emailInput.fill('jamie@example.com'); - frame = await initialize({page, description: 'Ignored'}); + // Click the submit button + const submitButton = frame.getByTestId('button'); + await submitButton.click(); - // Check no title or description present - await expect(frame.getByRole('heading')).toHaveCount(0); - await expect(frame.getByRole('paragraph')).toHaveCount(0); + // Check input and button are gone + await expect(frame.getByTestId('input')).toHaveCount(0); + await expect(frame.getByTestId('button')).toHaveCount(0); + + // Showing the success page + await expect(frame.getByTestId('success-page')).toHaveCount(1); + + // Check email address text is visible on the page + await expect(frame.getByText('jamie@example.com')).toBeVisible(); + + // Check the request body + expect(lastApiRequest.body).not.toBeNull(); + expect(lastApiRequest.body).toHaveProperty('labels', []); + expect(lastApiRequest.body).toHaveProperty('email', 'jamie@example.com'); + }); + + test('Send a label when submitting the form', async ({page}) => { + const {frame, lastApiRequest} = await initialize({page, title: 'Sign up', labels: 'Hello world'}); + + // Fill out the form + const emailInput = frame.getByTestId('input'); + await emailInput.fill('jamie@example.com'); + + // Click the submit button + const submitButton = frame.getByTestId('button'); + await submitButton.click(); + + // Showing the success page + await expect(frame.getByTestId('success-page')).toHaveCount(1); + + // Check the request body + expect(lastApiRequest.body).not.toBeNull(); + expect(lastApiRequest.body).toHaveProperty('labels', ['Hello world']); + expect(lastApiRequest.body).toHaveProperty('email', 'jamie@example.com'); + }); + + test('Send multiple labels when submitting the form', async ({page}) => { + const {frame, lastApiRequest} = await initialize({page, title: 'Sign up', labels: 'Hello world,and another one'}); + + // Fill out the form + const emailInput = frame.getByTestId('input'); + await emailInput.fill('hey@example.com'); + + // Click the submit button + const submitButton = frame.getByTestId('button'); + await submitButton.click(); + + // Showing the success page + await expect(frame.getByTestId('success-page')).toHaveCount(1); + + // Check the request body + expect(lastApiRequest.body).not.toBeNull(); + expect(lastApiRequest.body).toHaveProperty('labels', ['Hello world', 'and another one']); + expect(lastApiRequest.body).toHaveProperty('email', 'hey@example.com'); + }); + + test('Cannot submit the form with invalid email address', async ({page}) => { + const {frame, lastApiRequest} = await initialize({page, title: 'Sign up'}); + + // Fill out the form + const emailInput = frame.getByTestId('input'); + await emailInput.fill('invalid'); + + // Click the submit button + const submitButton = frame.getByTestId('button'); + await submitButton.click(); + + // Check input and button are not gone + await expect(frame.getByTestId('input')).toHaveCount(1); + await expect(frame.getByTestId('button')).toHaveCount(1); + + // Not showing the success page + await expect(frame.getByTestId('success-page')).toHaveCount(0); + + // Check error message is visible on the page + const errorMessage = frame.getByTestId('error-message'); + await expect(errorMessage).toHaveCount(1); + expect(await errorMessage.innerText()).toBe('Please enter a valid email address'); + + expect(lastApiRequest.body).toBeNull(); + + // Try again + await emailInput.fill('valid@example.com'); + await submitButton.click(); + + // Check input and button are gone + await expect(frame.getByTestId('input')).toHaveCount(0); + await expect(frame.getByTestId('button')).toHaveCount(0); + + // Showing the success page + await expect(frame.getByTestId('success-page')).toHaveCount(1); + + // Check email address text is visible on the page + await expect(frame.getByText('valid@example.com')).toBeVisible(); + }); + + test('Shows error message on network issues', async ({page}) => { + const {frame} = await initialize({page, title: 'Sign up', site: '127.0.0.1:9999'}); + + // Fill out the form + const emailInput = frame.getByTestId('input'); + await emailInput.fill('valid@example.com'); + + // Click the submit button + const submitButton = frame.getByTestId('button'); + await submitButton.click(); + + // Check input and button are not gone + await expect(frame.getByTestId('input')).toHaveCount(1); + await expect(frame.getByTestId('button')).toHaveCount(1); + + // Not showing the success page + await expect(frame.getByTestId('success-page')).toHaveCount(0); + + // Check error message is visible on the page + const errorMessage = frame.getByTestId('error-message'); + await expect(errorMessage).toHaveCount(1); + expect(await errorMessage.innerText()).toBe('Something went wrong, please try again.'); + }); }); }); diff --git a/ghost/signup-form/test/utils/e2e.ts b/ghost/signup-form/test/utils/e2e.ts index 8d82f12a5f..ec79a3218c 100644 --- a/ghost/signup-form/test/utils/e2e.ts +++ b/ghost/signup-form/test/utils/e2e.ts @@ -1,10 +1,21 @@ import {E2E_PORT} from '../../playwright.config'; +const MOCKED_SITE_URL = 'http://localhost:1234'; + +type LastApiRequest = { + body: null | any +}; + export async function initialize({page, ...options}: {page: any; title?: string, description?: string, logo?: string, color?: string, site?: string, labels?: string}) { const url = `http://localhost:${E2E_PORT}/signup-form.min.js`; await page.goto('about:blank'); await page.setViewportSize({width: 1000, height: 1000}); + const lastApiRequest = await mockApi({page}); + + if (!options.site) { + options.site = MOCKED_SITE_URL; + } await page.evaluate((data) => { const scriptTag = document.createElement('script'); @@ -16,5 +27,27 @@ export async function initialize({page, ...options}: {page: any; title?: string, document.body.appendChild(scriptTag); }, {url, options}); await page.waitForSelector('iframe'); - return page.frameLocator('iframe'); + + return { + frame: page.frameLocator('iframe'), + lastApiRequest + }; +} + +export async function mockApi({page}: {page: any}) { + const lastApiRequest: LastApiRequest = { + body: null + }; + + await page.route(`${MOCKED_SITE_URL}/members/api/send-magic-link/`, async (route) => { + const requestBody = JSON.parse(route.request().postData()); + lastApiRequest.body = requestBody; + + await route.fulfill({ + status: 200, + body: 'ok' + }); + }); + + return lastApiRequest; }