@carlonicora/nextjs-jsonapi 6.12.2 → 6.13.1

package/src/offline/__tests__/local-transport.spec.ts

@@ -0,0 +1,150 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { configureJsonApi } from "../../unified/JsonApiRequest";
+import { localTransport } from "../local-transport";
+import { getOfflineState, setOfflineState } from "../state";
+import type { DeviceStore } from "../store/DeviceStore";
+import { NeedsConnectionError, type OfflineRoute } from "../types";
+import { setDeviceStoreOpener } from "../config";
+import { Roots, Npcs, setUpOffline, tearDownOffline } from "./offline-fixtures";
+
+const API = "http://api.test/";
+
+const mergeRoute = (answer = vi.fn()): OfflineRoute => ({
+  method: "POST",
+  pattern: [Npcs, ":id", "merge"],
+  answer: answer.mockImplementation(async ({ store, params }) => {
+    await store.deleteRecord("npcs", params.id);
+    return { status: 200, body: { data: { type: "npcs", id: "n2", attributes: { name: "merged" } } } };
+  }),
+  queue: true,
+});
+
+describe("localTransport", () => {
+  let store: DeviceStore;
+
+  beforeEach(() => {
+    configureJsonApi({ apiUrl: API });
+  });
+
+  afterEach(() => {
+    tearDownOffline();
+  });
+
+  it("answers a generic GET from the device in the ApiData shape", async () => {
+    store = await setUpOffline();
+
+    const response = await localTransport({ method: "GET", url: `${API}npcs/n1` });
+
+    expect(response).toMatchObject({ ok: true, status: 200 });
+    expect(response.data.data.id).toBe("n1");
+  });
+
+  it("an unknown path answers 503 with errors[0].code needs-connection", async () => {
+    store = await setUpOffline();
+
+    const response = await localTransport({ method: "POST", url: `${API}sessions/s1/recap` });
+
+    expect(response).toMatchObject({ ok: false, status: 503 });
+    expect(response.data.errors[0].code).toBe("needs-connection");
+  });
+
+  it("a device copy that cannot be opened (another tab holds it) answers 503 needs-connection, never 500", async () => {
+    store = await setUpOffline();
+    setDeviceStoreOpener(async () => {
+      throw new Error("Access Handles cannot be created if there is another open Access Handle");
+    });
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+
+    const response = await localTransport({ method: "GET", url: `${API}npcs/n1` });
+
+    expect(response).toMatchObject({ ok: false, status: 503 });
+    expect(response.data.errors[0].code).toBe("needs-connection");
+    warn.mockRestore();
+  });
+
+  it("custom routes win over the generic ones", async () => {
+    const custom: OfflineRoute = {
+      method: "GET",
+      pattern: [Npcs, ":id"],
+      answer: async () => ({ status: 200, body: { data: { type: "npcs", id: "custom" } } }),
+      queue: false,
+    };
+    store = await setUpOffline([custom]);
+
+    const response = await localTransport({ method: "GET", url: `${API}npcs/n1` });
+
+    expect(response.data.data.id).toBe("custom");
+  });
+
+  it("a queue:true custom route is enqueued after its answer updated the store, with the original method, path and body", async () => {
+    const answer = vi.fn();
+    store = await setUpOffline([mergeRoute(answer)]);
+    const body = { data: { type: "npcs", id: "n2" } };
+
+    const response = await localTransport({ method: "POST", url: `${API}npcs/n1/merge?keep=true`, body });
+
+    expect(response.status).toBe(200);
+    expect(answer).toHaveBeenCalledTimes(1);
+    expect(await store.getRecord("npcs", "n1")).toBeUndefined();
+    const [entry] = await store.queue();
+    expect(entry).toMatchObject({ rootId: "C", method: "POST", path: "npcs/n1/merge?keep=true", body });
+    expect(getOfflineState().pending).toBe(1);
+  });
+
+  it("a queue:true custom route on a locked root record answers needs-connection and runs nothing", async () => {
+    const answer = vi.fn();
+    store = await setUpOffline([mergeRoute(answer)]);
+    setOfflineState({ lockedRootIds: ["C"] });
+
+    const response = await localTransport({ method: "POST", url: `${API}npcs/n1/merge`, body: {} });
+
+    expect(response.status).toBe(503);
+    expect(answer).not.toHaveBeenCalled();
+    expect(await store.queue()).toEqual([]);
+  });
+
+  it("a custom write that is not queued is refused on a locked root record; its GET answers stay allowed", async () => {
+    const write = vi.fn(async () => ({ status: 200, body: { data: { type: "npcs", id: "n1" } } }));
+    const read = vi.fn(async () => ({ status: 200, body: { data: { type: "npcs", id: "n1" } } }));
+    store = await setUpOffline([
+      { method: "POST", pattern: [Npcs, ":id", "pin"], answer: write, queue: false },
+      { method: "GET", pattern: [Npcs, ":id", "pin"], answer: read, queue: false },
+    ]);
+    setOfflineState({ lockedRootIds: ["C"] });
+
+    const refused = await localTransport({ method: "POST", url: `${API}npcs/n1/pin`, body: {} });
+    const allowed = await localTransport({ method: "GET", url: `${API}npcs/n1/pin` });
+
+    expect(refused.status).toBe(503);
+    expect(refused.data.errors[0].code).toBe("needs-connection");
+    expect(write).not.toHaveBeenCalled();
+    expect(allowed.status).toBe(200);
+    expect(read).toHaveBeenCalledTimes(1);
+  });
+
+  it("a custom answer that throws NeedsConnectionError answers 503 needs-connection", async () => {
+    store = await setUpOffline([
+      {
+        method: "POST",
+        pattern: [Roots, ":id", "sessions", "end"],
+        answer: async () => {
+          throw new NeedsConnectionError();
+        },
+        queue: false,
+      },
+    ]);
+
+    const response = await localTransport({ method: "POST", url: `${API}roots/C/sessions/end` });
+
+    expect(response.status).toBe(503);
+    expect(response.data.errors[0].code).toBe("needs-connection");
+  });
+
+  it("a file upload needs a connection", async () => {
+    store = await setUpOffline();
+
+    const response = await localTransport({ method: "POST", url: `${API}npcs`, body: {}, files: new Blob(["x"]) });
+
+    expect(response.data.errors[0].code).toBe("needs-connection");
+  });
+});

