Files
multica/packages/core/api/schema.test.ts
Naiyuan Qing 48e3131bf9 feat: harden desktop frontend against API response drift (MUL-1828) (#2208)
* docs(claude): add API Response Compatibility section

Narrows the existing "no backwards compat" rule to internal code only,
and adds a new section that codifies the defensive boundary at API
edges: parse-don't-cast, never pin UI to a single field, enum drift
must downgrade not crash.

Driven by #2143/#2147/#2192 — all three were the desktop client white-
screening on backend response shape changes the client wasn't built
against.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>

* feat(core): add zod-based API response validation layer

Introduces a defensive boundary so a malformed backend response
degrades into a safe fallback (empty page, [], etc.) instead of
throwing inside React render.

- Adds zod to the pnpm catalog and as a @multica/core dependency.
- New parseWithFallback helper in core/api/schema.ts that runs
  safeParse, logs a warn with the endpoint + zod issues on failure,
  and returns the caller-supplied fallback. Never throws.
- Schemas in core/api/schemas.ts are deliberately lenient (string
  enums kept as z.string() so unknown values still parse, optional
  fields default, nested records use .loose() for unknown keys).
- Wires setSchemaLogger from CoreProvider so warnings flow through
  the same logger as the rest of the API client.

This is the primitive — see the next commit for the call-site wiring.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>

* feat(api): guard top 5 high-risk endpoints with parseWithFallback

Wraps the response of the five endpoints whose UIs white-screened in
past incidents (#2143/#2147/#2192) so a contract drift returns a safe
fallback instead of crashing the consumer:

- listIssues          → ListIssuesResponseSchema, fallback { issues: [], total: 0 }
- listTimeline        → TimelinePageSchema,        fallback empty page
- listComments        → CommentsListSchema,        fallback []
- listIssueSubscribers → SubscribersListSchema,    fallback []
- listChildIssues     → ChildIssuesResponseSchema, fallback { issues: [] }

getIssue is intentionally NOT wrapped: there is no sensible "empty
issue" — the entire detail page depends on real fields. The page-level
ErrorBoundary (separate commit) catches that case.

Adds schema.test.ts with 9 cases covering the five failure modes
listed in MUL-1828: missing fields, wrong types, enum drift, null
body, and null arrays.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>

* feat(ui): add ErrorBoundary and wrap high-risk pages

Section-level error boundary (no third-party dep — class component +
default fallback in @multica/ui). Supports a fallback render prop and
resetKeys for auto-recovery on resource navigation.

Wraps the surfaces that white-screened in past incidents:

- IssueDetail (web + desktop + inbox split-pane) — keyed on issueId
  so navigating to a different issue clears the boundary automatically.
- IssuesPage (web + desktop).

Boundaries are placed at consumer call sites rather than inside
IssueDetail itself so we don't have to refactor the 1100-line
component, and so a crash inside one inbox split-pane doesn't take
down the inbox list next to it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>

* fix(core): make all API schemas .loose() to preserve unknown fields

zod 4 z.object() defaults to STRIP, which silently drops fields the
schema didn't list. That makes the schema layer a sync point: a future
PR adding a TS field but forgetting the schema would have the field
disappear at runtime while TS still claims it exists — the exact bug-
class this PR is meant to prevent, just inverted.

Apply .loose() to every object schema (TimelineEntry, TimelinePage,
Comment, Issue, ListIssuesResponse, Subscriber, ChildIssuesResponse)
so unknown server-side fields pass through unchanged. Add a regression
test that feeds a payload with extra fields at both entry and page
level, and a direct unit test for parseWithFallback decoupled from any
endpoint. Update the listIssues fallback test to use a wrong-type
payload — under .loose() the previous "{ unexpected: true }" payload
parses successfully (every declared field has a default) instead of
triggering the fallback path it was meant to exercise.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* docs(claude): strip field-specific examples from API Compatibility section

The original wording embedded current schema field names (entries,
has_more_before, has_more_after, cursor, status, type) directly in the
rules. CLAUDE.md should state the rule, not the implementation — once a
field is renamed the doc drifts out of sync with the code, and the
specific names don't add anything the abstract rule doesn't.

Keep the rule, drop the field-level archaeology.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
2026-05-07 15:09:55 +08:00

196 lines
6.9 KiB
TypeScript

import { afterEach, describe, expect, it, vi } from "vitest";
import { z } from "zod";
import { ApiClient } from "./client";
import { parseWithFallback } from "./schema";
// Helper: stub fetch with a single JSON response. Status defaults to 200.
function stubFetchJson(body: unknown, status = 200) {
vi.stubGlobal(
"fetch",
vi.fn().mockResolvedValue(
new Response(typeof body === "string" ? body : JSON.stringify(body), {
status,
headers: { "Content-Type": "application/json" },
}),
),
);
}
afterEach(() => {
vi.unstubAllGlobals();
});
// These tests cover the five failure modes that white-screened the desktop
// app in past incidents. The contract is: a malformed response degrades to
// an empty/safe shape, never throws into React.
describe("ApiClient schema fallback", () => {
describe("listTimeline", () => {
it("falls back to an empty page when required fields are missing", async () => {
stubFetchJson({});
const client = new ApiClient("https://api.example.test");
const page = await client.listTimeline("issue-1");
expect(page).toEqual({
entries: [],
next_cursor: null,
prev_cursor: null,
has_more_before: false,
has_more_after: false,
});
});
it("falls back when a field has the wrong type", async () => {
stubFetchJson({
entries: "not-an-array",
next_cursor: null,
prev_cursor: null,
has_more_before: false,
has_more_after: false,
});
const client = new ApiClient("https://api.example.test");
const page = await client.listTimeline("issue-1");
expect(page.entries).toEqual([]);
expect(page.has_more_after).toBe(false);
});
it("accepts a new entry type rather than crashing on enum drift", async () => {
stubFetchJson({
entries: [
{
type: "future_kind", // not in TS union
id: "e-1",
actor_type: "member",
actor_id: "u-1",
created_at: "2026-01-01T00:00:00Z",
},
],
next_cursor: null,
prev_cursor: null,
has_more_before: false,
has_more_after: false,
});
const client = new ApiClient("https://api.example.test");
const page = await client.listTimeline("issue-1");
expect(page.entries).toHaveLength(1);
expect(page.entries[0]?.type).toBe("future_kind");
});
// Forward-compat: when the server adds a new field to an existing
// shape, `.loose()` lets it pass through unchanged. Without `.loose()`
// zod 4 strips it, which would silently break a future TS type that
// adopts the field — see schemas.ts header comment.
it("preserves unknown fields the schema didn't list", async () => {
stubFetchJson({
entries: [
{
type: "comment",
id: "e-1",
actor_type: "member",
actor_id: "u-1",
created_at: "2026-01-01T00:00:00Z",
// New server-side field not present in TimelineEntrySchema:
future_field: { nested: "value" },
},
],
next_cursor: null,
prev_cursor: null,
has_more_before: false,
has_more_after: false,
// New top-level field not present in TimelinePageSchema:
page_metadata: { took_ms: 42 },
});
const client = new ApiClient("https://api.example.test");
const page = await client.listTimeline("issue-1");
const raw = page as unknown as Record<string, unknown>;
const entry = page.entries[0] as unknown as Record<string, unknown>;
expect(entry.future_field).toEqual({ nested: "value" });
expect(raw.page_metadata).toEqual({ took_ms: 42 });
});
it("returns an empty page when the body is null", async () => {
stubFetchJson(null);
const client = new ApiClient("https://api.example.test");
const page = await client.listTimeline("issue-1");
expect(page.entries).toEqual([]);
});
it("treats null arrays as empty arrays", async () => {
stubFetchJson({
entries: null,
next_cursor: null,
prev_cursor: null,
has_more_before: false,
has_more_after: false,
});
const client = new ApiClient("https://api.example.test");
const page = await client.listTimeline("issue-1");
expect(page.entries).toEqual([]);
});
});
describe("listIssues", () => {
it("falls back to an empty list when the response is malformed", async () => {
// `issues` having the wrong type triggers the fallback. An object
// with only unexpected keys would *succeed* parsing now (every
// declared field has a default) and just pass the extras through
// via `.loose()`, so we use a wrong-type payload here instead.
stubFetchJson({ issues: "not-an-array", total: 0 });
const client = new ApiClient("https://api.example.test");
const res = await client.listIssues();
expect(res).toEqual({ issues: [], total: 0 });
});
});
describe("listComments", () => {
it("returns [] when the response is not an array", async () => {
stubFetchJson({ wrong: "shape" });
const client = new ApiClient("https://api.example.test");
const comments = await client.listComments("issue-1");
expect(comments).toEqual([]);
});
});
describe("listIssueSubscribers", () => {
it("returns [] when the response is null", async () => {
stubFetchJson(null);
const client = new ApiClient("https://api.example.test");
const subs = await client.listIssueSubscribers("issue-1");
expect(subs).toEqual([]);
});
});
describe("listChildIssues", () => {
it("returns { issues: [] } when the issues field is missing", async () => {
stubFetchJson({});
const client = new ApiClient("https://api.example.test");
const res = await client.listChildIssues("issue-1");
expect(res).toEqual({ issues: [] });
});
});
});
// Direct tests for the helper, decoupled from any specific endpoint —
// guards against an endpoint refactor masking a regression in the helper.
describe("parseWithFallback", () => {
const opts = { endpoint: "TEST /unit" };
it("returns parsed data on success", () => {
const schema = z.object({ id: z.string() });
const out = parseWithFallback({ id: "x" }, schema, { id: "fallback" }, opts);
expect(out).toEqual({ id: "x" });
});
it("returns the fallback when validation fails", () => {
const schema = z.object({ id: z.string() });
const fallback = { id: "fallback" };
const out = parseWithFallback({ id: 123 }, schema, fallback, opts);
expect(out).toBe(fallback);
});
it("returns the fallback when data is null", () => {
const schema = z.object({ id: z.string() });
const fallback = { id: "fallback" };
const out = parseWithFallback(null, schema, fallback, opts);
expect(out).toBe(fallback);
});
});