@multiplatform.one/frappe-ui 7.10.0 → 7.15.0

package/src/FrappeListView.cards.stories.tsx

@@ -0,0 +1,131 @@
+import { Card } from "@multiplatform.one/components";
+import { action } from "@multiplatform.one/storybook";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Image, Text, YStack } from "tamagui";
+import {
+  createRosterFixtures,
+  rosterPokemonFields,
+  rosterPokemonMeta,
+  type RosterPokemon,
+} from "../tests/fixtures/pokemonRoster";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+
+export default {
+  title: "FrappeUI/FrappeListView Cards",
+  component: FrappeListView,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "FrappeListView's card grid: `renderCard` draws each row of the doctype into the catalog ImageGrid, while loading, empty and error stay the view's own states. Rows come from the pokemon fixtures (InMemoryFixtureProvider); DocType meta from an in-story fetch mock.",
+      },
+    },
+  },
+};
+
+const host = "https://listview-cards.mock.test";
+const errorHost = "https://error.listview-cards.mock.test";
+
+(() => {
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeListViewCardsMockFetch) return;
+  w.__frappeListViewCardsMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.startsWith(host) || url.startsWith(errorHost)) {
+      const body = /\/api\/resource\/DocType\//.test(url)
+        ? { data: rosterPokemonMeta }
+        : { data: [] };
+      return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+function PokemonTile({ pokemon }: { pokemon: Partial<RosterPokemon> }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <Card>
+      <YStack {...knobProps.panelPadding} {...knobProps.gap} alignItems="center">
+        <Image
+          source={{ uri: pokemon.sprite_front, width: 96, height: 96 }}
+          alt={pokemon.pokemon_name ?? ""}
+        />
+        <Text {...knobProps.body} fontWeight="700" textTransform="capitalize">
+          {pokemon.pokemon_name}
+        </Text>
+        <Text {...knobProps.label} color="$color10">
+          {`#${String(pokemon.poke_id ?? 0).padStart(3, "0")} · ${pokemon.species}`}
+        </Text>
+      </YStack>
+    </Card>
+  );
+}
+
+const renderCard = (pokemon: Partial<RosterPokemon>) => <PokemonTile pokemon={pokemon} />;
+
+export const CardGrid = () => (
+  <FrappeProvider baseURL={host} fixtures={createRosterFixtures()}>
+    <FrappeListView<RosterPokemon>
+      doctype="Pokemon"
+      fields={rosterPokemonFields}
+      defaultViewMode="grid"
+      renderCard={renderCard}
+      onItemClick={action("onItemClick")}
+      onAdd={action("onAdd")}
+    />
+  </FrappeProvider>
+);
+
+export const CardGridInPage = () => (
+  <FrappeProvider baseURL={host} fixtures={createRosterFixtures()}>
+    <FrappeListView<RosterPokemon>
+      doctype="Pokemon"
+      fields={rosterPokemonFields}
+      viewMode="grid"
+      renderCard={renderCard}
+      showToolbar={false}
+      showSearch={false}
+      surface={false}
+      pageSize={4}
+      onItemClick={action("onItemClick")}
+    />
+  </FrappeProvider>
+);
+
+export const EmptyRoster = () => (
+  <FrappeProvider baseURL={host} fixtures={createRosterFixtures({ Pokemon: [] })}>
+    <FrappeListView<RosterPokemon>
+      doctype="Pokemon"
+      fields={rosterPokemonFields}
+      viewMode="grid"
+      renderCard={renderCard}
+    />
+  </FrappeProvider>
+);
+
+function failingFixtures() {
+  const fixtures = createRosterFixtures();
+  fixtures.getList = async () => {
+    throw Object.assign(new Error("Not permitted"), { status: 403 });
+  };
+  return fixtures;
+}
+
+export const PermissionDenied = () => (
+  <FrappeProvider baseURL={errorHost} fixtures={failingFixtures()}>
+    <FrappeListView<RosterPokemon>
+      doctype="Pokemon"
+      fields={rosterPokemonFields}
+      viewMode="grid"
+      renderCard={renderCard}
+    />
+  </FrappeProvider>
+);

package/src/FrappeListView.connections.spec.tsx

