chore(tests/e2e): proof of concept playwright e2e test

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "esbenp.prettier-vscode",
     "thebearingedge.vscode-sql-lit",
     "hashicorp.hcl",
-    "GraphQL.vscode-graphql"
+    "GraphQL.vscode-graphql",
+    "ms-playwright.playwright"
   ]
 }

e2e-tests/__helpers__/page/laboratory.ts

@@ -0,0 +1,33 @@
+import { expect, Locator } from '@playwright/test';
+import { enhancePageWithHelpers, HelpersConstructor } from '../playwright';
+
+export interface LaboratoryHelpers {
+  graphiql: {
+    documentEditor: Locator;
+    documentEditorFill: (text: string) => Promise<void>;
+    buttonNewTab: Locator;
+    buttonCloseTab: Locator;
+  };
+}
+
+export const createLaboratoryHelpers: HelpersConstructor<LaboratoryHelpers> = page => {
+  const documentEditor = page.getByRole('region', { name: 'Query Editor' });
+  const buttonNewTab = page.getByRole('button', { name: 'New tab' });
+  const buttonCloseTab = page.getByRole('button', { name: 'Close Tab' });
+
+  return {
+    graphiql: {
+      documentEditorFill: async (text: string) => {
+        await documentEditor.click();
+        await page.keyboard.press('ControlOrMeta+KeyA');
+        await page.keyboard.type(text);
+        await expect(documentEditor).toContainText(text); // sanity check content changed
+      },
+      documentEditor,
+      buttonNewTab,
+      buttonCloseTab,
+    },
+  };
+};
+
+export const enhancePageWithLaboratoryHelpers = enhancePageWithHelpers(createLaboratoryHelpers);

e2e-tests/__helpers__/playwright.ts

@@ -0,0 +1,10 @@
+import { Page } from '@playwright/test';
+
+export const enhancePageWithHelpers =
+  <page extends Page, helpers extends object>(helpersConstructor: HelpersConstructor<helpers>) =>
+  (page: Page): page & helpers => {
+    Object.assign(page, helpersConstructor(page));
+    return page as page & helpers;
+  };
+
+export type HelpersConstructor<$Helpers extends object> = (page: Page) => $Helpers;

e2e-tests/laboratory/tabs.spec.ts

@@ -0,0 +1,56 @@
+import { expect, Page, test as testBase } from '@playwright/test';
+import {
+  enhancePageWithLaboratoryHelpers,
+  LaboratoryHelpers,
+} from '../__helpers__/page/laboratory';
+import { initSeed } from '../../integration-tests/testkit/seed';
+
+interface Context {
+  page: Page & LaboratoryHelpers;
+}
+
+const test = testBase.extend<Context>({
+  page: async ({ page }, use) => {
+    const seed = initSeed();
+    const owner = await seed.createOwner();
+    const org = await owner.createOrg();
+    const project = await org.createProject();
+
+    await page.context().addCookies([
+      {
+        name: 'sRefreshToken',
+        value: owner.ownerRefreshToken,
+        domain: 'localhost',
+        path: '/',
+      },
+    ]);
+
+    await page.goto(`${project.target.path}/laboratory`);
+    await use(enhancePageWithLaboratoryHelpers(page));
+  },
+});
+
+test('closing the last tab should reset its state to defaults', async ({ page }) => {
+  const { documentEditor, buttonNewTab, buttonCloseTab, documentEditorFill } = page.graphiql;
+
+  const content = {
+    partialDefault: '# Welcome to GraphiQL',
+    document1: 'query { tab1 }',
+    document2: 'query { tab2 }',
+  };
+
+  // Begins with default content
+  await expect(documentEditor).toContainText(content.partialDefault);
+  // Change content
+  await documentEditorFill(content.document1);
+  // Open a new tab
+  await buttonNewTab.click();
+  await documentEditorFill(content.document2);
+  // close tab 2
+  await buttonCloseTab.click();
+  await expect(documentEditor).toContainText(content.document1); // sanity check tab 1 content unchanged
+  // close tab 1
+  await buttonCloseTab.click();
+  // expect a new tab created with default content
+  await expect(documentEditor).toContainText(content.partialDefault);
+});

e2e-tests/playwright.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  globalSetup: './playwright.setup',
+  testDir: './',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

e2e-tests/playwright.setup.js

@@ -0,0 +1,17 @@
+import * as Path from 'node:path';
+import dotenv from 'dotenv';
+
+/**
+ * @see https://playwright.dev/docs/test-configuration#global-setup
+ */
+export default async _config => {
+  const path = process.env.CI
+    ? Path.join(import.meta.dirname, '../integration-tests/.env')
+    : Path.join(import.meta.dirname, '../packages/services/server/.env.template');
+
+  dotenv.config({ path });
+
+  if (!process.env.CI) {
+    process.env.RUN_AGAINST_LOCAL_SERVICES = '1';
+  }
+};

integration-tests/testkit/seed.ts

@@ -210,9 +210,12 @@ export function initSeed() {
                 ownerToken,
               ).then(r => r.expectNoGraphQLErrors());
 
-              const targets = projectResult.createProject.ok!.createdTargets;
-              const target = targets[0];
               const project = projectResult.createProject.ok!.createdProject;
+              const targets = projectResult.createProject.ok!.createdTargets.map(target => ({
+                ...target,
+                path: `/${organization.slug}/${project.slug}/${target.slug}`,
+              }));
+              const target = targets[0];
 
               return {
                 project,

package.json

@@ -44,6 +44,8 @@
     "seed": "tsx scripts/seed-local-env.ts",
     "start": "pnpm run local:setup",
     "test": "vitest",
+    "test:e2e:new": "playwright test --config e2e-tests",
+    "test:e2e:new:dev": "pnpm test:e2e:new --ui",
     "test:e2e": "CYPRESS_BASE_URL=$HIVE_APP_BASE_URL cypress run --browser chrome",
     "test:e2e:local": "CYPRESS_BASE_URL=http://localhost:3000 RUN_AGAINST_LOCAL_SERVICES=1 cypress open --browser chrome",
     "test:e2e:open": "CYPRESS_BASE_URL=$HIVE_APP_BASE_URL cypress open",
@@ -70,6 +72,7 @@
     "@manypkg/get-packages": "2.2.2",
     "@next/eslint-plugin-next": "14.2.23",
     "@parcel/watcher": "2.5.0",
+    "@playwright/test": "^1.50.1",
     "@sentry/cli": "2.40.0",
     "@swc/core": "1.10.6",
     "@theguild/eslint-config": "0.12.1",
@@ -87,6 +90,7 @@
     "gray-matter": "4.0.3",
     "jest-snapshot-serializer-raw": "2.0.0",
     "pg": "8.13.1",
+    "playwright": "^1.50.1",
     "prettier": "3.4.2",
     "prettier-plugin-sql": "0.18.1",
     "prettier-plugin-tailwindcss": "0.6.9",