yunxiafei/openclaw-mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge origin/master into hana/e2e-boards-gap-analysis

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-25 02:26:46 +05:30
parent 1045267d4c e3404d8590
commit be18072d52
11 changed files with 237 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/cypress/e2e/activity_feed.cy.ts
View File

@@ -1,22 +1,11 @@
/// <reference types="cypress" />
// Clerk/Next.js occasionally triggers a hydration mismatch on the SignIn route in CI.
// This is non-deterministic UI noise for these tests; ignore it so assertions can proceed.
Cypress.on("uncaught:exception", (err) => {
if (err.message?.includes("Hydration failed")) {
return false;
}
return true;
});
describe("/activity feed", () => {
const apiBase = "**/api/v1";
const email = Cypress.env("CLERK_TEST_EMAIL") || "jane+clerk_test@example.com";
const originalDefaultCommandTimeout = Cypress.config("defaultCommandTimeout");
beforeEach(() => {
// Clerk's Cypress helpers perform async work inside `cy.then()`.
// CI can be slow enough that the default 4s command timeout flakes.
Cypress.config("defaultCommandTimeout", 20_000);
});
@@ -49,6 +38,30 @@ describe("/activity feed", () => {
function stubBoardBootstrap() {
// Some app bootstraps happen before we get to the /activity call.
// Keep these stable so the page always reaches the activity request.
cy.intercept("GET", `${apiBase}/users/me*`, {
statusCode: 200,
body: {
id: "u1",
clerk_user_id: "local-auth-user",
email: "local@example.com",
name: "Local User",
preferred_name: "Local User",
timezone: "UTC",
},
}).as("usersMe");
cy.intercept("GET", `${apiBase}/organizations/me/list*`, {
statusCode: 200,
body: [
{
id: "org1",
name: "Testing Org",
is_active: true,
role: "owner",
},
],
}).as("orgsList");
cy.intercept("GET", `${apiBase}/organizations/me/member*`, {
statusCode: 200,
body: { organization_id: "org1", role: "owner" },
@@ -77,10 +90,11 @@ describe("/activity feed", () => {
cy.contains(/live feed/i).should("be.visible");
}
it("auth negative: signed-out user is redirected to sign-in", () => {
// SignedOutPanel runs in redirect mode on this page.
it("auth negative: signed-out user sees auth prompt", () => {
cy.visit("/activity");
cy.location("pathname", { timeout: 20_000 }).should("match", /\/sign-in/);
cy.contains(/sign in to view the feed|local authentication/i, {
timeout: 20_000,
}).should("be.visible");
});
it("happy path: renders task comment cards", () => {
@@ -107,10 +121,7 @@ describe("/activity feed", () => {
stubStreamsEmpty();
cy.visit("/sign-in");
cy.clerkLoaded();
cy.clerkSignIn({ strategy: "email_code", identifier: email });
cy.loginWithLocalAuth();
cy.visit("/activity");
assertSignedInAndLanded();
cy.wait("@activityList", { timeout: 20_000 });
@@ -131,10 +142,7 @@ describe("/activity feed", () => {
stubStreamsEmpty();
cy.visit("/sign-in");
cy.clerkLoaded();
cy.clerkSignIn({ strategy: "email_code", identifier: email });
cy.loginWithLocalAuth();
cy.visit("/activity");
assertSignedInAndLanded();
cy.wait("@activityList", { timeout: 20_000 });
@@ -152,10 +160,7 @@ describe("/activity feed", () => {
stubStreamsEmpty();
cy.visit("/sign-in");
cy.clerkLoaded();
cy.clerkSignIn({ strategy: "email_code", identifier: email });
cy.loginWithLocalAuth();
cy.visit("/activity");
assertSignedInAndLanded();
cy.wait("@activityList", { timeout: 20_000 });

6
frontend/cypress/e2e/activity_smoke.cy.ts
View File

@@ -1,6 +1,8 @@
describe("/activity page", () => {
it("signed-out user is redirected to sign-in", () => {
it("signed-out user sees an auth prompt", () => {
cy.visit("/activity");
cy.location("pathname", { timeout: 20_000 }).should("match", /\/sign-in/);
cy.contains(/local authentication|sign in to mission control/i, {
timeout: 20_000,
}).should("be.visible");
});
});

16
frontend/cypress/e2e/clerk_login.cy.ts
View File

@@ -1,16 +0,0 @@
describe("Clerk login", () => {
it("user can sign in via Clerk testing commands", () => {
const email = Cypress.env("CLERK_TEST_EMAIL") || "jane+clerk_test@example.com";
// Prereq per Clerk docs: visit a non-protected page that loads Clerk.
cy.visit("/sign-in");
cy.clerkLoaded();
cy.clerkSignIn({ strategy: "email_code", identifier: email });
// After login, user should be able to access protected route.
cy.visit("/activity");
cy.waitForAppLoaded();
cy.contains(/live feed/i).should("be.visible");
});
});

49
frontend/cypress/e2e/local_auth_login.cy.ts Normal file
View File

@@ -0,0 +1,49 @@
describe("Local auth login", () => {
it("user with local auth token can access protected route", () => {
cy.intercept("GET", "**/api/v1/users/me*", {
statusCode: 200,
body: {
id: "u1",
clerk_user_id: "local-auth-user",
email: "local@example.com",
name: "Local User",
preferred_name: "Local User",
timezone: "UTC",
},
}).as("usersMe");
cy.intercept("GET", "**/api/v1/organizations/me/list*", {
statusCode: 200,
body: [
{
id: "org1",
name: "Testing Org",
is_active: true,
role: "owner",
},
],
}).as("orgsList");
cy.intercept("GET", "**/api/v1/organizations/me/member*", {
statusCode: 200,
body: { organization_id: "org1", role: "owner" },
}).as("orgMeMember");
cy.intercept("GET", "**/api/v1/boards*", {
statusCode: 200,
body: {
items: [{ id: "b1", name: "Testing", updated_at: "2026-02-07T00:00:00Z" }],
},
}).as("boardsList");
cy.intercept("GET", "**/api/v1/boards/b1/snapshot*", {
statusCode: 200,
body: { tasks: [], agents: [], approvals: [], chat_messages: [] },
}).as("boardSnapshot");
cy.loginWithLocalAuth();
cy.visit("/activity");
cy.waitForAppLoaded();
cy.contains(/live feed/i).should("be.visible");
});
});

98
frontend/cypress/e2e/organizations.cy.ts
View File

@@ -1,36 +1,88 @@
describe("Organizations (PR #61)", () => {
const email = Cypress.env("CLERK_TEST_EMAIL") || "jane+clerk_test@example.com";
const apiBase = "**/api/v1";
it("negative: signed-out user is redirected to sign-in when opening /organization", () => {
function stubOrganizationApis() {
cy.intercept("GET", `${apiBase}/users/me*`, {
statusCode: 200,
body: {
id: "u1",
clerk_user_id: "local-auth-user",
email: "local@example.com",
name: "Local User",
preferred_name: "Local User",
timezone: "UTC",
},
}).as("usersMe");
cy.intercept("GET", `${apiBase}/organizations/me/list*`, {
statusCode: 200,
body: [
{
id: "org1",
name: "Testing Org",
is_active: true,
role: "member",
},
],
}).as("orgsList");
cy.intercept("GET", `${apiBase}/organizations/me/member*`, {
statusCode: 200,
body: {
id: "membership-1",
user_id: "u1",
organization_id: "org1",
role: "member",
},
}).as("orgMembership");
cy.intercept("GET", `${apiBase}/organizations/me`, {
statusCode: 200,
body: { id: "org1", name: "Testing Org" },
}).as("orgMe");
cy.intercept("GET", `${apiBase}/organizations/me/members*`, {
statusCode: 200,
body: {
items: [
{
id: "membership-1",
user_id: "u1",
role: "member",
user: {
id: "u1",
email: "local@example.com",
name: "Local User",
preferred_name: "Local User",
},
},
],
},
}).as("orgMembers");
cy.intercept("GET", `${apiBase}/boards*`, {
statusCode: 200,
body: { items: [] },
}).as("boardsList");
}
it("negative: signed-out user sees auth prompt when opening /organization", () => {
cy.visit("/organization");
cy.location("pathname", { timeout: 30_000 }).should("match", /\/sign-in/);
cy.contains(/sign in to manage your organization|local authentication/i, {
timeout: 30_000,
}).should("be.visible");
});
it("positive: signed-in user can view /organization and sees correct invite permissions", () => {
// Story (positive): a signed-in user can reach the organization page.
// Story (negative within flow): non-admin users cannot invite members.
cy.visit("/sign-in");
cy.clerkLoaded();
cy.clerkSignIn({ strategy: "email_code", identifier: email });
stubOrganizationApis();
cy.loginWithLocalAuth();
cy.visit("/organization");
cy.waitForAppLoaded();
cy.contains(/members\s*&\s*invites/i).should("be.visible");
// Deterministic assertion across roles:
// - if user is admin: invite button enabled
// - else: invite button disabled with the correct tooltip
cy.contains("button", /invite member/i)
.should("be.visible")
.then(($btn) => {
const isDisabled = $btn.is(":disabled");
if (isDisabled) {
cy.wrap($btn)
.should("have.attr", "title")
.and("match", /only organization admins can invite/i);
} else {
cy.wrap($btn).should("not.be.disabled");
}
});
.should("be.disabled")
.and("have.attr", "title")
.and("match", /only organization admins can invite/i);
});
});

216
frontend/cypress/support/commands.ts
View File

@@ -1,46 +1,9 @@
/// <reference types="cypress" />
type ClerkOtpLoginOptions = {
clerkOrigin: string;
email: string;
otp: string;
};
const APP_LOAD_TIMEOUT_MS = 30_000;
function getEnv(name: string, fallback?: string): string {
const value = Cypress.env(name) as string | undefined;
if (value) return value;
if (fallback !== undefined) return fallback;
throw new Error(
`Missing Cypress env var ${name}. ` +
`Set it via CYPRESS_${name}=... in CI/local before running Clerk login tests.`,
);
}
function clerkOriginFromPublishableKey(): string {
const key = getEnv("NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY");
// pk_test_<base64(domain$)> OR pk_live_<...>
const m = /^pk_(?:test|live)_(.+)$/.exec(key);
if (!m) throw new Error(`Unexpected Clerk publishable key format: ${key}`);
const decoded = atob(m[1]); // e.g. beloved-ghost-73.clerk.accounts.dev$
const domain = decoded.replace(/\$$/, "");
// Some flows redirect to *.accounts.dev (no clerk. subdomain)
const normalized = domain.replace(".clerk.accounts.dev", ".accounts.dev");
return `https://${normalized}`;
}
function normalizeOrigin(value: string): string {
try {
const url = new URL(value);
return url.origin;
} catch {
return value.replace(/\/$/, "");
}
}
const LOCAL_AUTH_STORAGE_KEY = "mc_local_auth_token";
const DEFAULT_LOCAL_AUTH_TOKEN =
"cypress-local-auth-token-0123456789-0123456789-0123456789x";
Cypress.Commands.add("waitForAppLoaded", () => {
cy.get("[data-cy='route-loader']", {
@@ -52,153 +15,19 @@ Cypress.Commands.add("waitForAppLoaded", () => {
}).should("have.attr", "aria-hidden", "true");
});
Cypress.Commands.add("loginWithClerkOtp", () => {
const clerkOrigin = normalizeOrigin(
getEnv("CLERK_ORIGIN", clerkOriginFromPublishableKey()),
);
const email = getEnv("CLERK_TEST_EMAIL", "jane+clerk_test@example.com");
const otp = getEnv("CLERK_TEST_OTP", "424242");
Cypress.Commands.add("loginWithLocalAuth", (token = DEFAULT_LOCAL_AUTH_TOKEN) => {
cy.visit("/", {
onBeforeLoad(win) {
win.sessionStorage.setItem(LOCAL_AUTH_STORAGE_KEY, token);
},
});
});
const opts: ClerkOtpLoginOptions = { clerkOrigin, email, otp };
// Navigate to a dedicated sign-in route that renders Clerk SignIn top-level.
// Cypress cannot reliably drive Clerk modal/iframe flows.
cy.visit("/sign-in");
const emailSelector =
'input[type="email"], input[name="identifier"], input[autocomplete="email"]';
const otpSelector =
'input[autocomplete="one-time-code"], input[name*="code"], input[name^="code"], input[name^="code."], input[inputmode="numeric"]';
const continueSelector = 'button[type="submit"], button';
const methodSelector = /email|code|otp|send code|verification|verify|use email/i;
const fillEmailStep = (email: string) => {
cy.get(emailSelector, { timeout: 20_000 })
.first()
.clear()
.type(email, { delay: 10 });
cy.contains(continueSelector, /continue|sign in|send|next/i, { timeout: 20_000 })
.should("be.visible")
.click({ force: true });
};
const maybeSelectEmailCodeMethod = () => {
cy.get("body").then(($body) => {
const hasOtp = $body.find(otpSelector).length > 0;
if (hasOtp) return;
const candidates = $body
.find("button,a")
.toArray()
.filter((el) => methodSelector.test((el.textContent || "").trim()));
if (candidates.length > 0) {
cy.wrap(candidates[0]).click({ force: true });
}
});
};
const waitForOtpOrMethod = () => {
cy.get("body", { timeout: 60_000 }).should(($body) => {
const hasOtp = $body.find(otpSelector).length > 0;
const hasMethod = $body
.find("button,a")
.toArray()
.some((el) => methodSelector.test((el.textContent || "").trim()));
expect(
hasOtp || hasMethod,
"waiting for OTP input or verification method UI",
).to.equal(true);
});
};
const fillOtpAndSubmit = (otp: string) => {
waitForOtpOrMethod();
maybeSelectEmailCodeMethod();
cy.get(otpSelector, { timeout: 60_000 }).first().clear().type(otp, { delay: 10 });
cy.get("body").then(($body) => {
const hasSubmit = $body
.find(continueSelector)
.toArray()
.some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
if (hasSubmit) {
cy.contains(continueSelector, /verify|continue|sign in|confirm/i, { timeout: 20_000 })
.should("be.visible")
.click({ force: true });
}
});
};
// Clerk SignIn can start on our app origin and then redirect to Clerk-hosted UI.
// Do email step first, then decide where the OTP step lives based on the *current* origin.
fillEmailStep(opts.email);
cy.location("origin", { timeout: 60_000 }).then((origin) => {
const current = normalizeOrigin(origin);
if (current === opts.clerkOrigin) {
cy.origin(
opts.clerkOrigin,
{ args: { otp: opts.otp } },
({ otp }) => {
const otpSelector =
'input[autocomplete="one-time-code"], input[name*="code"], input[name^="code"], input[name^="code."], input[inputmode="numeric"]';
const continueSelector = 'button[type="submit"], button';
const methodSelector = /email|code|otp|send code|verification|verify|use email/i;
const maybeSelectEmailCodeMethod = () => {
cy.get("body").then(($body) => {
const hasOtp = $body.find(otpSelector).length > 0;
if (hasOtp) return;
const candidates = $body
.find("button,a")
.toArray()
.filter((el) => methodSelector.test((el.textContent || "").trim()));
if (candidates.length > 0) {
cy.wrap(candidates[0]).click({ force: true });
}
});
};
const waitForOtpOrMethod = () => {
cy.get("body", { timeout: 60_000 }).should(($body) => {
const hasOtp = $body.find(otpSelector).length > 0;
const hasMethod = $body
.find("button,a")
.toArray()
.some((el) => methodSelector.test((el.textContent || "").trim()));
expect(
hasOtp || hasMethod,
"waiting for OTP input or verification method UI",
).to.equal(true);
});
};
waitForOtpOrMethod();
maybeSelectEmailCodeMethod();
cy.get(otpSelector, { timeout: 60_000 }).first().clear().type(otp, { delay: 10 });
cy.get("body").then(($body) => {
const hasSubmit = $body
.find(continueSelector)
.toArray()
.some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
if (hasSubmit) {
cy.contains(continueSelector, /verify|continue|sign in|confirm/i, { timeout: 20_000 })
.should("be.visible")
.click({ force: true });
}
});
},
);
} else {
fillOtpAndSubmit(opts.otp);
}
Cypress.Commands.add("logoutLocalAuth", () => {
cy.visit("/", {
onBeforeLoad(win) {
win.sessionStorage.removeItem(LOCAL_AUTH_STORAGE_KEY);
},
});
});
@@ -212,15 +41,14 @@ declare global {
waitForAppLoaded(): Chainable<void>;
/**
* Logs in via the real Clerk SignIn page using deterministic OTP credentials.
*
* Optional env vars (CYPRESS_*):
* - CLERK_ORIGIN (e.g. https://<subdomain>.accounts.dev)
* - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (used to derive origin when CLERK_ORIGIN not set)
* - CLERK_TEST_EMAIL (default: jane+clerk_test@example.com)
* - CLERK_TEST_OTP (default: 424242)
* Seeds session storage with a local auth token for local-auth mode.
*/
loginWithClerkOtp(): Chainable<void>;
loginWithLocalAuth(token?: string): Chainable<void>;
/**
* Clears local auth token from session storage.
*/
logoutLocalAuth(): Chainable<void>;
}
}
}