@@ -0,0 +1,192 @@
+// FrappeListView filters a doctype by a value held in a linked junction
+// doctype (MPO-331): Pokemon by `Pokemon Poke Type.poke_type`. Types live in
+// a standalone doctype with a `pokemon` Link, not a child table, so the view
+// reads the matching junction rows itself and the app keeps no collection.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  createRosterFixtures,
+  rosterPokemonFields,
+  rosterPokemonMeta,
+  type RosterPokemon,
+} from "../tests/fixtures/pokemonRoster";
+import type { FrappeConnection } from "./frappeConnections";
+import { connectionsFromMeta } from "./frappeConnections";
+import { FrappeListView, type FrappeListViewProps } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+
+const host = "https://listview-connections.spec.test";
+const realFetch = globalThis.fetch;
+let servedMeta: Record<string, unknown> = rosterPokemonMeta;
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.startsWith(host)) {
+      const body = /\/api\/resource\/DocType\//.test(url) ? { data: servedMeta } : { data: [] };
+      return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return realFetch(input as RequestInfo, init);
+  }) as typeof fetch;
+});
+
+afterAll(() => {
+  globalThis.fetch = realFetch;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  servedMeta = rosterPokemonMeta;
+});
+
+const typeConnection: FrappeConnection = { doctype: "Pokemon Poke Type", fieldname: "pokemon" };
+
+function renderRoster(
+  props: Partial<FrappeListViewProps<RosterPokemon>>,
+  fixtures = createRosterFixtures(),
+) {
+  const view = renderWithProviders(
+    <FrappeProvider baseURL={host} fixtures={fixtures}>
+      <FrappeListView<RosterPokemon>
+        doctype="Pokemon"
+        fields={rosterPokemonFields}
+        defaultViewMode="list"
+        showToolbar={false}
+        displayFields={[{ key: "pokemon_name" }]}
+        {...props}
+      />
+    </FrappeProvider>,
+  );
+  return { ...view, fixtures };
+}
+
+const listed = () =>
+  ["bulbasaur", "charmander", "squirtle", "pikachu", "gengar", "eevee"].filter(
+    (name) => screen.queryByText(name) !== null,
+  );
+
+describe("FrappeListView connection filters", () => {
+  it("lists only the records a matching junction row names", async () => {
+    renderRoster({
+      connections: [typeConnection],
+      filters: [["Pokemon Poke Type", "poke_type", "=", "poison"]],
+    });
+    await waitFor(() => expect(listed()).toEqual(["bulbasaur", "gengar"]));
+  });
+
+  it("reads the junction and the doctype itself, with no collection of the app's", async () => {
+    const fixtures = createRosterFixtures();
+    const getList = vi.spyOn(fixtures, "getList");
+    renderRoster(
+      {
+        connections: [typeConnection],
+        filters: [["Pokemon Poke Type", "poke_type", "=", "fire"]],
+      },
+      fixtures,
+    );
+    await waitFor(() => expect(listed()).toEqual(["charmander"]));
+    const calls = getList.mock.calls.map(([doctype, options]) => [doctype, options?.filters]);
+    expect(calls).toContainEqual(["Pokemon Poke Type", [["poke_type", "=", "fire"]]]);
+    expect(calls).toContainEqual(["Pokemon", [["name", "in", ["charmander"]]]]);
+  });
+
+  it("takes the connection from meta.links when none is declared", async () => {
+    renderRoster({ filters: [["Pokemon Poke Type", "poke_type", "=", "water"]] });
+    await waitFor(() => expect(listed()).toEqual(["squirtle"]));
+  });
+
+  it("combines with the doctype's own filters", async () => {
+    renderRoster({
+      connections: [typeConnection],
+      filters: [
+        ["base_experience", ">", 100],
+        ["Pokemon Poke Type", "poke_type", "=", "poison"],
+      ],
+    });
+    await waitFor(() => expect(listed()).toEqual(["gengar"]));
+  });
+
+  it("follows a new filter value", async () => {
+    const fixtures = createRosterFixtures();
+    const { rerender } = renderRoster(
+      { connections: [typeConnection], filters: [["Pokemon Poke Type", "poke_type", "=", "fire"]] },
+      fixtures,
+    );
+    await waitFor(() => expect(listed()).toEqual(["charmander"]));
+    rerender(
+      <FrappeProvider baseURL={host} fixtures={fixtures}>
+        <FrappeListView<RosterPokemon>
+          doctype="Pokemon"
+          fields={rosterPokemonFields}
+          defaultViewMode="list"
+          showToolbar={false}
+          displayFields={[{ key: "pokemon_name" }]}
+          connections={[typeConnection]}
+          filters={[["Pokemon Poke Type", "poke_type", "=", "electric"]]}
+        />
+      </FrappeProvider>,
+    );
+    await waitFor(() => expect(listed()).toEqual(["pikachu"]));
+  });
+
+  it("a value no junction row holds is an honest no-match, not the whole roster", async () => {
+    renderRoster({
+      connections: [typeConnection],
+      filters: [["Pokemon Poke Type", "poke_type", "=", "dragon"]],
+    });
+    await waitFor(() =>
+      expect(screen.getByText("No Pokemon records match the active filters")).toBeTruthy(),
+    );
+    expect(listed()).toEqual([]);
+  });
+
+  it("a junction the reader may not read is an error, not an empty list", async () => {
+    const fixtures = createRosterFixtures();
+    const getList = fixtures.getList.bind(fixtures);
+    vi.spyOn(fixtures, "getList").mockImplementation(async (doctype, options) => {
+      if (doctype === "Pokemon Poke Type") {
+        throw Object.assign(new Error("PermissionError"), { status: 403 });
+      }
+      return getList(doctype, options);
+    });
+    renderRoster(
+      { connections: [typeConnection], filters: [["Pokemon Poke Type", "poke_type", "=", "fire"]] },
+      fixtures,
+    );
+    await waitFor(() =>
+      expect(screen.getByText("You do not have permission to view Pokemon")).toBeTruthy(),
+    );
+    expect(listed()).toEqual([]);
+  });
+
+  it("a four-part filter on the doctype itself is its own field", async () => {
+    renderRoster({ filters: [["Pokemon", "poke_id", ">", 90]] });
+    await waitFor(() => expect(listed()).toEqual(["gengar", "eevee"]));
+  });
+});
+
+describe("connectionsFromMeta", () => {
+  it("reads DocType Link rows, leaving out hidden and child-table links", () => {
+    expect(
+      connectionsFromMeta({
+        links: [
+          { link_doctype: "Pokemon Poke Type", link_fieldname: "pokemon", group: "Battle" },
+          { link_doctype: "Hidden", link_fieldname: "pokemon", hidden: 1 },
+          { link_doctype: "Via Child", link_fieldname: "pokemon", is_child_table: 1 },
+        ],
+      }),
+    ).toEqual([{ doctype: "Pokemon Poke Type", fieldname: "pokemon", group: "Battle" }]);
+  });
+});

