chore: add console e2e testing with playwright (#2462)

Fixes #2416

.github/workflows/ci.yml

@@ -136,6 +136,8 @@ jobs:
         run: npm run lint
       - name: Console Build
         run: just build-frontend
+      - name: Console Test
+        run: just test-frontend
   extension:
     name: VSCode Extension
     runs-on: ubuntu-latest

Justfile

@@ -153,6 +153,9 @@ test-scripts:
     GIT_AUTHOR_EMAIL="[email protected]" \
     scripts/tests/test-ensure-frozen-migrations.sh
 
+test-frontend: build-frontend
+  @cd frontend && npx playwright install --with-deps && npm run test
+
 # Lint the frontend
 lint-frontend: build-frontend
   @cd frontend && npm run lint && tsc
@@ -233,4 +236,4 @@ grafana-stop:
 
 storybook:
   #!/bin/bash
-  cd frontend && npm run storybook
+  cd frontend && npm run storybook

frontend/.gitignore

@@ -23,4 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 */.parcel-cache
-*storybook.log
+*storybook.log
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

frontend/biome.json

@@ -18,14 +18,14 @@
         "noArrayIndexKey": "off"
       }
     },
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "src/**/*.cjs", "src/**/*.mjs"],
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "src/**/*.cjs", "src/**/*.mjs", "tests/**/*.ts"],
     "ignore": ["./node_modules", "./dist", "./src/protos"]
   },
   "formatter": {
     "indentStyle": "space",
     "indentWidth": 2,
     "lineWidth": 160,
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "src/**/*.cjs", "src/**/*.mjs"],
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "src/**/*.cjs", "src/**/*.mjs", "tests/**/*.ts"],
     "ignore": ["./node_modules", "./dist", "./src/protos"]
   },
   "javascript": {

frontend/package.json

@@ -10,13 +10,18 @@
     "dev": "vite",
     "lint": "biome check .",
     "lint:fix": "biome format . --write",
+    "test": "playwright test",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "lint-staged": {
-    "*.(js|cjs|tsx|ts)": ["npm run lint:fix"]
+    "*.(js|cjs|tsx|ts)": [
+      "npm run lint:fix"
+    ]
   },
-  "browserslist": ["> 2%"],
+  "browserslist": [
+    "> 2%"
+  ],
   "source": "index.html",
   "dependencies": {
     "@bufbuild/protoc-gen-es": "1.10.0",
@@ -51,6 +56,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
     "@chromatic-com/storybook": "^1.6.1",
+    "@playwright/test": "^1.46.1",
     "@storybook/addon-essentials": "^8.2.7",
     "@storybook/addon-interactions": "^8.2.7",
     "@storybook/addon-links": "^8.2.7",
@@ -62,6 +68,7 @@
     "@storybook/react-vite": "^8.2.7",
     "@storybook/test": "^8.2.7",
     "@tanstack/eslint-plugin-query": "^5.51.15",
+    "@types/node": "^22.4.1",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "buffer": "^6.0.3",

frontend/playwright.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  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: 'html',
+  use: {
+    baseURL: 'http://localhost:8892',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  webServer: {
+    command: 'ftl dev --recreate',
+    url: 'http://localhost:8892',
+    reuseExistingServer: true,
+  },
+});

frontend/src/layout/navigation/Navigation.tsx

@@ -73,6 +73,7 @@ export const Navigation = ({
                                   {item.name}
                                   {['/modules', '/deployments'].includes(item.href) && (
                                     <span
+                                      id='deployments-count'
                                       className='ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-white ring-1 ring-inset ring-indigo-500'
                                       aria-hidden='true'
                                     >

frontend/tests/deployment.spec.ts

@@ -0,0 +1,14 @@
+import { expect, ftlTest } from './ftl-test'
+
+ftlTest('shows verbs for deployment', async ({ page }) => {
+  const deploymentsNavItem = page.getByRole('link', { name: 'Deployments' })
+  await deploymentsNavItem.click()
+
+  const deploymentEcho = page.getByText('dpl-echo')
+  await deploymentEcho.click()
+
+  await expect(page).toHaveURL(/\/deployments\/dpl-echo-.*/)
+
+  await expect(page.getByText('echo', { exact: true })).toBeVisible()
+  await expect(page.getByText('exported', { exact: true })).toBeVisible()
+})

frontend/tests/deployments.spec.ts

@@ -0,0 +1,10 @@
+import { expect, ftlTest } from './ftl-test'
+
+ftlTest('shows active deployments', async ({ page }) => {
+  const deploymentsNavItem = page.getByRole('link', { name: 'Deployments' })
+  await deploymentsNavItem.click()
+  await expect(page).toHaveURL(/\/deployments$/)
+
+  await expect(page.getByText('dpl-time')).toBeVisible()
+  await expect(page.getByText('dpl-echo')).toBeVisible()
+})

frontend/tests/events.spec.ts

@@ -0,0 +1,7 @@
+import { expect, ftlTest } from './ftl-test'
+
+ftlTest('defaults to the events page', async ({ page }) => {
+  const eventsNavItem = page.getByRole('link', { name: 'Events' })
+
+  await expect(eventsNavItem).toHaveClass(/bg-indigo-600 text-white/)
+})

frontend/tests/ftl-test.ts

@@ -0,0 +1,17 @@
+import { test as base, expect } from '@playwright/test'
+
+const ftlTest = base.extend<{
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  page: any
+}>({
+  page: async ({ page }, use) => {
+    await page.goto('http://localhost:8892')
+    await page.waitForFunction(() => {
+      const element = document.querySelector('#deployments-count')
+      return element && element.textContent?.trim() === '2'
+    })
+    await use(page)
+  },
+})
+
+export { ftlTest, expect }

frontend/tests/verb.spec.ts

@@ -0,0 +1,23 @@
+import { expect, ftlTest } from './ftl-test'
+
+ftlTest.beforeEach(async ({ page }) => {
+  const deploymentsNavItem = page.getByRole('link', { name: 'Deployments' })
+  await deploymentsNavItem.click()
+
+  const deploymentEcho = page.getByText('dpl-echo')
+  await deploymentEcho.click()
+
+  const verbEcho = page.getByText('echo', { exact: true })
+  await verbEcho.click()
+
+  await expect(page).toHaveURL(/\/deployments\/dpl-echo-[^/]+\/verbs\/echo/)
+})
+
+ftlTest('shows verb form', async ({ page }) => {
+  await expect(page.getByText('CALL', { exact: true })).toBeVisible()
+  await expect(page.locator('input#request-path')).toHaveValue('echo.echo')
+
+  await expect(page.getByText('Body', { exact: true })).toBeVisible()
+  await expect(page.getByText('Verb Schema', { exact: true })).toBeVisible()
+  await expect(page.getByText('JSONSchema', { exact: true })).toBeVisible()
+})