@antelopejs/dms 0.7.21 → 0.8.0

package/frontend-vue/tests/file-drop-prompt.test.ts

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  inject,
+  onScopeDispose,
+  ref,
+  watch,
+  type App,
+} from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import File from "../layers/dms-ui/app/components/form/components/File.vue";
+
+const dropZone = defineComponent({
+  inheritAttrs: false,
+  setup:
+    (_, { attrs }) =>
+    () =>
+      h("span", String(attrs.label ?? "")),
+});
+
+function mountFile(multiple: boolean): { app: App; container: HTMLElement } {
+  const app = createApp({
+    render: () => h(File, { modelValue: null, multiple }),
+  });
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component("UFileUpload", dropZone);
+  const container = document.createElement("div");
+  app.mount(container);
+  return { app, container };
+}
+
+beforeEach(() => {
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("inject", inject);
+  vi.stubGlobal("onScopeDispose", onScopeDispose);
+  vi.stubGlobal("FORM_FIELD_LOADING_KEY", Symbol());
+  vi.stubGlobal("FORM_CONTENT_LANGUAGE_KEY", Symbol());
+  vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "x-content-language");
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
+  vi.stubGlobal("useUploadWithProgress", () => ({
+    uploadWithProgress: vi.fn(),
+  }));
+  vi.stubGlobal("useFormField", () => ({
+    emitFormChange: vi.fn(),
+    color: ref(undefined),
+    highlight: ref(undefined),
+    ariaAttrs: ref(undefined),
+  }));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+it("asks for a file in its drop zone", () => {
+  const { app, container } = mountFile(false);
+  expect(container.textContent).toBe("dms.form.file.drop_prompt");
+  app.unmount();
+});
+
+it("asks for files in the drop zone of a multiple field", () => {
+  const { app, container } = mountFile(true);
+  expect(container.textContent).toBe("dms.form.file.drop_prompt_multiple");
+  app.unmount();
+});

package/frontend-vue/tests/footer-config.test.ts

@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  ref,
+  type App,
+} from "vue";
+import type { DmsFooterConfig } from "../layers/dms-core/shared/types/app-config";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+let footerConfig: DmsFooterConfig | undefined;
+
+const SelectStub = defineComponent({
+  setup: () => () => h("select", { "data-locale-switcher": "" }),
+});
+
+async function mountFooter(): Promise<void> {
+  const { default: Footer } = await import(
+    "../layers/dms-layout/app/build/components/layout/Footer.vue"
+  );
+  host = document.createElement("div");
+  document.body.append(host);
+  app = createApp(Footer);
+  app.component("DmsLink", {
+    props: ["to"],
+    setup:
+      (props: { to: string }, { slots }) =>
+      () =>
+        h("a", { href: props.to }, slots.default?.()),
+  });
+  app.component("UIcon", { render: () => null });
+  app.component("USkeleton", { render: () => null });
+  app.component("USelect", SelectStub);
+  app.mount(host);
+  await nextTick();
+}
+
+function linkTexts(): string[] {
+  return [...host.querySelectorAll("a")]
+    .map((link) => link.textContent?.trim() ?? "")
+    .filter((text) => text.length > 0);
+}
+
+beforeEach(async () => {
+  vi.resetModules();
+  footerConfig = undefined;
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("onMounted", onMounted);
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => ({ ok: false })),
+  );
+  vi.stubGlobal("useI18n", () => ({
+    locale: ref("en"),
+    setLocale: vi.fn(),
+    t: (key: string) => key,
+  }));
+  vi.stubGlobal("useUniqueLocales", () => ({ uniqueLocales: ref([]) }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) =>
+      text.startsWith("$") ? `t(${text.slice(1)})` : text,
+  }));
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    branding: { footer: footerConfig },
+  }));
+  const footerLinks = await import(
+    "../layers/dms-layout/app/composables/useFooterLinks"
+  );
+  vi.stubGlobal("useFooterLinks", footerLinks.useFooterLinks);
+  vi.stubGlobal("registerFooterLink", footerLinks.registerFooterLink);
+  vi.stubGlobal("unregisterFooterLink", footerLinks.unregisterFooterLink);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host?.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("footer", () => {
+  it("shows the copyright, the Antelope links, the star and the language picker by default", async () => {
+    await mountFooter();
+    expect(host.textContent).toContain("© Antelope");
+    expect(linkTexts()).toEqual([
+      "empty_layout.footer.documentation",
+      "empty_layout.footer.website",
+      "empty_layout.footer.github_star",
+    ]);
+    expect(host.querySelector("[data-locale-switcher]")).not.toBeNull();
+  });
+
+  it("drops a link a layer unregisters, the Antelope ones included", async () => {
+    const { registerFooterLink, unregisterFooterLink } = await import(
+      "../layers/dms-layout/app/composables/useFooterLinks"
+    );
+    registerFooterLink({
+      id: "acme:status",
+      label: "Status",
+      to: "/status",
+      order: 30,
+    });
+    unregisterFooterLink("dms:documentation");
+    unregisterFooterLink("dms:website");
+    unregisterFooterLink("never-registered");
+    await mountFooter();
+    expect(linkTexts()).toEqual(["Status", "empty_layout.footer.github_star"]);
+  });
+
+  it("names the copyright holder, or drops it, the star and the picker", async () => {
+    footerConfig = { copyright: "$acme.name" };
+    await mountFooter();
+    expect(host.textContent).toContain("© t(acme.name)");
+    app?.unmount();
+    host.remove();
+    vi.mocked(fetch).mockClear();
+
+    footerConfig = {
+      copyright: false,
+      githubStar: false,
+      localeSwitcher: false,
+    };
+    await mountFooter();
+    expect(host.textContent).not.toContain("©");
+    expect(linkTexts()).not.toContain("empty_layout.footer.github_star");
+    expect(host.querySelector("[data-locale-switcher]")).toBeNull();
+    expect(fetch).not.toHaveBeenCalled();
+  });
+});

