ci: run web Jest unit tests and Playwright e2e in CI (parallel to existing jobs)

Author: brandonkachen

.github/workflows/ci.yml

@@ -154,6 +154,8 @@ jobs:
             cd ${{ matrix.package }}
             if [ "${{ matrix.package }}" = ".agents" ]; then
               find __tests__ -name '*.test.ts' ! -name '*.integration.test.ts' 2>/dev/null | sort | xargs -I {} bun test {} || echo "No regular tests found in .agents"
+            elif [ "${{ matrix.package }}" = "web" ]; then
+              bun run test --runInBand
             else
               find src -name '*.test.ts' ! -name '*.integration.test.ts' | sort | xargs -I {} bun test {}
             fi
@@ -244,6 +246,52 @@ jobs:
               find src -name '*.integration.test.ts' | sort | xargs -I {} bun test {}
             fi
 
+  # E2E tests for web using Playwright
+  test-e2e-web:
+    needs: [build-and-check]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: '1.3.0'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+            */node_modules
+            packages/*/node_modules
+          key: ${{ runner.os }}-deps-${{ hashFiles('**/bun.lock*') }}
+          restore-keys: |
+            ${{ runner.os }}-deps-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Set environment variables
+        env:
+          SECRETS_CONTEXT: ${{ toJSON(secrets) }}
+        run: |
+          VAR_NAMES=$(bun scripts/generate-ci-env.ts)
+          echo "$SECRETS_CONTEXT" | jq -r --argjson vars "$VAR_NAMES" '
+            to_entries | .[] | select(.key as $k | $vars | index($k)) | .key + "=" + .value
+          ' >> $GITHUB_ENV
+          echo "CODEBUFF_GITHUB_ACTIONS=true" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_CB_ENVIRONMENT=test" >> $GITHUB_ENV
+
+      - name: Run Playwright tests for web
+        run: |
+          cd web
+          bun run e2e --reporter=list
+
       # - name: Open interactive debug shell
       #   if: ${{ failure() }}
       #   uses: mxschmitt/action-tmate@v3

web/playwright.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
   ],
 
   webServer: {
-    command: 'bun run dev',
+    command: 'NEXT_PUBLIC_WEB_PORT=3001 bun run dev',
     url: 'http://127.0.0.1:3001',
     reuseExistingServer: !process.env.CI,
   },

web/src/__tests__/e2e/store-hydration.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('store hydrates agents via client fetch when SSR is empty', async ({ page }) => {
+  const agents = [
+    {
+      id: 'base',
+      name: 'Base',
+      description: 'desc',
+      publisher: { id: 'codebuff', name: 'Codebuff', verified: true, avatar_url: null },
+      version: '1.2.3',
+      created_at: new Date().toISOString(),
+      weekly_spent: 10,
+      weekly_runs: 5,
+      usage_count: 50,
+      total_spent: 100,
+      avg_cost_per_invocation: 0.2,
+      unique_users: 3,
+      last_used: new Date().toISOString(),
+      version_stats: {},
+      tags: ['test'],
+    },
+  ]
+
+  // Intercept client-side fetch to /api/agents to return our fixture
+  await page.route('**/api/agents', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(agents),
+    })
+  })
+
+  await page.goto('/store')
+
+  // Expect the agent card to render after hydration by checking the copy button title
+  await expect(
+    page.getByTitle('Copy: codebuff --agent codebuff/base@1.2.3').first(),
+  ).toBeVisible()
+})

web/src/app/api/agents/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server'
 
 import { logger } from '@/util/logger'
+import { applyCacheHeaders } from '@/server/apply-cache-headers'
 import { getCachedAgents } from '@/server/agents-data'
 
 // ISR Configuration for API route
@@ -12,19 +13,7 @@ export async function GET() {
     const result = await getCachedAgents()
 
     const response = NextResponse.json(result)
-
-    // Add optimized cache headers for better performance
-    response.headers.set(
-      'Cache-Control',
-      'public, max-age=300, s-maxage=600, stale-while-revalidate=3600',
-    )
-
-    // Add compression and optimization headers
-    response.headers.set('Vary', 'Accept-Encoding')
-    response.headers.set('X-Content-Type-Options', 'nosniff')
-    response.headers.set('Content-Type', 'application/json; charset=utf-8')
-
-    return response
+    return applyCacheHeaders(response)
   } catch (error) {
     logger.error({ error }, 'Error fetching agents')
     return NextResponse.json(

web/src/server/__tests__/apply-cache-headers.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from '@jest/globals'
+import { applyCacheHeaders } from '../apply-cache-headers'
+
+describe('applyCacheHeaders', () => {
+  it('sets expected cache and content headers', () => {
+    const map = new Map<string, string>()
+    const res = { headers: { set: (k: string, v: string) => map.set(k, v) } }
+
+    const out = applyCacheHeaders(res)
+    expect(out).toBe(res)
+    expect(map.get('Cache-Control')).toContain('public')
+    expect(map.get('Vary')).toBe('Accept-Encoding')
+    expect(map.get('X-Content-Type-Options')).toBe('nosniff')
+    expect(map.get('Content-Type')).toContain('application/json')
+  })
+})
+

web/src/server/apply-cache-headers.ts

@@ -0,0 +1,15 @@
+export interface HeaderWritable {
+  headers: { set: (k: string, v: string) => void }
+}
+
+export function applyCacheHeaders<T extends HeaderWritable>(res: T): T {
+  res.headers.set(
+    'Cache-Control',
+    'public, max-age=300, s-maxage=600, stale-while-revalidate=3600',
+  )
+  res.headers.set('Vary', 'Accept-Encoding')
+  res.headers.set('X-Content-Type-Options', 'nosniff')
+  res.headers.set('Content-Type', 'application/json; charset=utf-8')
+  return res
+}
+