package/src/offline/__tests__/logout.spec.ts

@@ -0,0 +1,122 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  configureOffline,
+  DeviceStoreUnavailableError,
+  getOfflineStore,
+  resetOfflineConfig,
+  setDeviceStoreOpener,
+} from "../config";
+import { finishOfflineLogout, prepareOfflineLogout } from "../logout";
+import { getOfflineState, resetOfflineState, setOfflineState } from "../state";
+import type { DeviceStore, QueueEntry } from "../store/DeviceStore";
+import type { OfflineConfig } from "../types";
+
+const lifecycle = vi.hoisted(() => ({ deleteDeviceStore: vi.fn() }));
+vi.mock("../store/lifecycle", () => lifecycle);
+const runtime = vi.hoisted(() => ({ stopOfflineRuntime: vi.fn() }));
+vi.mock("../sync/runtime", () => runtime);
+
+function config(userId: string | undefined, requireOptIn?: boolean): OfflineConfig {
+  return {
+    getUserId: () => userId,
+    requireOptIn,
+    rootModule: { name: "roots" } as any,
+    types: [],
+    routes: [],
+    listSyncRoots: async () => [],
+    shellPath: () => "/offline-shell",
+    syncIntervalMs: 300000,
+  };
+}
+
+function storeWithQueue(entries: Partial<QueueEntry>[]): DeviceStore {
+  return { queue: vi.fn(async () => entries as QueueEntry[]) } as unknown as DeviceStore;
+}
+
+describe("offline logout", () => {
+  beforeEach(() => {
+    lifecycle.deleteDeviceStore.mockReset().mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    resetOfflineConfig();
+  });
+
+  it("prepareOfflineLogout counts every unsent queue entry of the signed-in user", async () => {
+    configureOffline(config("u1"));
+    const opener = vi.fn(async () =>
+      storeWithQueue([{ status: "pending" }, { status: "conflict" }, { status: "failed" }]),
+    );
+    setDeviceStoreOpener(opener);
+
+    expect(await prepareOfflineLogout()).toEqual({ pending: 3 });
+    expect(opener).toHaveBeenCalledWith("u1");
+  });
+
+  it("prepareOfflineLogout answers 0 when offline mode is not configured or nobody is signed in", async () => {
+    expect(await prepareOfflineLogout()).toEqual({ pending: 0 });
+
+    configureOffline(config(undefined));
+    const opener = vi.fn();
+    setDeviceStoreOpener(opener);
+    expect(await prepareOfflineLogout()).toEqual({ pending: 0 });
+    expect(opener).not.toHaveBeenCalled();
+  });
+
+  it("finishOfflineLogout deletes the user's database and the images cache", async () => {
+    const caches = {
+      keys: vi.fn(async () => ["wyrdli-offline-abc", "wyrdli-shell-b1", "wyrdli-images"]),
+      delete: vi.fn(async () => true),
+    };
+    vi.stubGlobal("caches", caches);
+
+    await finishOfflineLogout("u1");
+
+    expect(lifecycle.deleteDeviceStore).toHaveBeenCalledWith("u1");
+    expect(caches.delete).toHaveBeenCalledTimes(1);
+    expect(caches.delete).toHaveBeenCalledWith("wyrdli-images");
+    vi.unstubAllGlobals();
+  });
+
+  it("finishOfflineLogout stops the runtime first and blocks any reopen of the store, so a sync still running cannot recreate the deleted file", async () => {
+    vi.stubGlobal("caches", { keys: vi.fn(async () => []), delete: vi.fn() });
+    configureOffline(config("u1"));
+    const opener = vi.fn(async () => storeWithQueue([]));
+    setDeviceStoreOpener(opener);
+    runtime.stopOfflineRuntime.mockReset();
+    const order: string[] = [];
+    runtime.stopOfflineRuntime.mockImplementation(() => void order.push("stop"));
+    lifecycle.deleteDeviceStore.mockImplementation(async () => {
+      order.push("delete");
+      // A sync that was still running asks for the store while the file is deleted.
+      await expect(getOfflineStore()).rejects.toBeInstanceOf(DeviceStoreUnavailableError);
+    });
+
+    await finishOfflineLogout("u1");
+
+    expect(order).toEqual(["stop", "delete"]);
+    await expect(getOfflineStore()).rejects.toBeInstanceOf(DeviceStoreUnavailableError);
+    expect(opener).not.toHaveBeenCalled();
+    vi.unstubAllGlobals();
+  });
+
+  it("finishOfflineLogout turns the device switch off and clears the sync state and the last sync time", async () => {
+    vi.stubGlobal("caches", { keys: vi.fn(async () => []), delete: vi.fn() });
+    localStorage.setItem("nja-offline-enabled:u1", "1");
+    localStorage.setItem("nja-offline-last-sync:u1", "1761990000000");
+    configureOffline(config("u1", true));
+    setOfflineState({ rootCount: 2, syncProgress: { done: 1, total: 2 } });
+    expect(getOfflineState().lastSyncedAt).toBe(1761990000000);
+
+    await finishOfflineLogout("u1");
+
+    expect(localStorage.getItem("nja-offline-enabled:u1")).toBeNull();
+    expect(localStorage.getItem("nja-offline-last-sync:u1")).toBeNull();
+    expect(getOfflineState()).toEqual(
+      expect.objectContaining({ enabled: false, syncProgress: null, lastSyncedAt: null, rootCount: null }),
+    );
+    localStorage.clear();
+    resetOfflineState();
+    vi.unstubAllGlobals();
+  });
+});

