Add code coverage

Author: dcramer

.github/workflows/e2e.yml

@@ -5,13 +5,13 @@ on:
     paths:
       - 'packages/mcp-server/**'
       - 'packages/mcp-cloudflare/**'
-      - 'packages/e2e/**'
+      - 'packages/mcp-cloudflare-e2e/**'
   push:
     branches: [main]
     paths:
       - 'packages/mcp-server/**'
       - 'packages/mcp-cloudflare/**'
-      - 'packages/e2e/**'
+      - 'packages/mcp-cloudflare-e2e/**'
 
 permissions:
   contents: read
@@ -54,12 +54,29 @@ jobs:
       - name: Build packages
         run: pnpm build
 
-      - name: Run E2E tests
-        run: pnpm test:e2e
+      - name: Run E2E tests with coverage
+        run: pnpm --filter=@sentry/mcp-cloudflare-e2e test:ci
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+        with:
+          directory: packages/mcp-cloudflare-e2e/coverage/
+          flags: e2e
+          name: codecov-e2e
+          fail_ci_if_error: false
 
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: packages/e2e/playwright-report/
-          retention-days: 30
+          path: packages/mcp-cloudflare-e2e/playwright-report/
+          retention-days: 30
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: e2e-test-results
+          path: packages/mcp-cloudflare-e2e/test-results.xml
+          retention-days: 30

biome.json

@@ -27,6 +27,9 @@
       },
       "security": {
         "noDangerouslySetInnerHtml": "off"
+      },
+      "a11y": {
+        "useSemanticElements": "off"
       }
     }
   },

packages/mcp-cloudflare-e2e/package.json

@@ -5,6 +5,8 @@
   "description": "End-to-end tests for Sentry MCP",
   "scripts": {
     "test": "playwright test",
+    "test:coverage": "mkdir -p coverage && playwright test && nyc report --reporter=lcov --reporter=json --reporter=text",
+    "test:ci": "mkdir -p coverage && playwright test --reporter=junit",
     "test:headed": "playwright test --headed",
     "test:ui": "playwright test --ui",
     "test:debug": "playwright test --debug",
@@ -13,6 +15,8 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.43.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "nyc": "^17.1.0",
+    "@types/node": "^22.10.6"
   }
 }

packages/mcp-cloudflare-e2e/playwright.config.ts

@@ -14,7 +14,9 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  reporter: process.env.CI
+    ? [["junit", { outputFile: "test-results.xml" }], ["html"]]
+    : "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

packages/mcp-cloudflare-e2e/tests/coverage.setup.ts

@@ -0,0 +1,13 @@
+import { test as setup } from "@playwright/test";
+
+setup("collect coverage", async ({ page }) => {
+  // Enable coverage collection
+  await page.coverage.startJSCoverage({
+    resetOnNavigation: false,
+  });
+
+  // Enable CSS coverage as well
+  await page.coverage.startCSSCoverage({
+    resetOnNavigation: false,
+  });
+});

packages/mcp-cloudflare-e2e/tests/simple.spec.ts

@@ -1,6 +1,42 @@
 import { test, expect } from "@playwright/test";
+import fs from "node:fs";
 
 test.describe("Simple Application Tests", () => {
+  const jsCoverage: any[] = [];
+  const cssCoverage: any[] = [];
+
+  test.beforeEach(async ({ page }) => {
+    // Start coverage collection for each test
+    await page.coverage.startJSCoverage();
+    await page.coverage.startCSSCoverage();
+  });
+
+  test.afterEach(async ({ page }) => {
+    // Collect coverage after each test
+    const jsResults = await page.coverage.stopJSCoverage();
+    const cssResults = await page.coverage.stopCSSCoverage();
+
+    jsCoverage.push(...jsResults);
+    cssCoverage.push(...cssResults);
+  });
+
+  test.afterAll(async () => {
+    // Write coverage data to files
+    if (jsCoverage.length > 0) {
+      fs.mkdirSync("coverage", { recursive: true });
+      fs.writeFileSync(
+        "coverage/js-coverage.json",
+        JSON.stringify(jsCoverage, null, 2),
+      );
+    }
+    if (cssCoverage.length > 0) {
+      fs.mkdirSync("coverage", { recursive: true });
+      fs.writeFileSync(
+        "coverage/css-coverage.json",
+        JSON.stringify(cssCoverage, null, 2),
+      );
+    }
+  });
   test("should load without errors", async ({ page }) => {
     await page.goto("/");
 

packages/mcp-cloudflare/src/client/components/ui/sliding-panel.tsx

@@ -47,25 +47,29 @@ export function SlidingPanel({
         />
 
         {/* Panel */}
-        <dialog
-          open={isOpen}
+        <div
           className={`fixed inset-y-0 right-0 w-full max-w-2xl bg-slate-950 border-l border-slate-800 z-50 shadow-2xl flex flex-col transition-transform duration-500 ease-in-out ${
             isOpen ? "translate-x-0" : "translate-x-full"
           } ${className}`}
+          role="dialog"
+          aria-modal="true"
+          aria-hidden={!isOpen}
         >
           {children}
-        </dialog>
+        </div>
       </div>
 
       {/* Desktop: Fixed right half */}
-      <dialog
-        open={isOpen}
+      <div
         className={`${
           isOpen ? "hidden md:flex" : "hidden"
         } fixed top-0 right-0 h-screen w-1/2 bg-slate-950 flex-col border-l border-slate-800 transition-opacity duration-300 ${className}`}
+        role="dialog"
+        aria-modal="true"
+        aria-hidden={!isOpen}
       >
         {children}
-      </dialog>
+      </div>
     </>
   );
 }

packages/mcp-cloudflare/vite.config.ts

@@ -5,7 +5,7 @@ import { cloudflare } from "@cloudflare/vite-plugin";
 import tailwindcss from "@tailwindcss/vite";
 import path from "node:path";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     react(),
     cloudflare(),
@@ -27,4 +27,11 @@ export default defineConfig({
     port: 5173,
     strictPort: true, // Fail if port is in use
   },
-});
+  // Enable instrumentation for coverage in e2e test mode
+  define:
+    mode === "e2e-test"
+      ? {
+          __COVERAGE__: true,
+        }
+      : {},
+}));