test: add e2e tests with playwright (#99)

* feat: add e2e tests with playwright

* test: enhance and define port in one place

* test: adapt playwright workflow

* Update .github/workflows/playwright.yml

Co-authored-by: Manuel Spigolon <[email protected]>

* Update .github/workflows/playwright.yml

Co-authored-by: Manuel Spigolon <[email protected]>

* test: run playwright tests in ci workflow

* test: add playwright job permissions

---------

Co-authored-by: Manuel Spigolon <[email protected]>

.github/workflows/ci.yml

@@ -16,8 +16,12 @@ on:
       - '*.md'
 
 jobs:
+  e2e:
+    uses: ./.github/workflows/playwright.yml
+
   test:
     uses: fastify/workflows/.github/workflows/plugins-ci.yml@v3
+    needs: e2e
     with:
       license-check: true
       lint: true

.github/workflows/playwright.yml

@@ -0,0 +1,25 @@
+name: Playwright Tests
+
+on:
+  workflow_dispatch:
+  workflow_call:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    timeout-minutes: 60
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm i
+    - name: Install Playwright Browsers
+      run: npx playwright@1 install chromium --with-deps
+    - name: Run Playwright tests
+      run: npx playwright@1 test

.gitignore

@@ -150,3 +150,6 @@ yarn.lock
 # editor files
 .vscode
 .idea
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e/custom.test.js

@@ -0,0 +1,47 @@
+'use strict'
+
+const { test, expect } = require('@playwright/test')
+
+const URL_DOCUMENTATION = '/documentation'
+const URL_FAVICON = '/documentation/static/theme/favicon.svg'
+
+test.describe('Check customizations', () => {
+  test('Check JS injection', async ({ page }) => {
+    await page.goto(URL_DOCUMENTATION)
+    await page.waitForLoadState('networkidle')
+
+    page.on('dialog', async dialog => {
+      expect(dialog.type() === 'beforeunload').toBeTruthy()
+      expect(dialog.message() === 'unloaded test-theme').toBeTruthy()
+      await dialog.dismiss()
+    })
+    await page.close({ runBeforeUnload: true })
+  })
+
+  test('Check CSS injection', async ({ page }) => {
+    await page.goto(URL_DOCUMENTATION)
+    await page.waitForLoadState('networkidle')
+
+    const element = await page.waitForSelector('button.download-url-button')
+    const color = await element.evaluate(el => window.getComputedStyle(el).getPropertyValue('background-color'))
+    expect(color).toBe('rgb(255, 0, 0)')
+  })
+
+  test('Check custom favicon', async ({ page }) => {
+    await page.goto(URL_FAVICON)
+
+    const faviconId = await (await page.waitForSelector('svg')).getAttribute('id')
+    expect(faviconId).toBe('example-logo') // it is included in the svg file
+  })
+
+  test('Check custom logo', async ({ page }) => {
+    await page.goto(URL_DOCUMENTATION)
+    await page.waitForLoadState('networkidle')
+
+    const logoSrc = await page.locator('img').first().getAttribute('src')
+    await page.goto(logoSrc)
+
+    const logoId = await (await page.waitForSelector('svg')).getAttribute('id')
+    expect(logoId).toBe('example-logo') // it is included in the svg file
+  })
+})

examples/example-e2e.js

@@ -0,0 +1,46 @@
+'use strict'
+
+const fastify = require('fastify')({ logger: true })
+const readFileSync = require('node:fs').readFileSync
+const resolve = require('node:path').resolve
+
+const exampleLogo = readFileSync(
+  resolve(__dirname, '..', 'examples/static', 'example-logo.svg'),
+  'utf8'
+)
+
+fastify.register(require('@fastify/swagger'), {
+  mode: 'static',
+  specification: {
+    path: './examples/example-static-specification.json'
+  }
+})
+
+fastify.register(require('../index'), {
+  theme: {
+    js: [
+      { filename: 'unloaded.js', content: 'window.onbeforeunload = function(){alert("unloaded test-theme")}' }
+    ],
+    css: [
+      { filename: 'theme.css', content: '.download-url-button {background: red !important;}' }
+    ],
+    favicon: [
+      {
+        filename: 'favicon.svg',
+        rel: 'icon',
+        sizes: '16x16',
+        type: 'image/svg+xml',
+        content: exampleLogo
+      }
+    ]
+  },
+  logo: {
+    type: 'image/svg+xml',
+    content: exampleLogo
+  }
+})
+
+fastify.listen({ port: process.env.PORT }, (err) => {
+  if (err) throw err
+  fastify.log.info(`visit the documentation at http://127.0.0.1:${process.env.PORT}/documentation/`)
+})

package.json

@@ -13,6 +13,9 @@
     "prepublishOnly": "npm run prepare",
     "test": "npm run prepare && npm run coverage && npm run typescript",
     "test:dev": "npm run lint && npm run unit && npm run typescript",
+    "test:e2e:command": "node ./examples/example-e2e.js",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
     "typescript": "tsd",
     "unit": "tap",
     "unit:report": "npm run unit -- --coverage-report=html",
@@ -48,6 +51,7 @@
     "@fastify/helmet": "^11.0.0",
     "@fastify/pre-commit": "^2.0.2",
     "@fastify/swagger": "^8.0.0",
+    "@playwright/test": "^1.39.0",
     "@types/node": "^20.1.1",
     "ajv": "^8.11.0",
     "fastify": "^4.0.0",

playwright.config.js

@@ -0,0 +1,32 @@
+'use strict'
+
+const { defineConfig, devices } = require('@playwright/test')
+
+const PORT = 3000
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: `http://127.0.0.1:${PORT}/documentation`,
+    trace: 'on-first-retry'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ],
+  webServer: {
+    command: `PORT=${PORT} npm run test:e2e:command`,
+    url: `http://127.0.0.1:${PORT}/documentation`,
+    reuseExistingServer: !process.env.CI
+  }
+})