test: set up BDD/E2E test support

Author: kantord

cucumber.js

@@ -0,0 +1,13 @@
+module.exports = {
+  default: {
+    requireModule: ["ts-node/register/transpile-only"],
+    require: [
+      "tests/bdd/support/world.ts",
+      "tests/bdd/support/hooks.ts",
+      "tests/bdd/steps/**/*.ts",
+    ],
+    paths: ["tests/bdd/features/**/*.feature"],
+    publishQuiet: true,
+    format: ["progress"],
+  },
+};

package.json

@@ -12,6 +12,7 @@
     "lint": "biome check",
     "format": "biome format --write",
     "test": "vitest",
+    "test:bdd": "cucumber-js",
     "type-check": "tsc --noEmit",
     "prepare": "husky",
     "oidc": "node dev-auth/oidc-provider.mjs",
@@ -43,9 +44,12 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.6",
+    "@cucumber/cucumber": "^12.2.0",
+    "@cucumber/messages": "^31.0.0",
     "@hey-api/client-next": "0.5.1",
     "@hey-api/openapi-ts": "0.87.5",
     "@mswjs/http-middleware": "^0.10.2",
+    "@playwright/test": "^1.56.1",
     "@tailwindcss/postcss": "^4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -63,6 +67,7 @@
     "lint-staged": "^16.0.0",
     "oidc-provider": "^9.5.2",
     "tailwindcss": "^4",
+    "ts-node": "^10.9.2",
     "tsx": "4.20.6",
     "typescript": "^5",
     "vite": "^7.2.2",

pnpm-lock.yaml

@@ -0,0 +1,8 @@
+Feature: Login flow
+
+  Scenario: Sign in and land on Catalog
+    Given I am on "/signin"
+    When I click the "Okta" button
+    Then I should be on "/catalog"
+    And I should see a heading "MCP Server Catalog"
+

tests/bdd/features/login.feature

@@ -0,0 +1,41 @@
+import { Given, Then, When } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import type { PlaywrightWorld } from "../support/world";
+
+Given("I am on {string}", async function (this: PlaywrightWorld, path: string) {
+  await this.page.goto(`${this.baseUrl}${path}`);
+});
+
+When(
+  "I click the {string} button",
+  async function (this: PlaywrightWorld, label: string) {
+    await this.page.getByRole("button", { name: label }).click();
+  },
+);
+
+Then(
+  "I should see the text {string}",
+  async function (this: PlaywrightWorld, text: string) {
+    await expect(this.page.getByText(text)).toBeVisible();
+  },
+);
+
+Then(
+  "I should see a heading {string}",
+  async function (this: PlaywrightWorld, heading: string) {
+    await expect(
+      this.page.getByRole("heading", { name: heading }),
+    ).toBeVisible();
+  },
+);
+
+Then(
+  "I should be on {string}",
+  async function (this: PlaywrightWorld, path: string) {
+    await expect(this.page).toHaveURL(
+      new RegExp(
+        `${this.baseUrl}${path.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")}$`,
+      ),
+    );
+  },
+);

tests/bdd/steps/global.steps.ts

@@ -0,0 +1,27 @@
+import { After, Before, setDefaultTimeout } from "@cucumber/cucumber";
+import {
+  type Browser,
+  type BrowserContext,
+  chromium,
+  type Page,
+} from "@playwright/test";
+import type { PlaywrightWorld } from "./world";
+
+let browser: Browser | undefined;
+
+setDefaultTimeout(60 * 1000); // 60s per step
+
+Before(async function (this: PlaywrightWorld) {
+  if (!browser) {
+    browser = await chromium.launch({ headless: true });
+  }
+  const context: BrowserContext = await browser.newContext();
+  const page: Page = await context.newPage();
+  this.context = context;
+  this.page = page;
+});
+
+After(async function (this: PlaywrightWorld) {
+  if (this.page) await this.page.close();
+  if (this.context) await this.context.close();
+});

tests/bdd/support/hooks.ts

@@ -0,0 +1,14 @@
+import { setWorldConstructor, type World } from "@cucumber/cucumber";
+import type { BrowserContext, Page } from "@playwright/test";
+
+export class PlaywrightWorld implements World {
+  page!: Page;
+  context!: BrowserContext;
+  baseUrl: string;
+
+  constructor() {
+    this.baseUrl = process.env.BASE_URL || "http://localhost:3000";
+  }
+}
+
+setWorldConstructor(PlaywrightWorld);

tests/bdd/support/world.ts

@@ -0,0 +1,7 @@
+// Local ts-node registration for Cucumber with CommonJS output
+require("ts-node").register({
+  transpileOnly: true,
+  compilerOptions: {
+    module: "commonjs",
+  },
+});

tests/bdd/ts-node.js

@@ -31,5 +31,5 @@
     "**/*.mts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules", ".next/dev/types/**"]
+  "exclude": ["node_modules", ".next/dev/types/**", "tests/bdd/**"]
 }