e2e: remove auth bypass; use real Clerk sign-in in Cypress
This commit is contained in:
10
docs/e2e-auth.md
Normal file
10
docs/e2e-auth.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# E2E auth (Cypress)
|
||||||
|
|
||||||
|
Hard requirement: **no auth bypass** for Cypress E2E.
|
||||||
|
|
||||||
|
- Cypress tests must use real Clerk sign-in.
|
||||||
|
- CI should inject Clerk keys into the Cypress job environment.
|
||||||
|
|
||||||
|
Test account (non-secret):
|
||||||
|
- email: `jane+clerk_test@example.com`
|
||||||
|
- OTP: `424242`
|
||||||
@@ -4,7 +4,6 @@ describe("/activity feed", () => {
|
|||||||
const apiBase = "**/api/v1";
|
const apiBase = "**/api/v1";
|
||||||
|
|
||||||
function stubStreamEmpty() {
|
function stubStreamEmpty() {
|
||||||
// Return a minimal SSE response that ends immediately.
|
|
||||||
cy.intercept(
|
cy.intercept(
|
||||||
"GET",
|
"GET",
|
||||||
`${apiBase}/activity/task-comments/stream*`,
|
`${apiBase}/activity/task-comments/stream*`,
|
||||||
@@ -18,12 +17,56 @@ describe("/activity feed", () => {
|
|||||||
).as("activityStream");
|
).as("activityStream");
|
||||||
}
|
}
|
||||||
|
|
||||||
function isSignedOutView(): Cypress.Chainable<boolean> {
|
function signInWithClerk({ otp }: { otp: string }) {
|
||||||
return cy
|
cy.contains(/sign in to view the feed/i).should("be.visible");
|
||||||
.get("body")
|
cy.get('[data-testid="activity-signin"]').click();
|
||||||
.then(($body) => $body.text().toLowerCase().includes("sign in to view the feed"));
|
|
||||||
|
// Redirect mode should bring us to a full-page Clerk sign-in experience.
|
||||||
|
cy.get('input[type="email"], input[name="identifier"]', { timeout: 20_000 })
|
||||||
|
.first()
|
||||||
|
.should("be.visible")
|
||||||
|
.clear()
|
||||||
|
.type("jane+clerk_test@example.com");
|
||||||
|
|
||||||
|
cy.contains('button', /continue|sign in/i).click();
|
||||||
|
|
||||||
|
cy.get('input', { timeout: 20_000 })
|
||||||
|
.filter('[inputmode="numeric"], [autocomplete="one-time-code"], [type="tel"], [name="code"], [type="text"]')
|
||||||
|
.first()
|
||||||
|
.should("be.visible")
|
||||||
|
.type(otp);
|
||||||
|
|
||||||
|
cy.contains('button', /verify|continue|sign in/i).click();
|
||||||
|
|
||||||
|
// Back to app
|
||||||
|
cy.contains(/live feed/i, { timeout: 30_000 }).should("be.visible");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
it("auth negative: wrong OTP shows an error", () => {
|
||||||
|
cy.visit("/activity");
|
||||||
|
|
||||||
|
cy.contains(/sign in to view the feed/i).should("be.visible");
|
||||||
|
cy.get('[data-testid="activity-signin"]').click();
|
||||||
|
|
||||||
|
cy.get('input[type="email"], input[name="identifier"]', { timeout: 20_000 })
|
||||||
|
.first()
|
||||||
|
.should("be.visible")
|
||||||
|
.clear()
|
||||||
|
.type("jane+clerk_test@example.com");
|
||||||
|
|
||||||
|
cy.contains('button', /continue|sign in/i).click();
|
||||||
|
|
||||||
|
cy.get('input', { timeout: 20_000 })
|
||||||
|
.filter('[inputmode="numeric"], [autocomplete="one-time-code"], [type="tel"], [name="code"], [type="text"]')
|
||||||
|
.first()
|
||||||
|
.should("be.visible")
|
||||||
|
.type("000000");
|
||||||
|
|
||||||
|
cy.contains('button', /verify|continue|sign in/i).click();
|
||||||
|
|
||||||
|
cy.contains(/invalid|incorrect|try again/i, { timeout: 20_000 }).should("be.visible");
|
||||||
|
});
|
||||||
|
|
||||||
it("happy path: renders task comment cards", () => {
|
it("happy path: renders task comment cards", () => {
|
||||||
cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
|
cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
|
||||||
statusCode: 200,
|
statusCode: 200,
|
||||||
@@ -40,44 +83,19 @@ describe("/activity feed", () => {
|
|||||||
task_title: "CI hardening",
|
task_title: "CI hardening",
|
||||||
created_at: "2026-02-07T00:00:00Z",
|
created_at: "2026-02-07T00:00:00Z",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: "c2",
|
|
||||||
message: "Second comment",
|
|
||||||
agent_name: "Riya",
|
|
||||||
agent_role: "QA",
|
|
||||||
board_id: "b1",
|
|
||||||
board_name: "Testing",
|
|
||||||
task_id: "t2",
|
|
||||||
task_title: "Coverage policy",
|
|
||||||
created_at: "2026-02-07T00:01:00Z",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
}).as("activityList");
|
}).as("activityList");
|
||||||
|
|
||||||
stubStreamEmpty();
|
stubStreamEmpty();
|
||||||
|
|
||||||
cy.visit("/activity", {
|
cy.visit("/activity");
|
||||||
onBeforeLoad(win: Window) {
|
signInWithClerk({ otp: "424242" });
|
||||||
win.localStorage.clear();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
isSignedOutView().then((signedOut) => {
|
|
||||||
if (signedOut) {
|
|
||||||
// In secretless CI (no Clerk), the SignedOut UI is expected and no API calls should happen.
|
|
||||||
cy.contains(/sign in to view the feed/i).should("be.visible");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
cy.wait("@activityList");
|
cy.wait("@activityList");
|
||||||
|
|
||||||
cy.contains(/live feed/i).should("be.visible");
|
|
||||||
cy.contains("CI hardening").should("be.visible");
|
cy.contains("CI hardening").should("be.visible");
|
||||||
cy.contains("Coverage policy").should("be.visible");
|
|
||||||
cy.contains("Hello world").should("be.visible");
|
cy.contains("Hello world").should("be.visible");
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
it("empty state: shows waiting message when no items", () => {
|
it("empty state: shows waiting message when no items", () => {
|
||||||
cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
|
cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
|
||||||
@@ -88,17 +106,11 @@ describe("/activity feed", () => {
|
|||||||
stubStreamEmpty();
|
stubStreamEmpty();
|
||||||
|
|
||||||
cy.visit("/activity");
|
cy.visit("/activity");
|
||||||
|
signInWithClerk({ otp: "424242" });
|
||||||
isSignedOutView().then((signedOut) => {
|
|
||||||
if (signedOut) {
|
|
||||||
cy.contains(/sign in to view the feed/i).should("be.visible");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
cy.wait("@activityList");
|
cy.wait("@activityList");
|
||||||
cy.contains(/waiting for new comments/i).should("be.visible");
|
cy.contains(/waiting for new comments/i).should("be.visible");
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
it("error state: shows failure UI when API errors", () => {
|
it("error state: shows failure UI when API errors", () => {
|
||||||
cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
|
cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
|
||||||
@@ -109,17 +121,9 @@ describe("/activity feed", () => {
|
|||||||
stubStreamEmpty();
|
stubStreamEmpty();
|
||||||
|
|
||||||
cy.visit("/activity");
|
cy.visit("/activity");
|
||||||
|
signInWithClerk({ otp: "424242" });
|
||||||
isSignedOutView().then((signedOut) => {
|
|
||||||
if (signedOut) {
|
|
||||||
cy.contains(/sign in to view the feed/i).should("be.visible");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
cy.wait("@activityList");
|
cy.wait("@activityList");
|
||||||
|
|
||||||
// UI uses query.error.message or fallback.
|
|
||||||
cy.contains(/unable to load feed|boom/i).should("be.visible");
|
cy.contains(/unable to load feed|boom/i).should("be.visible");
|
||||||
});
|
});
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -302,7 +302,7 @@ export default function ActivityPage() {
|
|||||||
forceRedirectUrl="/activity"
|
forceRedirectUrl="/activity"
|
||||||
signUpForceRedirectUrl="/activity"
|
signUpForceRedirectUrl="/activity"
|
||||||
>
|
>
|
||||||
<Button className="mt-4">Sign in</Button>
|
<Button className="mt-4" data-testid="activity-signin">Sign in</Button>
|
||||||
</SignInButton>
|
</SignInButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -19,29 +19,20 @@ import type { ComponentProps } from "react";
|
|||||||
|
|
||||||
import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey";
|
import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey";
|
||||||
|
|
||||||
function isE2EAuthBypassEnabled(): boolean {
|
|
||||||
// Used only for Cypress E2E to keep tests secretless and deterministic.
|
|
||||||
// When enabled, we treat the user as signed in and skip Clerk entirely.
|
|
||||||
return process.env.NEXT_PUBLIC_E2E_AUTH_BYPASS === "1";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isClerkEnabled(): boolean {
|
export function isClerkEnabled(): boolean {
|
||||||
// IMPORTANT: keep this in sync with AuthProvider; otherwise components like
|
// IMPORTANT: keep this in sync with AuthProvider; otherwise components like
|
||||||
// <SignedOut/> may render without a <ClerkProvider/> and crash during prerender.
|
// <SignedOut/> may render without a <ClerkProvider/> and crash during prerender.
|
||||||
if (isE2EAuthBypassEnabled()) return false;
|
|
||||||
return isLikelyValidClerkPublishableKey(
|
return isLikelyValidClerkPublishableKey(
|
||||||
process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
|
process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SignedIn(props: { children: ReactNode }) {
|
export function SignedIn(props: { children: ReactNode }) {
|
||||||
if (isE2EAuthBypassEnabled()) return <>{props.children}</>;
|
|
||||||
if (!isClerkEnabled()) return null;
|
if (!isClerkEnabled()) return null;
|
||||||
return <ClerkSignedIn>{props.children}</ClerkSignedIn>;
|
return <ClerkSignedIn>{props.children}</ClerkSignedIn>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SignedOut(props: { children: ReactNode }) {
|
export function SignedOut(props: { children: ReactNode }) {
|
||||||
if (isE2EAuthBypassEnabled()) return null;
|
|
||||||
if (!isClerkEnabled()) return <>{props.children}</>;
|
if (!isClerkEnabled()) return <>{props.children}</>;
|
||||||
return <ClerkSignedOut>{props.children}</ClerkSignedOut>;
|
return <ClerkSignedOut>{props.children}</ClerkSignedOut>;
|
||||||
}
|
}
|
||||||
@@ -67,15 +58,6 @@ export function useUser() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useAuth() {
|
export function useAuth() {
|
||||||
if (isE2EAuthBypassEnabled()) {
|
|
||||||
return {
|
|
||||||
isLoaded: true,
|
|
||||||
isSignedIn: true,
|
|
||||||
userId: "e2e-user",
|
|
||||||
sessionId: "e2e-session",
|
|
||||||
getToken: async () => "e2e-token",
|
|
||||||
} as const;
|
|
||||||
}
|
|
||||||
if (!isClerkEnabled()) {
|
if (!isClerkEnabled()) {
|
||||||
return {
|
return {
|
||||||
isLoaded: true,
|
isLoaded: true,
|
||||||
|
|||||||
Reference in New Issue
Block a user