package/src/FrappeListView.connections.stories.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@multiplatform.one/forms";
+import { action } from "@multiplatform.one/storybook";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { XStack, YStack } from "tamagui";
+import {
+  createRosterFixtures,
+  rosterPokemonFields,
+  rosterPokemonMeta,
+  type RosterPokemon,
+} from "../tests/fixtures/pokemonRoster";
+import type { FrappeConnection } from "./frappeConnections";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+
+export default {
+  title: "FrappeUI/FrappeListView Connections",
+  component: FrappeListView,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A four-part filter on a connection, `[doctype, field, operator, value]`, narrows the list to the records whose linked rows match: Pokemon by `Pokemon Poke Type.poke_type`. The junction is a standalone doctype with a `pokemon` Link, so FrappeListView reads its matching rows and filters on their names; the story holds no collection of its own. Rows come from the pokemon fixtures.",
+      },
+    },
+  },
+};
+
+const host = "https://listview-connections.mock.test";
+
+(() => {
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeListViewConnectionsMockFetch) return;
+  w.__frappeListViewConnectionsMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.startsWith(host)) {
+      const body = /\/api\/resource\/DocType\//.test(url)
+        ? { data: rosterPokemonMeta }
+        : { data: [] };
+      return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+const pokemonConnections: FrappeConnection[] = [
+  { doctype: "Pokemon Poke Type", fieldname: "pokemon" },
+];
+const types = ["", "grass", "poison", "fire", "water", "electric", "ghost", "normal"];
+
+function TypeFilteredRoster({ declared }: { declared: boolean }) {
+  const { knobProps } = useResolvedKnobs();
+  const [type, setType] = useState("poison");
+  return (
+    <YStack {...knobProps.gap} flex={1}>
+      <XStack {...knobProps.gap} flexWrap="wrap">
+        {types.map((value) => (
+          <Button
+            key={value || "all"}
+            size="$3"
+            accent={value === type}
+            outlined={value !== type}
+            aria-pressed={value === type}
+            onPress={() => setType(value)}
+          >
+            {value || "all"}
+          </Button>
+        ))}
+      </XStack>
+      <FrappeListView<RosterPokemon>
+        doctype="Pokemon"
+        fields={rosterPokemonFields}
+        connections={declared ? pokemonConnections : undefined}
+        filters={type ? [["Pokemon Poke Type", "poke_type", "=", type]] : undefined}
+        displayFields={[{ key: "pokemon_name" }, { key: "species" }]}
+        onItemClick={action("onItemClick")}
+      />
+    </YStack>
+  );
+}
+
+export const ByJunctionValue = () => (
+  <FrappeProvider baseURL={host} fixtures={createRosterFixtures()}>
+    <TypeFilteredRoster declared />
+  </FrappeProvider>
+);
+
+export const ConnectionsFromMetaLinks = () => (
+  <FrappeProvider baseURL={host} fixtures={createRosterFixtures()}>
+    <TypeFilteredRoster declared={false} />
+  </FrappeProvider>
+);

package/src/FrappeListView.seed.spec.tsx

@@ -0,0 +1,228 @@
+// FrappeListView takes the rows a route loader rendered on the server and
+// hands over to the live collection without a refetch that shrinks the page
+// (MPO-331, after MPO-322's 21-to-20 shrink on pokemon). The bench below
+// pages at 20 rows unless a request names `limit_page_length`, like a stock
+// Frappe site, and holds 21 Pokemon. The card grid is the layout that
+// server-renders its rows (the list layout virtualizes, so it paints after
+// layout on the client).
+import { loadDocList, Order } from "@multiplatform.one/frappe";
+import { renderWithProviders, TestProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { renderToString } from "react-dom/server";
+import { initReactI18next } from "react-i18next";
+import { Text } from "tamagui";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeListView, type FrappeListViewProps } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+
+interface Pokemon {
+  name: string;
+  doctype: string;
+  pokemon_name: string;
+  poke_id: number;
+}
+
+// A bench per test: the collection layer shares one collection per query
+// and origin, so a reused origin would hand a test the last test's rows.
+let run = 0;
+let bench = "";
+const rosterSize = 21;
+const fields = ["name", "pokemon_name", "poke_id"] as const;
+const orderBy = [{ field: "poke_id" as const, order: Order.Asc }];
+const pageQuery = { fields, orderBy, limit: 100 };
+
+const roster = Array.from({ length: rosterSize }, (_, index) => ({
+  name: `pokemon-${String(index + 1).padStart(2, "0")}`,
+  pokemon_name: `mon-${String(index + 1).padStart(2, "0")}`,
+  poke_id: index + 1,
+}));
+
+const pokemonMeta = {
+  name: "Pokemon",
+  title_field: "pokemon_name",
+  fields: [
+    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+    { fieldname: "poke_id", fieldtype: "Int", label: "Poke ID", in_list_view: 1 },
+  ],
+  permissions: [{ role: "Guest", read: 1 }],
+};
+
+let listReads: URL[] = [];
+let releaseReads: (() => void) | null = null;
+
+function stubBench(options: { hold?: boolean; reversedNames?: boolean } = {}) {
+  listReads = [];
+  const held = options.hold
+    ? new Promise<void>((resolve) => {
+        releaseReads = resolve;
+      })
+    : null;
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    if (url.pathname.startsWith("/api/resource/DocType/")) {
+      return new Response(JSON.stringify({ data: pokemonMeta }), {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      });
+    }
+    if (url.pathname === "/api/resource/Pokemon") {
+      listReads.push(url);
+      if (held) await held;
+      const pageLength = Number(url.searchParams.get("limit_page_length") ?? 20);
+      const page = pageLength === 0 ? roster : roster.slice(0, pageLength);
+      // Names that sort against the Pokedex order, so a list that fell back
+      // to name order would show it.
+      const rows = options.reversedNames
+        ? page.map((row) => ({
+            ...row,
+            name: `pokemon-${String(rosterSize + 1 - row.poke_id).padStart(2, "0")}`,
+          }))
+        : page;
+      return new Response(JSON.stringify({ data: rows }), {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      });
+    }
+    return new Response(JSON.stringify({ data: [] }), { status: 200 });
+  });
+}
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+beforeEach(() => {
+  run += 1;
+  bench = `http://seed-${run}.spec.test`;
+});
+
+afterEach(() => {
+  cleanup();
+  releaseReads?.();
+  releaseReads = null;
+  vi.unstubAllGlobals();
+});
+
+const renderedNames = () => roster.filter((row) => screen.queryByText(row.pokemon_name) !== null);
+
+function listView(props: Partial<FrappeListViewProps<Pokemon>>) {
+  return (
+    <FrappeProvider baseURL={bench} realtime={false}>
+      <FrappeListView<Pokemon>
+        doctype="Pokemon"
+        fields={fields}
+        orderBy={orderBy}
+        viewMode="grid"
+        renderCard={(pokemon) => <Text>{pokemon.pokemon_name}</Text>}
+        showToolbar={false}
+        showSearch={false}
+        pageSize={50}
+        {...props}
+      />
+    </FrappeProvider>
+  );
+}
+
+async function serverPage() {
+  const request = new Request(`${bench}/pokemon`, { headers: { cookie: "sid=guest" } });
+  return loadDocList<Pokemon>({ baseURL: bench, doctype: "Pokemon", request, ...pageQuery });
+}
+
+describe("loadDocList", () => {
+  it("reads the page it is given and stamps the doctype", async () => {
+    stubBench();
+    const rows = await serverPage();
+    expect(rows).toHaveLength(rosterSize);
+    expect(rows.every((row) => row.doctype === "Pokemon")).toBe(true);
+    expect(listReads[0].searchParams.get("limit_page_length")).toBe("100");
+    expect(listReads[0].searchParams.get("order_by")).toBe("poke_id asc");
+  });
+
+  it("reads nothing without a request (a loader run in the browser)", async () => {
+    stubBench();
+    expect(await loadDocList({ baseURL: bench, doctype: "Pokemon", ...pageQuery })).toEqual([]);
+    expect(listReads).toHaveLength(0);
+  });
+});
+
+describe("FrappeListView SSR seed", () => {
+  it("renders the loader's rows on the server", async () => {
+    stubBench();
+    const initialRows = await serverPage();
+    const html = renderToString(
+      <TestProviders>{listView({ initialRows, limit: 100 })}</TestProviders>,
+    );
+    for (const row of roster) expect(html).toContain(row.pokemon_name);
+  });
+
+  it("shows the loader's rows before the live collection answers", async () => {
+    stubBench();
+    const initialRows = await serverPage();
+    stubBench({ hold: true });
+    renderWithProviders(listView({ initialRows, limit: 100 }));
+    expect(renderedNames()).toHaveLength(rosterSize);
+    await waitFor(() => expect(listReads.length).toBeGreaterThan(0));
+    expect(renderedNames()).toHaveLength(rosterSize);
+  });
+
+  it("hands over to the live collection reading the same page, never fewer rows", async () => {
+    stubBench();
+    const initialRows = await serverPage();
+    stubBench({ hold: true });
+    const counts: number[] = [];
+    const observer = new MutationObserver(() => counts.push(renderedNames().length));
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+    renderWithProviders(listView({ initialRows, limit: 100 }));
+    await waitFor(() => expect(listReads.length).toBeGreaterThan(0));
+    await act(async () => {
+      releaseReads?.();
+    });
+    await waitFor(() =>
+      expect(listReads.every((url) => url.searchParams.get("limit_page_length") === "100")).toBe(
+        true,
+      ),
+    );
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    observer.disconnect();
+    expect(renderedNames()).toHaveLength(rosterSize);
+    expect(Math.min(...counts.filter((count) => count > 0))).toBe(rosterSize);
+    expect(listReads[0].searchParams.get("order_by")).toBe("poke_id asc");
+  });
+
+  it("lists the live rows in the order it read them, not by name", async () => {
+    stubBench({ reversedNames: true });
+    renderWithProviders(listView({ limit: 100 }));
+    await waitFor(() => expect(renderedNames()).toHaveLength(rosterSize));
+    const shown = [...document.body.querySelectorAll("span, div")]
+      .map((node) => node.textContent ?? "")
+      .filter((text) => /^mon-\d\d$/.test(text));
+    expect([...new Set(shown)]).toEqual(roster.map((row) => row.pokemon_name));
+  });
+
+  it("without the loader's limit the live page is the bench's 20 (the shrink this guards)", async () => {
+    stubBench();
+    const initialRows = await serverPage();
+    stubBench();
+    renderWithProviders(listView({ initialRows }));
+    await waitFor(() => expect(renderedNames()).toHaveLength(20));
+  });
+
+  it("keeps the server rows when the live read fails", async () => {
+    stubBench();
+    const initialRows = await serverPage();
+    vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+      const url = new URL(String(input instanceof Request ? input.url : input));
+      if (url.pathname === "/api/resource/Pokemon") throw new TypeError("Failed to fetch");
+      return new Response(JSON.stringify({ data: pokemonMeta }), { status: 200 });
+    });
+    renderWithProviders(listView({ initialRows, limit: 100 }));
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    expect(renderedNames()).toHaveLength(rosterSize);
+    expect(screen.queryByText("Error loading Pokemon")).toBeNull();
+  });
+});