package/src/offline/__tests__/offline-fixtures.ts

@@ -0,0 +1,89 @@
+import { configureOffline, resetOfflineConfig, setDeviceStoreOpener } from "../config";
+import { resetOfflineState } from "../state";
+import type { DeviceStore } from "../store/DeviceStore";
+import { openMemoryDeviceStore } from "../store/lifecycle";
+import type { OfflineConfig, OfflineRoute } from "../types";
+
+export class TestModel {
+  id = "";
+  name = "";
+  rehydrate(data: { jsonApi: any }) {
+    this.id = data.jsonApi.id;
+    this.name = data.jsonApi.attributes?.name ?? "";
+    return this;
+  }
+}
+
+export const Roots = { name: "roots", model: TestModel };
+export const Npcs = { name: "npcs", model: TestModel };
+export const Factions = { name: "factions", model: TestModel };
+export const Characters = { name: "characters", model: TestModel };
+
+export const npc = (id: string, name: string, rootId: string) => ({
+  type: "npcs",
+  id,
+  attributes: { name, description: `${name} text` },
+  relationships: { root: { data: { type: "roots", id: rootId } } },
+});
+
+export function offlineConfig(routes: OfflineRoute[] = []): OfflineConfig {
+  return {
+    getUserId: () => "u1",
+    rootModule: Roots,
+    types: [
+      { module: Roots, fetch: "by-id", readOnly: false, serverOwnedFields: [] },
+      { module: Npcs, fetch: "root-list", readOnly: false, serverOwnedFields: ["tldr"] },
+      { module: Factions, fetch: "root-list", readOnly: false, serverOwnedFields: [] },
+      { module: Characters, fetch: "root-list", readOnly: true, serverOwnedFields: [] },
+    ],
+    routes,
+    listSyncRoots: async () => ["C", "D"],
+    shellPath: () => "/offline-shell",
+    syncIntervalMs: 300000,
+  };
+}
+
+/** Two NPCs and a faction in root record C, one NPC in D; the faction is linked to n1. */
+export async function seededStore(): Promise<DeviceStore> {
+  const store = await openMemoryDeviceStore();
+  await store.putRecord({
+    type: "roots",
+    id: "C",
+    rootId: "C",
+    resource: { type: "roots", id: "C", attributes: { name: "Camp C" } },
+    updatedAt: null,
+  });
+  await store.putRecord({ type: "npcs", id: "n1", rootId: "C", resource: npc("n1", "Alda", "C"), updatedAt: null });
+  await store.putRecord({ type: "npcs", id: "n2", rootId: "C", resource: npc("n2", "brom", "C"), updatedAt: null });
+  await store.putRecord({ type: "npcs", id: "n3", rootId: "D", resource: npc("n3", "Cora", "D"), updatedAt: null });
+  await store.putRecord({
+    type: "factions",
+    id: "f1",
+    rootId: "C",
+    resource: { type: "factions", id: "f1", attributes: { name: "Guild" } },
+    updatedAt: null,
+  });
+  await store.putRecord({
+    type: "characters",
+    id: "ch1",
+    rootId: "C",
+    resource: { type: "characters", id: "ch1", attributes: { name: "Hero" } },
+    updatedAt: null,
+  });
+  await store.putLink({ fromType: "factions", fromId: "f1", toType: "npcs", toId: "n1", kind: "MEMBER_OF", props: {} });
+  return store;
+}
+
+export async function setUpOffline(routes: OfflineRoute[] = []): Promise<DeviceStore> {
+  resetOfflineState();
+  resetOfflineConfig();
+  const store = await seededStore();
+  configureOffline(offlineConfig(routes));
+  setDeviceStoreOpener(async () => store);
+  return store;
+}
+
+export function tearDownOffline(): void {
+  resetOfflineConfig();
+  resetOfflineState();
+}

