From ecee7ecaf5cc037e5a6557f01b712dbdb503b540 Mon Sep 17 00:00:00 2001 From: abhi1693 Date: Sat, 7 Feb 2026 17:01:00 +0000 Subject: [PATCH] E2E: remove Clerk bypass and sign in via Clerk in Cypress --- .github/workflows/ci.yml | 37 +++++++++++++++--------- frontend/cypress.config.ts | 3 +- frontend/cypress/e2e/activity_feed.cy.ts | 15 ++++++++++ frontend/src/auth/clerk.tsx | 6 ++-- 4 files changed, 42 insertions(+), 19 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 988f9847..ad1fa060 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -99,18 +99,29 @@ jobs: cache: npm cache-dependency-path: frontend/package-lock.json - - name: Cypress run - uses: cypress-io/github-action@v6 - with: - working-directory: frontend - install-command: npm ci - build: npm run build - # Bind to loopback to avoid CI network flakiness. - start: npm start -- -H 127.0.0.1 -p 3000 - wait-on: http://127.0.0.1:3000 - command: npm run e2e - browser: chrome + - name: Install frontend dependencies + run: make frontend-sync + + - name: Start frontend (dev server) env: NEXT_TELEMETRY_DISABLED: "1" - # Force Clerk disabled in E2E to keep tests secretless/deterministic. - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: "" + CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }} + NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }} + CLERK_JWKS_URL: ${{ vars.CLERK_JWKS_URL }} + run: | + cd frontend + npm run dev -- --port 3000 & + for i in {1..60}; do + if curl -sf http://localhost:3000/ > /dev/null; then exit 0; fi + sleep 2 + done + echo "Frontend did not start" + exit 1 + + - name: Run Cypress E2E + env: + NEXT_TELEMETRY_DISABLED: "1" + NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }} + run: | + cd frontend + npm run e2e diff --git a/frontend/cypress.config.ts b/frontend/cypress.config.ts index 218a5061..377f873a 100644 --- a/frontend/cypress.config.ts +++ b/frontend/cypress.config.ts @@ -2,8 +2,7 @@ import { defineConfig } from "cypress"; export default defineConfig({ e2e: { - // Use loopback to avoid network/proxy flakiness in CI. - baseUrl: "http://127.0.0.1:3000", + baseUrl: "http://localhost:3000", video: false, screenshotOnRunFailure: true, specPattern: "cypress/e2e/**/*.cy.{ts,tsx,js,jsx}", diff --git a/frontend/cypress/e2e/activity_feed.cy.ts b/frontend/cypress/e2e/activity_feed.cy.ts index a16eee67..73f0b31b 100644 --- a/frontend/cypress/e2e/activity_feed.cy.ts +++ b/frontend/cypress/e2e/activity_feed.cy.ts @@ -28,6 +28,7 @@ describe("/activity feed", () => { .clear() .type("jane+clerk_test@example.com"); +<<<<<<< HEAD cy.contains('button', /continue|sign in/i).click(); cy.get('input', { timeout: 20_000 }) @@ -40,6 +41,18 @@ describe("/activity feed", () => { // Back to app cy.contains(/live feed/i, { timeout: 30_000 }).should("be.visible"); +======= + // OTP / verification code + cy.contains(/verification code|code/i).should("be.visible"); + cy + .get('input') + .filter('[inputmode="numeric"], [autocomplete="one-time-code"], [type="tel"], [type="text"]') + .first() + .type("424242"); + + cy.contains('button', /verify|continue|sign in/i).click(); + cy.contains(/live feed/i).should('be.visible'); +>>>>>>> 446cfb2 (E2E: remove Clerk bypass and sign in via Clerk in Cypress) } <<<<<<< HEAD @@ -82,6 +95,8 @@ describe("/activity feed", () => { .first() .type("000000"); + cy.contains('button', /verify|continue|sign in/i).click(); + // Clerk should display an error message. cy.contains(/invalid|incorrect|try again/i).should("be.visible"); >>>>>>> a6188f5 (test(e2e): add negative auth case (wrong OTP)) diff --git a/frontend/src/auth/clerk.tsx b/frontend/src/auth/clerk.tsx index 02cff2c8..c134a699 100644 --- a/frontend/src/auth/clerk.tsx +++ b/frontend/src/auth/clerk.tsx @@ -1,10 +1,10 @@ "use client"; -import type { ReactNode } from "react"; - // NOTE: We intentionally keep this file very small and dependency-free. // It provides CI/secretless-build safe fallbacks for Clerk hooks/components. +import type { ReactNode, ComponentProps } from "react"; + import { ClerkProvider, SignedIn as ClerkSignedIn, @@ -15,8 +15,6 @@ import { useUser as clerkUseUser, } from "@clerk/nextjs"; -import type { ComponentProps } from "react"; - import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey"; export function isClerkEnabled(): boolean {