package/frontend-vue/tests/form-actions.test.ts

@@ -13,6 +13,13 @@ describe("formShowsActions", () => {
     ).toBe(false);
   });
 
+  it("shows the submit of an action form with nothing to fill in", () => {
+    const action = { kind: "action", submitUrl: "/api/jobs/run" } as const;
+    expect(formShowsActions(action, [])).toBe(true);
+    expect(formShowsActions(action, [{ disabled: true }])).toBe(true);
+    expect(formShowsActions({ ...action, saveMode: "none" }, [])).toBe(false);
+  });
+
   it("hides them with saveMode none, whatever the form could submit", () => {
     expect(
       formShowsActions({ saveMode: "none", submitUrl: "/api/order/new" }, [{}]),

package/frontend-vue/tests/form-entry-order.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { orderFormEntries } from "../layers/dms-ui/app/build/composables/form/formEntryOrder";
+import type { FormFieldOrGroup } from "../layers/dms-ui/app/composables/form/types/field";
+
+const field = (id: string) => ({
+  id,
+  component: { componentName: "dms-input-text" },
+});
+
+const group = (id: string, order?: number) => ({
+  id,
+  order,
+  fields: [field(`${id}Member`)],
+});
+
+const ids = (entries: FormFieldOrGroup[]) => entries.map((entry) => entry.id);
+
+describe("orderFormEntries", () => {
+  it("moves the groups giving an order into their places, lowest first", () => {
+    const entries: FormFieldOrGroup[] = [
+      field("username"),
+      group("contact"),
+      field("bio"),
+      group("social", 2),
+      group("address", 1),
+    ];
+    expect(ids(orderFormEntries(entries))).toEqual([
+      "username",
+      "contact",
+      "bio",
+      "address",
+      "social",
+    ]);
+  });
+
+  it("keeps the declaration order of equal orders and of no order at all", () => {
+    const entries: FormFieldOrGroup[] = [
+      group("first", 1),
+      field("name"),
+      group("second", 1),
+      group("loose"),
+    ];
+    expect(ids(orderFormEntries(entries))).toEqual(ids(entries));
+  });
+});

package/frontend-vue/tests/form-footer-kind.test.ts

@@ -69,23 +69,28 @@ describe("saveBarState of an action form", () => {
     });
   });
 
-  it("shows nothing on a page while untouched", () => {
-    expect(action({}).isHidden).toBe(true);
+  it("shows its submit alone, ready, on a page while untouched", () => {
+    // A pre-filled form sends its defaults as they are.
+    expect(action({})).toEqual({
+      showsStatus: false,
+      showsSubmit: true,
+      isSubmitHeld: false,
+      isHidden: false,
+    });
   });
 
-  it("offers Cancel beside its held submit in a drawer or a modal", () => {
-    // The invite modal: empty, it still shows the way out and its "Invite".
+  it("offers Cancel beside its ready submit in a drawer or a modal", () => {
     expect(action({ cancellable: true })).toEqual({
       showsStatus: false,
       secondary: "cancel",
       showsSubmit: true,
-      isSubmitHeld: true,
+      isSubmitHeld: false,
       isHidden: false,
     });
   });
 
   it("shows its submit alone, ready, when nothing in it can be changed", () => {
-    const bar = action({ resettable: false });
+    const bar = action({ resettable: false, dirty: true });
     expect(bar.secondary).toBeUndefined();
     expect(bar).toMatchObject({
       showsSubmit: true,

package/frontend-vue/tests/form-load-error.test.ts

@@ -4,7 +4,9 @@ import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import FormLoadError from "../layers/dms-ui/app/build/components/form/FormLoadError.vue";
 import {
+  type FormLoadFailure,
   type FormLoadSource,
+  missingRecordFailure,
   trackFormRecordLoad,
 } from "../layers/dms-ui/app/build/composables/form/formRecordLoad";
 
@@ -72,6 +74,32 @@ describe("a form's record load", () => {
   });
 });
 
+describe("a form about a record its address names none of", () => {
+  const FETCH_URL = "/api/tasks/get?id={{query.id}}";
+
+  it("reports the record missing while the id is not in the address", () => {
+    expect(
+      missingRecordFailure({ requiresRecord: true, fetchUrl: FETCH_URL }),
+    ).toBe("missing");
+  });
+
+  it("reports nothing once the address names the record", () => {
+    expect(
+      missingRecordFailure({
+        requiresRecord: true,
+        fetchUrl: FETCH_URL,
+        resolvedFetchUrl: "/api/tasks/get?id=1",
+      }),
+    ).toBe(null);
+  });
+
+  it("leaves a form that may open without a record to its defaults", () => {
+    // A create form seeded by `?duplicate=` when there is one.
+    expect(missingRecordFailure({ fetchUrl: FETCH_URL })).toBe(null);
+    expect(missingRecordFailure({ requiresRecord: true })).toBe(null);
+  });
+});
+
 describe("the load error a form shows", () => {
   const Slot = defineComponent({
     props: {
@@ -91,7 +119,7 @@ describe("the load error a form shows", () => {
         ]),
   });
 
-  async function render(failure: "forbidden" | "error"): Promise<string> {
+  async function render(failure: FormLoadFailure): Promise<string> {
     const app = createSSRApp({
       render: () => h(FormLoadError, { failure }),
     });
@@ -118,6 +146,13 @@ describe("the load error a form shows", () => {
     expect(html).toContain("dms.form.load_error.retry");
   });
 
+  it("says no entry is selected, with nothing to retry", async () => {
+    const html = await render("missing");
+    expect(html).toContain("dms.form.load_error.missing_title");
+    expect(html).toContain("dms.form.load_error.missing_description");
+    expect(html).not.toContain("dms.form.load_error.retry");
+  });
+
   it("has its texts in English and French", () => {
     for (const file of ["ui-en-GB.json", "ui-fr-FR.json"]) {
       const locale = JSON.parse(
@@ -131,6 +166,8 @@ describe("the load error a form shows", () => {
         "error_title",
         "forbidden_description",
         "forbidden_title",
+        "missing_description",
+        "missing_title",
         "retry",
       ]);
     }

package/frontend-vue/tests/grid-responsive-columns.test.ts

@@ -87,6 +87,15 @@ describe("grid column template", () => {
     expect(gridColumnsTemplate(1, GAP, MIN)).toContain("(100% - 0 * 1rem)");
   });
 
+  it("reads a unitless gap or minimum as pixels, which calc() requires", () => {
+    const template = gridColumnsTemplate(2, "0", "160");
+    expect(template).toContain("(100% - 1 * 0px)");
+    expect(template).toContain("max(160px,");
+    expect(resolveColumnCount(template, 553, 0)).toBe(2);
+    const css = gridResponsiveStyles(gridScopeId("nested"), 2, "0", MIN);
+    expect(css).toContain(`calc(2 * ${MIN} + 1 * 0px)`);
+  });
+
   it("honours a caller-supplied minimum", () => {
     expect(gridColumnsTemplate(4, GAP, "120px")).toContain("120px");
     expect(

package/frontend-vue/tests/header-actions.test.ts

@@ -2,6 +2,7 @@
 import {
   computed,
   createApp,
+  createSSRApp,
   defineComponent,
   h,
   nextTick,
@@ -10,6 +11,7 @@ import {
   type App,
   type Ref,
 } from "vue";
+import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import DashboardHeader from "../layers/dms-layout/app/build/components/layout/DashboardHeader.vue";
 import {
@@ -97,18 +99,44 @@ function installRuntime(): void {
   );
 }
 
-function mountHeader(): HTMLElement {
-  const host = document.createElement("div");
-  document.body.append(host);
-  app = createApp(DashboardHeader);
-  app.component("UButton", ButtonStub);
+function createHeaderApp(create: typeof createApp): App {
+  const header = create(DashboardHeader);
+  header.component("UButton", ButtonStub);
   ["UDashboardNavbar", "UTooltip", "UBreadcrumb", "UDropdownMenu"].forEach(
-    (name) => app?.component(name, SlotsStub),
+    (name) => header.component(name, SlotsStub),
   );
+  return header;
+}
+
+async function mountHeader(): Promise<HTMLElement> {
+  const host = document.createElement("div");
+  document.body.append(host);
+  app = createHeaderApp(createApp);
+  app.mount(host);
+  await nextTick();
+  return host;
+}
+
+/**
+ * Renders the header on the "server", runs what only the client runs (a
+ * `.client` plugin), then hydrates the server markup.
+ */
+async function hydrateHeader(runOnClient: () => void): Promise<HTMLElement> {
+  const host = document.createElement("div");
+  host.innerHTML = await renderToString(createHeaderApp(createSSRApp));
+  document.body.append(host);
+  runOnClient();
+  app = createHeaderApp(createSSRApp);
   app.mount(host);
   return host;
 }
 
+function hydrationWarnings(spies: ReturnType<typeof vi.spyOn>[]): string[] {
+  return spies
+    .flatMap((spy) => spy.mock.calls.map((call) => String(call[0])))
+    .filter((message) => message.includes("Hydration"));
+}
+
 function button(host: HTMLElement, label: string): HTMLButtonElement | null {
   return host.querySelector(`button[aria-label="${label}"]`);
 }
@@ -145,7 +173,7 @@ describe("header action buttons", () => {
       action("toggle", { onSelect: vi.fn(), isActive: () => isOn.value }),
     );
     registerHeaderAction(action("plain", { onSelect: vi.fn() }));
-    const host = mountHeader();
+    const host = await mountHeader();
     const toggle = button(host, "toggle");
     expect(toggle?.dataset.color).toBe(IDLE_COLOR);
     expect(toggle?.getAttribute("aria-pressed")).toBe("false");
@@ -160,7 +188,7 @@ describe("header action buttons", () => {
     registerHeaderAction(
       action("panel", { label: "$panel.toggle", sidePanelId: PANEL_ID }),
     );
-    const host = mountHeader();
+    const host = await mountHeader();
     const toggle = button(host, "t:panel.toggle");
     const { isOpen } = useSidePanel(PANEL_ID);
     toggle?.click();
@@ -182,10 +210,28 @@ describe("header action buttons", () => {
         isActive: () => true,
       }),
     );
-    const host = mountHeader();
+    const host = await mountHeader();
     const builder = button(host, "Edit");
     builder?.click();
     expect(onSelect).toHaveBeenCalledOnce();
     expect(builder?.dataset.color).toBe(ACTIVE_COLOR);
   });
 });
+
+describe("header action hydration", () => {
+  it("draws a client-only action once mounted, not over the server markup", async () => {
+    const spies = [
+      vi.spyOn(console, "warn").mockImplementation(() => undefined),
+      vi.spyOn(console, "error").mockImplementation(() => undefined),
+    ];
+    registerHeaderAction(action("panel", { sidePanelId: PANEL_ID }));
+    const host = await hydrateHeader(() =>
+      registerHeaderAction(action("client", { onSelect: vi.fn() })),
+    );
+    expect(hydrationWarnings(spies)).toEqual([]);
+    expect(button(host, "panel")).not.toBeNull();
+    await nextTick();
+    expect(button(host, "client")).not.toBeNull();
+    spies.forEach((spy) => spy.mockRestore());
+  });
+});

package/frontend-vue/tests/instant-save-badge.test.ts

@@ -51,13 +51,20 @@ afterEach(() => {
 });
 
 describe("DmsInstantSaveBadge", () => {
-  it("reads exactly 'Saved instantly' in en-GB, whatever the save state", async () => {
+  it("says what the save state is, in en-GB", async () => {
     const { default: InstantSaveBadge } = await import(
       "../layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue"
     );
-    for (const state of [undefined, "idle", "saving", "saved"] as const) {
+    const labels = [
+      [undefined, "Saved instantly"],
+      ["idle", "Saved instantly"],
+      ["saving", "Saving"],
+      ["saved", "Saved instantly"],
+      ["error", "Not saved"],
+    ] as const;
+    for (const [state, label] of labels) {
       await mount({ render: () => h(InstantSaveBadge, { state }) });
-      expect(badge()?.textContent?.trim()).toBe("Saved instantly");
+      expect(badge()?.textContent?.trim()).toBe(label);
       expect(badge()?.dataset.state).toBe(state ?? "idle");
       expect(badge()?.title).toBeTruthy();
       app?.unmount();
@@ -82,7 +89,7 @@ describe("DmsInstantSaveBadge", () => {
     }
   });
 
-  it("uses one key, translated in French", async () => {
+  it("is translated in French", async () => {
     vi.stubGlobal("useI18n", () => ({ t: translator(uiFr) }));
     const { default: InstantSaveBadge } = await import(
       "../layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue"

package/frontend-vue/tests/list-row-truncate.test.ts

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, type App } from "vue";
+import ListRow from "../layers/dms-ui/app/components/list-row/ListRow.vue";
+
+const LONG_TITLE = "Safari on iPhone 15 with a very long device name";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(truncate: boolean) {
+  app = createApp({ render: () => h(ListRow, { title: LONG_TITLE, truncate }) });
+  app.mount(host);
+  await nextTick();
+}
+
+const titleText = () =>
+  [...host.querySelectorAll("span")].find(
+    (span) => span.textContent?.trim() === LONG_TITLE,
+  );
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("DmsListRow truncate", () => {
+  it("puts the ellipsis on the title text, not on its flex container", async () => {
+    await mount(true);
+    expect(titleText()?.classList.contains("truncate")).toBe(true);
+    expect(titleText()?.parentElement?.title).toBe(LONG_TITLE);
+  });
+
+  it("leaves the title text alone without truncate", async () => {
+    await mount(false);
+    expect(titleText()?.classList.contains("truncate")).toBe(false);
+  });
+});

package/frontend-vue/tests/roles-name-errors.test.ts

@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import {
   type App,
@@ -203,9 +204,7 @@ beforeEach(() => {
   vi.stubGlobal("useToast", () => ({ add: addToast }));
   vi.stubGlobal("useConfirm", () => ({ confirm }));
   vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
-  vi.stubGlobal("interpolateUrl", (url: string, data: Record<string, string>) =>
-    url.replace(/\{(\w+)\}/g, (_, key: string) => data[key] ?? ""),
-  );
+  vi.stubGlobal("interpolateUrl", interpolateUrl);
   vi.stubGlobal("useTranslation", () => ({
     processApiMessage: (message: string) => `t(${message})`,
   }));

package/frontend-vue/tests/save-bar.test.ts

@@ -61,7 +61,7 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-it("shows an empty modal action form's way out and its held submit", async () => {
+it("shows a modal action form's way out and its ready submit", async () => {
   const { onCancel } = await mount({
     variant: "band",
     kind: "action",
@@ -73,12 +73,24 @@ it("shows an empty modal action form's way out and its held submit", async () =>
   expect(host.firstElementChild!.getAttribute("aria-hidden")).toBeNull();
   expect(buttons()).toEqual([
     { label: "dms.button.cancel", disabled: false },
-    { label: "Invite", disabled: true },
+    { label: "Invite", disabled: false },
   ]);
   host.querySelector("button")!.click();
   expect(onCancel).toHaveBeenCalledOnce();
 });
 
+it("sends an untouched page action form as it is, its submit alone", async () => {
+  await mount({
+    variant: "band",
+    kind: "action",
+    dirty: false,
+    saveLabel: "Send",
+  });
+
+  expect(host.firstElementChild!.getAttribute("aria-hidden")).toBeNull();
+  expect(buttons()).toEqual([{ label: "Send", disabled: false }]);
+});
+
 it("resets an action form once a value changed, and sends it", async () => {
   await mount({
     variant: "band",
@@ -146,7 +158,7 @@ it("gives Cancel and Unsaved changes the same fixed height", async () => {
 });
 
 it("keeps a hidden band's place in its footer", async () => {
-  await mount({ variant: "band", kind: "action", dirty: false });
+  await mount({ variant: "band", kind: "record", dirty: false });
 
   expect(anchor().getAttribute("aria-hidden")).toBe("true");
   expect(classesOf(anchor())).toContain("invisible");

package/frontend-vue/tests/save-status-error.test.ts

@@ -56,11 +56,11 @@ describe("DmsSaveStatus: a failed save", () => {
     expect(onRetry).toHaveBeenCalledOnce();
   });
 
-  it("turns the header pill red, its wording unchanged", async () => {
+  it("turns the header pill red and says it was not saved", async () => {
     await mount(() => h(InstantSaveBadge, { state: "error" }));
     const pill = host.querySelector<HTMLElement>("[data-instant-save-badge]")!;
 
-    expect(pill.textContent?.trim()).toBe("Saved instantly");
+    expect(pill.textContent?.trim()).toBe("Not saved");
     expect(pill.className).toContain("text-error");
   });
 });