package/src/offline/__tests__/router.spec.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { matchRoute } from "../router";
+import type { OfflineRoute } from "../types";
+import { patternToString } from "../types";
+
+const Npcs = { name: "npcs", model: class {} };
+const Roots = { name: "roots", model: class {} };
+const answer = (label: string) => async () => ({ status: 200, body: { label } });
+
+describe("matchRoute", () => {
+  it("custom routes win over generic ones", async () => {
+    const custom: OfflineRoute = {
+      method: "GET",
+      pattern: [Roots, ":id", "scenes", "playing"],
+      answer: answer("custom"),
+      queue: false,
+    };
+    const generic: OfflineRoute = {
+      method: "GET",
+      pattern: [":parentType", ":parentId", "scenes", ":x"],
+      answer: answer("generic"),
+      queue: false,
+    };
+
+    const match = matchRoute([custom, generic], "GET", "roots/C/scenes/playing");
+
+    expect(match?.route).toBe(custom);
+  });
+
+  it("a Module segment matches its endpoint", () => {
+    const route: OfflineRoute = { method: "GET", pattern: [Npcs, ":id"], answer: answer("one"), queue: false };
+
+    expect(matchRoute([route], "GET", "npcs/n1")?.params).toEqual({ id: "n1" });
+    expect(matchRoute([route], "GET", "factions/n1")).toBeNull();
+    expect(patternToString([Roots, ":id", Npcs])).toBe("roots/:id/npcs");
+  });
+
+  it(":id captures one segment", () => {
+    const route: OfflineRoute = { method: "GET", pattern: [Npcs, ":id"], answer: answer("one"), queue: false };
+
+    expect(matchRoute([route], "GET", "npcs/n1/factions")).toBeNull();
+    expect(matchRoute([route], "GET", "npcs")).toBeNull();
+    expect(matchRoute([route], "PATCH", "npcs/n1")).toBeNull();
+  });
+
+  it("the query string is ignored for matching", () => {
+    const route: OfflineRoute = {
+      method: "GET",
+      pattern: [Roots, ":id", Npcs],
+      answer: answer("list"),
+      queue: false,
+    };
+
+    expect(matchRoute([route], "GET", "roots/C/npcs?fetchAll=true&page[size]=5")?.params).toEqual({ id: "C" });
+  });
+});

