Added Playwright tests to Signup Form

refs https://github.com/TryGhost/Team/issues/3298

.gitignore

@@ -133,6 +133,9 @@ Caddyfile
 # Signup Form and local environments
 /ghost/signup-form/umd
 /ghost/signup-form/.env*.local
+/ghost/signup-form/test-results/
+/ghost/signup-form/playwright-report/
+/ghost/signup-form/playwright/.cache/
 
 # Announcement-Bar
 /ghost/announcement-bar/umd

ghost/signup-form/README.md

@@ -34,3 +34,6 @@ Follow the instructions for the top-level repo.
 
 - `yarn lint` run just eslint
 - `yarn test` run lint and tests
+- `yarn test:e2e` run e2e tests on Chromium
+- `yarn test:slowmo` run e2e tests visually (headed) and slower on Chromium
+- `yarn test:e2e:full` run e2e tests on all browsers

ghost/signup-form/package.json

@@ -18,10 +18,14 @@
   },
   "scripts": {
     "dev": "concurrently \"vite --port 6173\" \"vite preview -l silent\" \"vite build --watch\"",
+    "dev:test": "vite build && vite preview --port 6175",
     "build": "tsc && vite build",
     "lint": "yarn run lint:js",
     "lint:js": "eslint --ext .js,.ts,.cjs,.tsx --cache src test",
     "test:unit": "yarn build",
+    "test:e2e": "NODE_OPTIONS='--experimental-specifier-resolution=node --no-warnings' VITE_TEST=true playwright test",
+    "test:slowmo": "TIMEOUT=100000 PLAYWRIGHT_SLOWMO=100 yarn test:e2e --headed",
+    "test:e2e:full": "ALL_BROWSERS=1 yarn test:e2e",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -35,6 +39,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "1.34.2",
     "@storybook/addon-essentials": "7.0.15",
     "@storybook/addon-interactions": "7.0.15",
     "@storybook/addon-links": "7.0.15",
@@ -70,4 +75,4 @@
     "vite-plugin-svgr": "3.2.0",
     "vitest": "0.31.1"
   }
-  }
+}

ghost/signup-form/playwright.config.ts

@@ -0,0 +1,57 @@
+import {defineConfig, devices} from '@playwright/test';
+
+export const E2E_PORT = 6175;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './test/e2e',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+        launchOptions: {
+            slowMo: parseInt(process.env.PLAYWRIGHT_SLOWMO ?? '') || 0,
+            // force GPU hardware acceleration
+            // (even in headless mode)
+            args: ['--use-gl=egl']
+        }
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: {...devices['Desktop Chrome']}
+        },
+
+        ...(process.env.ALL_BROWSERS ? [{
+            name: 'firefox',
+            use: {...devices['Desktop Firefox']}
+        },
+
+        {
+            name: 'webkit',
+            use: {...devices['Desktop Safari']}
+        }] : [])
+    ],
+
+    /* Run local dev server before starting the tests */
+    webServer: {
+        command: `yarn dev:test`,
+        url: `http://localhost:${E2E_PORT}/signup-form.min.js`,
+        reuseExistingServer: !process.env.CI,
+        timeout: 10000
+    }
+});

ghost/signup-form/test/e2e/form.test.ts

@@ -0,0 +1,49 @@
+import {expect} from '@playwright/test';
+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.'});
+
+        // 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'});
+
+        // Check no title or description present
+        await expect(frame.getByRole('heading')).toHaveCount(0);
+        await expect(frame.getByRole('paragraph')).toHaveCount(0);
+    });
+});
+

ghost/signup-form/test/unit/hello.test.js

@@ -3,6 +3,6 @@ const assert = require('assert');
 describe('Hello world', function () {
     it('Runs a test', function () {
         // TODO: Write me!
-        assert.ok(require('../index'));
+        assert.ok(require('../../index'));
     });
 });

ghost/signup-form/test/utils/e2e.ts

@@ -0,0 +1,20 @@
+import {E2E_PORT} from '../../playwright.config';
+
+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});
+
+    await page.evaluate((data) => {
+        const scriptTag = document.createElement('script');
+        scriptTag.src = data.url;
+
+        for (const option of Object.keys(data.options)) {
+            scriptTag.dataset[option] = data.options[option];
+        }
+        document.body.appendChild(scriptTag);
+    }, {url, options});
+    await page.waitForSelector('iframe');
+    return page.frameLocator('iframe');
+}

ghost/signup-form/test/utils/isTestEnv.js

@@ -0,0 +1 @@
+export const isTestEnv = import.meta.env.VITE_TEST === 'true';