@autoview/cli 0.1.0

package/src/orchestrate/utils/renderResourcePage.test.ts

@@ -0,0 +1,468 @@
+import { OpenApiConverter } from "@typia/utils";
+import { describe, expect, it } from "vitest";
+
+import { toEndpoints } from "../../utils/toEndpoints";
+import { IAutoViewProductPlan } from "../structures/IAutoViewProductPlan";
+import { buildDeterministicPlan } from "./buildDeterministicPlan";
+import { renderResourcePage } from "./renderResourcePage";
+
+function doc(paths: Record<string, unknown>, schemas: Record<string, unknown> = {}) {
+  return OpenApiConverter.upgradeDocument({
+    openapi: "3.0.0",
+    info: { title: "t", version: "1.0.0" },
+    paths,
+    components: { schemas },
+  } as never);
+}
+
+const ok = { 200: { description: "ok" } };
+const fixture = doc(
+  {
+    "/pets": {
+      get: {
+        operationId: "index",
+        responses: {
+          200: {
+            description: "ok",
+            content: {
+              "application/json": {
+                schema: { type: "array", items: { $ref: "#/components/schemas/Pet" } },
+              },
+            },
+          },
+        },
+      },
+      post: {
+        operationId: "create",
+        requestBody: {
+          content: { "application/json": { schema: { $ref: "#/components/schemas/Pet" } } },
+        },
+        responses: ok,
+      },
+    },
+    "/pets/{petId}": {
+      get: {
+        operationId: "at",
+        parameters: [{ name: "petId", in: "path", required: true, schema: { type: "string" } }],
+        responses: {
+          200: {
+            description: "ok",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Pet" } } },
+          },
+        },
+      },
+    },
+  },
+  {
+    Pet: {
+      type: "object",
+      properties: {
+        id: { type: "string", format: "uuid" },
+        name: { type: "string" },
+        status: { type: "string", enum: ["available", "pending", "sold"] },
+      },
+      required: ["id", "name"],
+    },
+  },
+);
+
+const endpoints = toEndpoints(fixture);
+const plan = buildDeterministicPlan(fixture, "user");
+const screenAt = (path: string): IAutoViewProductPlan.IScreen =>
+  plan.screens.find((s) => s.path === path)!;
+const render = (path: string) =>
+  renderResourcePage(screenAt(path), endpoints, fixture, plan.screens);
+
+describe("renderResourcePage", () => {
+  it("table: a resource-named wrapper with INLINE items renders element columns", () => {
+    // DigitalOcean shape: `{ droplets: [ { id, name } ] }` — the array is named
+    // after the resource (not `data`) and its element is inline (no $ref). The
+    // table must show id/name columns and read rows off `res.droplets`, not show
+    // a single `droplets` cell.
+    const d = doc(
+      {
+        "/droplets": {
+          get: {
+            operationId: "index",
+            responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "object", properties: { droplets: { type: "array", items: { type: "object", properties: { id: { type: "integer" }, name: { type: "string" } } } } } } } } } },
+          },
+        },
+      },
+      {},
+    );
+    const eps = toEndpoints(d);
+    const plan = buildDeterministicPlan(d, "user");
+    const screen = plan.screens.find((s) => s.path === "/droplets")!;
+    expect(screen.uiPattern).toBe("table"); // not downgraded to a detail
+    const tsx = renderResourcePage(screen, eps, d, plan.screens);
+    expect(tsx).toContain("ResourceTable");
+    expect(tsx).toContain('"name":"id"');
+    expect(tsx).toContain('"name":"name"');
+    expect(tsx).toContain("const data = (res.droplets ?? []) as readonly unknown[];");
+  });
+
+  it("table: an inline collection key that is not a JS identifier uses bracket access", () => {
+    // DigitalOcean's `GET /v2/1-clicks` returns `{ "1-clicks": [...] }`. The key
+    // starts with a digit, so `res.1-clicks` is a hard syntax error — the reader
+    // must fall back to bracket access `res["1-clicks"]`.
+    const d = doc(
+      {
+        "/1-clicks": {
+          get: {
+            operationId: "list",
+            responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "object", properties: { "1-clicks": { type: "array", items: { type: "object", properties: { kind: { type: "string" } } } } } } } } } },
+          },
+        },
+      },
+      {},
+    );
+    const eps = toEndpoints(d);
+    const plan = buildDeterministicPlan(d, "user");
+    const screen = plan.screens.find((s) => s.uiPattern === "table")!;
+    const tsx = renderResourcePage(screen, eps, d, plan.screens);
+    expect(tsx).toContain('const data = (res["1-clicks"] ?? []) as readonly unknown[];');
+    expect(tsx).not.toContain("res.1-clicks");
+  });
+
+  it("table: one column per row-type field, array response read directly", () => {
+    const tsx = render("/pets");
+    expect(tsx).toContain('"use client"');
+    expect(tsx).toContain("ResourceTable");
+    // every Pet property becomes a column — dense by construction
+    expect(tsx).toContain('"name":"id"');
+    expect(tsx).toContain('"name":"name"');
+    expect(tsx).toContain('"name":"status","kind":"enum"');
+    // array response → rows read straight off `res`, not `res.data`
+    // array response read directly off `res` (guarded against a non-array)
+    expect(tsx).toContain("const data = (Array.isArray(res) ? res : []) as readonly unknown[];");
+    // a detail screen exists → rows link out
+    expect(tsx).toContain("rowHref=");
+  });
+
+  it("detail: sources path params from useParams and passes them typed", () => {
+    const tsx = render("/pets/[petsId]");
+    expect(tsx).toContain('import { useParams } from "next/navigation"');
+    // route segment is the canonical `petsId`; the SDK param stays `petId`,
+    // sourced by position from the route.
+    expect(tsx).toContain('const petId = String((params as Record<string, unknown>).petsId ?? "")');
+    expect(tsx).toContain("api.functional.pets.getByPetid"); // SDK accessor from path
+    expect(tsx).toContain("{ petId: petId }"); // path param passed at top level
+    expect(tsx).toContain("ResourceDetail");
+    expect(tsx).toContain('"name":"status"');
+  });
+
+  it("form: inputs carry required flag and body is cast to the SDK param type", () => {
+    const tsx = render("/pets/new");
+    expect(tsx).toContain("ResourceForm");
+    expect(tsx).toContain("FieldInput");
+    expect(tsx).toContain('"name":"id","kind":"string","format":"uuid","required":true');
+    expect(tsx).toContain("body: values");
+    expect(tsx).toContain("as Parameters<typeof api.functional.");
+  });
+
+  it("landing: links to every table screen", () => {
+    const tsx = render("/");
+    expect(tsx).toContain("ResourceLanding");
+    expect(tsx).toContain('"href":"/pets"');
+  });
+
+  it("landing: weights each link by hub-ness (distinct nested child resources)", () => {
+    // `files` parents two child resources (metadata, versions) → weight 2;
+    // `tags` is only ever read on its own → weight 0.
+    const hub = doc(
+      {
+        "/files": { get: { operationId: "list", responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/F" } } } } } } } },
+        "/files/{fileId}": { get: { operationId: "at", parameters: [{ name: "fileId", in: "path", required: true, schema: { type: "string" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { $ref: "#/components/schemas/F" } } } } } } },
+        "/files/{fileId}/metadata": { get: { operationId: "meta", parameters: [{ name: "fileId", in: "path", required: true, schema: { type: "string" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/F" } } } } } } } },
+        "/files/{fileId}/versions": { get: { operationId: "vers", parameters: [{ name: "fileId", in: "path", required: true, schema: { type: "string" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/F" } } } } } } } },
+        "/tags": { get: { operationId: "list", responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/F" } } } } } } } },
+      },
+      { F: { type: "object", properties: { id: { type: "string" } }, required: ["id"] } },
+    );
+    const eps = toEndpoints(hub);
+    const plan = buildDeterministicPlan(hub, "user");
+    const tsx = renderResourcePage(plan.screens.find((s) => s.path === "/")!, eps, hub, plan.screens);
+    // files parents metadata + versions → weight 2; tags → weight 0
+    expect(tsx).toMatch(/"href":"\/files"[^}]*"weight":2/);
+    expect(tsx).toMatch(/"href":"\/tags"[^}]*"weight":0/);
+  });
+
+  it("catalog: an image+title row schema renders a CatalogGrid, not a table", () => {
+    // The catalog classifier is purely structural: rows carrying an image field
+    // and a title field read as a gallery (products, photos, profiles). The spec
+    // must bake the DETECTED field names so the grid reads the right columns.
+    const d = doc(
+      {
+        "/products": {
+          get: { operationId: "list", responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/Product" } } } } } } },
+        },
+        "/products/{id}": {
+          get: { operationId: "at", parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { $ref: "#/components/schemas/Product" } } } } } },
+        },
+      },
+      {
+        Product: { type: "object", properties: { id: { type: "string" }, name: { type: "string" }, image_url: { type: "string" }, price: { type: "number" } }, required: ["id", "name"] },
+      },
+    );
+    const eps = toEndpoints(d);
+    const p = buildDeterministicPlan(d, "user");
+    const screen = p.screens.find((s) => s.path === "/products")!;
+    expect(screen.uiPattern).toBe("catalog");
+    const tsx = renderResourcePage(screen, eps, d, p.screens);
+    expect(tsx).toContain("CatalogGrid");
+    expect(tsx).toContain('"imageField":"image_url"');
+    expect(tsx).toContain('"titleField":"name"');
+    // cards link through to the detail screen
+    expect(tsx).toContain("rowHref=");
+  });
+
+  it("dashboard: the home landing fetches live counts and a recent preview per hub resource", () => {
+    const tsx = render("/");
+    expect(tsx).toContain("ResourceDashboard");
+    // live count card wiring: each stat screen's list op is called and reduced
+    // to a count + a recent-title preview, failure degrading to a null count.
+    expect(tsx).toContain("{ count: n, recent }");
+    expect(tsx).toContain("count: null");
+  });
+
+  it("embedded: a detail with a direct child collection embeds it as a master-detail preview", () => {
+    const d = doc(
+      {
+        "/sales/{id}": {
+          get: { operationId: "at", parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { $ref: "#/components/schemas/Sale" } } } } } },
+        },
+        "/sales/{id}/questions": {
+          get: { operationId: "questions", parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/Question" } } } } } } },
+        },
+        "/sales/{id}/questions/{questionId}": {
+          get: { operationId: "questionAt", parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }, { name: "questionId", in: "path", required: true, schema: { type: "string" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { $ref: "#/components/schemas/Question" } } } } } },
+        },
+      },
+      {
+        Sale: { type: "object", properties: { id: { type: "string" }, total: { type: "number" } }, required: ["id"] },
+        Question: { type: "object", properties: { id: { type: "string" }, body: { type: "string" } }, required: ["id"] },
+      },
+    );
+    const eps = toEndpoints(d);
+    const p = buildDeterministicPlan(d, "user");
+    const detail = p.screens.find((s) => s.uiPattern === "detail" && s.path.startsWith("/sales/["))!;
+    const tsx = renderResourcePage(detail, eps, d, p.screens);
+    // the child list is fetched on the SAME page and rendered inline below the record
+    expect(tsx).toContain("EmbeddedCollection");
+    expect(tsx).toContain("questions");
+    // the child op's id param is sourced from this page's route segment
+    expect(tsx).toMatch(/const id = String\(\(params as Record<string, unknown>\)\./);
+  });
+
+  it("is deterministic — same screen yields identical TSX", () => {
+    expect(render("/pets")).toEqual(render("/pets"));
+  });
+
+  it("fills a required query param with a concrete default (not `query: {}`)", () => {
+    // /pet/findByStatus needs a `status` query param; sending `query: {}` 400s.
+    const qdoc = doc(
+      {
+        "/pet/findByStatus": {
+          get: {
+            operationId: "findByStatus",
+            parameters: [
+              { name: "status", in: "query", required: true, schema: { type: "string", enum: ["available", "pending", "sold"] } },
+            ],
+            responses: {
+              200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/Pet" } } } } },
+            },
+          },
+        },
+      },
+      { Pet: { type: "object", properties: { id: { type: "string" } }, required: ["id"] } },
+    );
+    const qeps = toEndpoints(qdoc);
+    const qplan = buildDeterministicPlan(qdoc, "user");
+    const screen = qplan.screens.find((s) => s.endpoints.some((e) => e.includes("findByStatus")))!;
+    const tsx = renderResourcePage(screen, qeps, qdoc, qplan.screens);
+    expect(tsx).toContain('query: { "status": "available" }');
+    expect(tsx).not.toContain("query: {}");
+  });
+
+  it("fills a required query param typed as a bare const (not `{}`)", () => {
+    // Box's /collaborations exposes `status` as a single-value `{ const: ... }`;
+    // it must resolve to that literal, not the empty-object fallback.
+    const qdoc = doc(
+      {
+        "/collaborations": {
+          get: {
+            operationId: "list",
+            parameters: [
+              { name: "status", in: "query", required: true, schema: { const: "pending" } },
+            ],
+            responses: {
+              200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/Pet" } } } } },
+            },
+          },
+        },
+      },
+      { Pet: { type: "object", properties: { id: { type: "string" } }, required: ["id"] } },
+    );
+    const qeps = toEndpoints(qdoc);
+    const qplan = buildDeterministicPlan(qdoc, "user");
+    const screen = qplan.screens.find((s) => s.endpoints.some((e) => e.includes("collaborations")))!;
+    const tsx = renderResourcePage(screen, qeps, qdoc, qplan.screens);
+    expect(tsx).toContain('query: { "status": "pending" }');
+  });
+
+  it("detail edit link substitutes the id value into the route, not a literal bracket", () => {
+    const editable = doc(
+      {
+        "/orders/{id}": {
+          get: {
+            operationId: "at",
+            parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }],
+            responses: {
+              200: {
+                description: "ok",
+                content: { "application/json": { schema: { $ref: "#/components/schemas/Order" } } },
+              },
+            },
+          },
+          put: {
+            operationId: "update",
+            parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }],
+            requestBody: {
+              content: { "application/json": { schema: { $ref: "#/components/schemas/Order" } } },
+            },
+            responses: ok,
+          },
+        },
+      },
+      { Order: { type: "object", properties: { id: { type: "string" }, total: { type: "number" } } } },
+    );
+    const eps = toEndpoints(editable);
+    const p = buildDeterministicPlan(editable, "user");
+    const detail = p.screens.find((s) => s.uiPattern === "detail")!;
+    const tsx = renderResourcePage(detail, eps, editable, p.screens);
+    // edit link present and points at the substituted value, never a literal `[id]`
+    expect(tsx).toContain("/edit");
+    expect(tsx).toContain("${id}/edit");
+    expect(tsx).not.toMatch(/\[id\][^`]*\/edit/); // no `[id]` left in the href
+  });
+
+  it("nested detail: route with more segments than op params never references an undeclared var", () => {
+    // GitHub shape: `GET /projects/columns/{column_id}` is flat (one param) but
+    // the plan nests it under `projects`, yielding a route with TWO `[segment]`s.
+    // The op param must source from the TRAILING segment, and the edit link /
+    // delete redirect must read the ancestor segment from useParams — never emit
+    // a bare `columnsId` (undeclared → tsc error) or a literal `[segment]`
+    // (Next.js runtime "Dynamic href" 404).
+    const nested = doc(
+      {
+        "/projects/{project_id}/columns": {
+          get: { operationId: "listColumns", parameters: [{ name: "project_id", in: "path", required: true, schema: { type: "integer" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { type: "array", items: { $ref: "#/components/schemas/Column" } } } } } } },
+        },
+        "/projects/columns/{column_id}": {
+          get: { operationId: "getColumn", parameters: [{ name: "column_id", in: "path", required: true, schema: { type: "integer" } }], responses: { 200: { description: "ok", content: { "application/json": { schema: { $ref: "#/components/schemas/Column" } } } } } },
+          delete: { operationId: "delColumn", parameters: [{ name: "column_id", in: "path", required: true, schema: { type: "integer" } }], responses: { 204: { description: "deleted" } } },
+        },
+      },
+      {
+        Column: { type: "object", properties: { id: { type: "integer" }, name: { type: "string" } } },
+      },
+    );
+    const eps = toEndpoints(nested);
+    const p = buildDeterministicPlan(nested, "user");
+    const screen = p.screens.find(
+      (s) => s.uiPattern === "detail" && s.path.includes("columns") && (s.path.match(/\[/g)?.length ?? 0) >= 2,
+    );
+    expect(screen).toBeDefined(); // the plan did nest columns under projects
+    const tsx = renderResourcePage(screen!, eps, nested, p.screens);
+    // op param sources from the trailing segment, not the ancestor
+    expect(tsx).toContain("const column_id = Number((params as Record<string, unknown>).columnsId)");
+    // no undeclared bare segment var, no literal bracket left in any nav target
+    expect(tsx).not.toMatch(/\$\{columnsId\}/); // would be an undeclared identifier
+    expect(tsx).not.toMatch(/(href=|router\.push\()[^`"]*\[[A-Za-z]/); // no literal `[seg]` in nav
+  });
+
+  it("detail renders delete/action endpoints as real SDK-wired buttons", () => {
+    const acted = doc(
+      {
+        "/orders/{id}": {
+          get: {
+            operationId: "at",
+            parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }],
+            responses: {
+              200: { description: "ok", content: { "application/json": { schema: { $ref: "#/components/schemas/O" } } } },
+            },
+          },
+          delete: {
+            operationId: "erase",
+            parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }],
+            responses: ok,
+          },
+        },
+        "/orders/{id}/cancel": {
+          post: {
+            operationId: "cancel",
+            parameters: [{ name: "id", in: "path", required: true, schema: { type: "string" } }],
+            responses: ok,
+          },
+        },
+      },
+      { O: { type: "object", properties: { id: { type: "string" } } } },
+    );
+    const eps = toEndpoints(acted);
+    const p = buildDeterministicPlan(acted, "user");
+    const detail = p.screens.find((s) => s.uiPattern === "detail" && s.path.includes("["))!;
+    const tsx = renderResourcePage(detail, eps, acted, p.screens);
+    // a confirmed Delete button wired to the erase accessor (delete asks first,
+    // then navigates to the list on success)
+    expect(tsx).toContain('<ConfirmButton label="Delete"');
+    expect(tsx).toMatch(/onConfirm=\{\(\) => del\(\(\) => api\.functional\..*erase/i);
+    // the POST action surfaces as a button labeled from the path verb ("cancel")
+    expect(tsx).toContain(">Cancel</Button>");
+    expect(tsx).toContain("api.functional.orders.cancel.postById(connection");
+  });
+
+  it("nested table whose route lacks the parent params renders static (no fetch)", () => {
+    const nestedDoc = doc(
+      {
+        "/owners/{ownerId}/pets": {
+          get: {
+            operationId: "index",
+            parameters: [
+              { name: "ownerId", in: "path", required: true, schema: { type: "string" } },
+            ],
+            responses: {
+              200: {
+                description: "ok",
+                content: {
+                  "application/json": {
+                    schema: { type: "array", items: { $ref: "#/components/schemas/Pet" } },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      { Pet: { type: "object", properties: { id: { type: "string" }, name: { type: "string" } } } },
+    );
+    const eps = toEndpoints(nestedDoc);
+    // A table screen at a bracket-less path pointing at the nested list endpoint.
+    const nestedScreen: IAutoViewProductPlan.IScreen = {
+      path: "/pets",
+      title: "Pets",
+      purpose: "Browse pets.",
+      actor: "user",
+      endpoints: [eps[0]!.accessor.join(".")],
+      uiPattern: "table",
+      notes: "",
+    };
+    const tsx = renderResourcePage(nestedScreen, eps, nestedDoc, [nestedScreen]);
+    // dense headers still present, but no doomed fetch fires
+    expect(tsx).toContain('"name":"id"');
+    expect(tsx).toContain('"name":"name"');
+    expect(tsx).not.toContain("useEffect");
+    expect(tsx).toContain("rows={[]}");
+    expect(tsx).toContain("emptyHint=");
+    expect(tsx).toContain("ownerId");
+  });
+});