package/src/offline/__tests__/state.spec.ts

@@ -0,0 +1,62 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { configureOffline, resetOfflineConfig } from "../config";
+import { getOfflineState, resetOfflineState, setOfflineState, subscribeOfflineState } from "../state";
+import type { OfflineConfig } from "../types";
+
+const config: OfflineConfig = {
+  getUserId: () => "u1",
+  rootModule: { name: "roots", model: class {} },
+  types: [],
+  routes: [],
+  listSyncRoots: async () => [],
+  shellPath: () => "/offline-shell",
+  syncIntervalMs: 300000,
+};
+
+describe("offline state", () => {
+  beforeEach(() => {
+    resetOfflineState();
+    resetOfflineConfig();
+  });
+
+  afterEach(() => {
+    resetOfflineState();
+    resetOfflineConfig();
+  });
+
+  it("the offline event marks the session offline; the online event alone never brings it back (a probe or a sync must reach the API)", () => {
+    configureOffline(config);
+    expect(getOfflineState().online).toBe(true);
+
+    window.dispatchEvent(new Event("offline"));
+    expect(getOfflineState().online).toBe(false);
+
+    window.dispatchEvent(new Event("online"));
+    expect(getOfflineState().online).toBe(false);
+  });
+
+  it("does not follow browser events when offline mode is not configured", () => {
+    window.dispatchEvent(new Event("offline"));
+    expect(getOfflineState().online).toBe(true);
+  });
+
+  it("listeners are called once per change", () => {
+    const listener = vi.fn();
+    const unsubscribe = subscribeOfflineState(listener);
+
+    setOfflineState({ pending: 2 });
+    setOfflineState({ pending: 2 });
+    setOfflineState({ lockedRootIds: ["C"] });
+    setOfflineState({ lockedRootIds: ["C"] });
+    setOfflineState({ online: false, draining: false });
+
+    expect(listener).toHaveBeenCalledTimes(3);
+    expect(listener).toHaveBeenLastCalledWith(
+      expect.objectContaining({ online: false, pending: 2, lockedRootIds: ["C"] }),
+    );
+
+    unsubscribe();
+    setOfflineState({ pending: 3 });
+    expect(listener).toHaveBeenCalledTimes(3);
+  });
+});

package/src/offline/__tests__/write-through.spec.ts

