feat: add cucumber ui tests

Author: guenhter

.github/workflows/format-check.yml

@@ -2,7 +2,6 @@ name: Format Check
 
 on:
   push:
-  pull_request:
 
 jobs:
   backend-format:

.github/workflows/test.yml

@@ -0,0 +1,59 @@
+name: Tests
+
+on:
+  push:
+
+jobs:
+  backend-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+      - name: Install uv
+        run: curl -LsSf https://astral.sh/uv/install.sh | sh
+      - name: Sync dependencies
+        working-directory: backend
+        run: uv sync
+      - name: Run tests
+        working-directory: backend
+        run: uv run pytest
+
+  frontend-vitest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Install dependencies
+        working-directory: frontend_omni
+        run: pnpm install
+      - name: Run vitest tests
+        working-directory: frontend_omni
+        run: pnpm test
+
+  frontend-cucumber:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Install dependencies
+        working-directory: frontend_omni
+        run: pnpm install
+      - name: Install Playwright browsers
+        working-directory: frontend_omni
+        run: pnpm playwright install --with-deps
+      - name: Run cucumber tests
+        working-directory: frontend_omni
+        run: pnpm test:cucumber

frontend_omni/README.md

@@ -16,3 +16,14 @@ The frontend is now available under http://localhost:5173
 **React Compionents**: PascalCase
 **React Services/Hooks**: camalCase
 **Folders**: kebab-case
+
+## Testiong
+
+### VS Code Cucumber Extension
+
+In order to make the cucumber extension find cucumber tests, the paths must be adapted for
+
+- `cucumber.features` and
+- `cucumber.glue`.
+
+The `frontend_onmi` must be prepended to all the paths.

frontend_omni/cucumber.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  default: {
+    import: ["tests/**/*.ts"],
+    format: ["progress"],
+    formatOptions: {
+      snippetInterface: "async-await",
+    },
+    paths: ["features/**/*.feature"],
+    publishQuiet: true,
+  },
+};

frontend_omni/features/app_load.feature

@@ -0,0 +1,6 @@
+Feature: App loads successfully
+
+  Scenario: User opens the app
+    Given the app is running
+    When I visit the homepage
+    Then I should see the page title contains "modAI"

frontend_omni/package.json

@@ -8,9 +8,12 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "format:check": "prettier --check .",
+    "format:write": "prettier --write .",
     "check": "pnpm build && pnpm lint && pnpm format:check",
     "preview": "vite preview",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:cucumber": "cucumber-js",
+    "test:cucumber:headed": "HEADED=true cucumber-js"
   },
   "dependencies": {
     "@ai-sdk/openai": "^2.0.52",
@@ -60,7 +63,9 @@
     "use-stick-to-bottom": "^1.1.1"
   },
   "devDependencies": {
+    "@cucumber/cucumber": "^12.2.0",
     "@eslint/js": "^9.33.0",
+    "@playwright/test": "^1.56.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^24.3.0",
@@ -74,8 +79,10 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
     "jsdom": "^27.0.0",
+    "playwright": "^1.56.1",
     "prettier": "^3.3.3",
     "tailwind-scrollbar": "^4.0.2",
+    "ts-node": "^10.9.2",
     "tw-animate-css": "^1.3.7",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",

frontend_omni/playwright.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    testDir: "./tests",
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: "html",
+    use: {
+        baseURL: "http://localhost:5173",
+        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: "pnpm dev",
+        url: "http://localhost:5173",
+        reuseExistingServer: !process.env.CI,
+    },
+});