@@ -0,0 +1,137 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DeviceStore } from "../store/DeviceStore";
+import { artwork, fakeCacheStorage, npc, setUpSync, tearDownSync } from "../sync/__tests__/sync-fixtures";
+import { markOfflineUnavailable, OfflineUnavailableError } from "../config";
+import { writeThrough } from "../write-through";
+
+const ok = (data: any) => ({ ok: true, status: 200, statusText: "OK", data });
+
+describe("writeThrough", () => {
+  let store: DeviceStore;
+  let cache: ReturnType<typeof fakeCacheStorage>;
+
+  beforeEach(async () => {
+    store = await setUpSync();
+    // The device keeps root record C (its root record is stored).
+    await store.putRecord({
+      type: "roots",
+      id: "C",
+      rootId: "C",
+      resource: { type: "roots", id: "C", attributes: { name: "C" } },
+      updatedAt: null,
+    });
+    cache = fakeCacheStorage(["wyrdli-offline-1", "wyrdli-images"]);
+    vi.stubGlobal("caches", cache.storage);
+  });
+
+  afterEach(() => {
+    tearDownSync();
+    vi.unstubAllGlobals();
+  });
+
+  it("stores the answer of an online write", async () => {
+    await writeThrough({ method: "PATCH", url: "http://api.test/npcs/n1" }, ok({ data: npc("n1", "Saved") }));
+
+    expect((await store.getRecord("npcs", "n1"))?.resource.attributes.name).toBe("Saved");
+  });
+
+  it("in a browser that cannot keep the device copy, stores nothing and logs nothing per request", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    markOfflineUnavailable(new OfflineUnavailableError("the browser offers no private file storage"));
+    warn.mockClear();
+
+    await writeThrough({ method: "PATCH", url: "http://api.test/npcs/n1" }, ok({ data: npc("n1", "Saved") }));
+
+    expect(await store.getRecord("npcs", "n1")).toBeUndefined();
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it("stores nothing for a write in a root record the device does not keep (a player's root record)", async () => {
+    await writeThrough(
+      { method: "PATCH", url: "http://api.test/npcs/p1" },
+      ok({ data: npc("p1", "Player's", "P"), included: [npc("p2", "Other", "P")] }),
+    );
+    await writeThrough(
+      { method: "POST", url: "http://api.test/roots/P/npcs" },
+      ok({ data: { type: "npcs", id: "p3", attributes: { name: "No relationship" } } }),
+    );
+
+    expect(await store.getRecord("npcs", "p1")).toBeUndefined();
+    expect(await store.getRecord("npcs", "p2")).toBeUndefined();
+    expect(await store.getRecord("npcs", "p3")).toBeUndefined();
+    expect(await store.linksFrom("p1")).toEqual([]);
+  });
+
+  it("never overwrites a record that has a waiting change (a queue entry targets it) or a base", async () => {
+    await store.putRecord({ type: "npcs", id: "n1", rootId: "C", resource: npc("n1", "Mine"), updatedAt: null });
+    await store.enqueue({
+      rootId: "C",
+      method: "POST",
+      path: "npcs",
+      body: { data: npc("n1", "Mine") },
+      base: null,
+    });
+    await store.putRecord({
+      type: "npcs",
+      id: "n2",
+      rootId: "C",
+      resource: npc("n2", "Mine"),
+      updatedAt: null,
+      base: npc("n2", "Base"),
+    });
+
+    await writeThrough(
+      { method: "PATCH", url: "http://api.test/npcs/n1" },
+      ok({ data: npc("n1", "Server"), included: [npc("n2", "Server")] }),
+    );
+
+    expect((await store.getRecord("npcs", "n1"))?.resource.attributes.name).toBe("Mine");
+    expect((await store.getRecord("npcs", "n2"))?.resource.attributes.name).toBe("Mine");
+  });
+
+  it("updates the links of the written record from the answer's relationships", async () => {
+    await store.putRecord({ type: "npcs", id: "n1", rootId: "C", resource: npc("n1", "A"), updatedAt: null });
+    await store.putLink({ fromType: "npcs", fromId: "n1", toType: "npcs", toId: "old", kind: "friends", props: {} });
+
+    await writeThrough(
+      { method: "PATCH", url: "http://api.test/npcs/n1" },
+      ok({
+        data: {
+          ...npc("n1", "A"),
+          relationships: {
+            root: { data: { type: "roots", id: "C" } },
+            friends: { data: [{ type: "npcs", id: "new" }] },
+            portrait: { data: { type: "artworks", id: "a1" } },
+          },
+        },
+      }),
+    );
+
+    const links = (await store.linksFrom("n1")).map((link) => `${link.kind}:${link.toId}`).sort();
+    expect(links).toEqual(["friends:new", "portrait:a1", "root:C"]);
+  });
+
+  it("removes the old cached image when an online write changes an artwork's image URL", async () => {
+    const images = cache.caches.get("wyrdli-images")!;
+    images.set("http://api.test/artworks/a1/image?v=1", {});
+    await store.putRecord({
+      type: "artworks",
+      id: "a1",
+      rootId: "C",
+      resource: artwork("a1", "http://api.test/artworks/a1/image?v=1"),
+      updatedAt: null,
+    });
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, status: 200 })),
+    );
+
+    await writeThrough(
+      { method: "PATCH", url: "http://api.test/artworks/a1" },
+      ok({ data: artwork("a1", "http://api.test/artworks/a1/image?v=2") }),
+    );
+
+    expect(images.has("http://api.test/artworks/a1/image?v=1")).toBe(false);
+  });
+});