srcdev-nuxt-components 9.6.19 → 9.6.20

package/app/components/02.molecules/qr-code/tests/CaptureQrCode.spec.ts

@@ -1,8 +1,30 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import CaptureQrCode from "../CaptureQrCode.vue";
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+type CaptureMountOptions = Parameters<typeof mountSuspended<typeof CaptureQrCode>>[1];
+
+// The real QrcodeStream queues camera start/stop on a module-level promise chain shared by every
+// instance, so a start left over from an earlier test can fail mid-test and flip state.error.
+const qrcodeStreamStub = { name: "QrcodeStream", emits: ["detect", "error"], template: `<div class="qrcode-stream-stub"></div>` };
+
+const mountCapture = async (options: CaptureMountOptions = {}) => {
+  const wrapper = await mountSuspended(CaptureQrCode, {
+    ...options,
+    global: { ...options?.global, stubs: { QrcodeStream: qrcodeStreamStub, ...options?.global?.stubs } },
+  });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 interface CaptureVM {
   state: { error: boolean; errorMsg: string; cameraOn: boolean };
   result: string[] | undefined;
@@ -12,63 +34,52 @@ interface CaptureVM {
 }
 
 describe("CaptureQrCode", () => {
-  // QrcodeStream (from nuxt-qrcode) runs canvas-based detection internally.
-  // jsdom defines HTMLCanvasElement but returns null for getContext, which
-  // causes the library to throw. We provide a minimal non-null mock.
-  beforeEach(() => {
-    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({} as unknown as RenderingContext);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Root element ─────────────────────────────────────────────────────────
 
   it("renders as a div", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("always has the capture-qr-code class", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     expect(wrapper.classes()).toContain("capture-qr-code");
   });
 
   // ─── Initial state ────────────────────────────────────────────────────────
 
   it("has camera on by default", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     expect(vm.state.cameraOn).toBe(true);
   });
 
   it("does not show camera-stopped on mount", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     expect(wrapper.find(".capture-qr-code-stopped").exists()).toBe(false);
   });
 
   it("does not show scanned results initially", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     expect(wrapper.find(".capture-qr-code-results ul").exists()).toBe(false);
   });
 
   it("does not show the error state initially", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     expect(wrapper.find(".capture-qr-code-error").exists()).toBe(false);
   });
 
   // ─── Camera off ───────────────────────────────────────────────────────────
 
   it("hides the stream and shows camera-stopped when cameraOn is false", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.state.cameraOn = false;
     await nextTick();
@@ -79,23 +90,49 @@ describe("CaptureQrCode", () => {
   // ─── Error state ──────────────────────────────────────────────────────────
 
   it("shows camera-error when onError is called", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("Permission denied"));
     await nextTick();
     expect(wrapper.find(".capture-qr-code-error").exists()).toBe(true);
   });
 
-  it("shows the error message in the error state", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+  it("shows a plain-language message for a known error", async () => {
+    const wrapper = await mountCapture();
+    const err = new Error("Permission denied");
+    err.name = "NotAllowedError";
+    (wrapper.vm as unknown as CaptureVM).onError(err);
+    await nextTick();
+    expect(wrapper.find(".capture-qr-code-error-message").text()).toBe(
+      "Camera access was blocked. Allow it in your browser settings, then try again."
+    );
+  });
+
+  it("falls back to the default message for an unknown error", async () => {
+    const wrapper = await mountCapture();
+    (wrapper.vm as unknown as CaptureVM).onError(new Error("Something odd"));
+    await nextTick();
+    expect(wrapper.find(".capture-qr-code-error-message").text()).toBe("The camera couldn't be started. Try again.");
+  });
+
+  it("uses errorMessages overrides, per error and as the default", async () => {
+    const wrapper = await mountCapture({
+      props: { errorMessages: { NotFoundError: "Aucune caméra", default: "Erreur" } },
+    });
     const vm = wrapper.vm as unknown as CaptureVM;
-    vm.onError(new Error("Permission denied"));
+    const notFound = new Error("x");
+    notFound.name = "NotFoundError";
+    vm.onError(notFound);
     await nextTick();
-    expect(wrapper.find(".capture-qr-code-error p").text()).toContain("Permission denied");
+    expect(wrapper.find(".capture-qr-code-error-message").text()).toBe("Aucune caméra");
+
+    vm.onError(new Error("unknown"));
+    await nextTick();
+    expect(wrapper.find(".capture-qr-code-error-message").text()).toBe("Erreur");
   });
 
   it("sets state.error when onError is called, hiding the stream", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("test"));
     await nextTick();
@@ -104,7 +141,7 @@ describe("CaptureQrCode", () => {
   });
 
   it("shows a reset button in the error state", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("test"));
     await nextTick();
@@ -114,7 +151,7 @@ describe("CaptureQrCode", () => {
   // ─── Reset camera ─────────────────────────────────────────────────────────
 
   it("clears the error state when resetCamera is called", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("test"));
     await nextTick();
@@ -125,7 +162,7 @@ describe("CaptureQrCode", () => {
   });
 
   it("clears the error state when the reset button is clicked", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("test"));
     await nextTick();
@@ -136,7 +173,7 @@ describe("CaptureQrCode", () => {
   // ─── Detect ───────────────────────────────────────────────────────────────
 
   it("shows scanned results after onDetect is called", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
@@ -144,7 +181,7 @@ describe("CaptureQrCode", () => {
   });
 
   it("shows the detected value in the results list", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
@@ -152,7 +189,7 @@ describe("CaptureQrCode", () => {
   });
 
   it("shows all detected values when multiple codes are scanned", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onDetect([{ rawValue: "https://one.com" }, { rawValue: "https://two.com" }]);
     await nextTick();
@@ -163,7 +200,7 @@ describe("CaptureQrCode", () => {
   });
 
   it("replaces results on subsequent scans", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onDetect([{ rawValue: "first" }]);
     await nextTick();
@@ -177,25 +214,69 @@ describe("CaptureQrCode", () => {
   // ─── Visibility change ────────────────────────────────────────────────────
 
   it("stops the camera when the page becomes hidden", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
+    expect(wrapper.find(".qrcode-stream-stub").exists()).toBe(true);
     Object.defineProperty(document, "hidden", { get: () => true, configurable: true });
     document.dispatchEvent(new Event("visibilitychange"));
     await nextTick();
-    expect(wrapper.find("qrcodestream").exists()).toBe(false);
+    expect(wrapper.find(".qrcode-stream-stub").exists()).toBe(false);
     Object.defineProperty(document, "hidden", { get: () => false, configurable: true });
   });
 
+  it("turns the camera back on when the page becomes visible again", async () => {
+    const wrapper = await mountCapture();
+    const vm = wrapper.vm as unknown as CaptureVM;
+    Object.defineProperty(document, "hidden", { get: () => true, configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    await nextTick();
+    expect(vm.state.cameraOn).toBe(false);
+
+    Object.defineProperty(document, "hidden", { get: () => false, configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    await nextTick();
+    expect(vm.state.cameraOn).toBe(true);
+  });
+
+  it("stays in the error state when the page becomes visible again", async () => {
+    const wrapper = await mountCapture();
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    Object.defineProperty(document, "hidden", { get: () => true, configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    Object.defineProperty(document, "hidden", { get: () => false, configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    await nextTick();
+    expect(wrapper.find(".capture-qr-code-error").exists()).toBe(true);
+  });
+
+  it("only stops camera streams inside its own root", async () => {
+    const outside = document.createElement("video");
+    const stop = vi.fn();
+    Object.defineProperty(outside, "srcObject", {
+      value: { getTracks: () => [{ stop }] },
+      writable: true,
+      configurable: true,
+    });
+    document.body.appendChild(outside);
+
+    const wrapper = await mountCapture();
+    wrapper.unmount();
+    mounted.splice(mounted.indexOf(wrapper), 1);
+    expect(stop).not.toHaveBeenCalled();
+    outside.remove();
+  });
+
   // ─── styleClassPassthrough ────────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode, {
+    const wrapper = await mountCapture({
       props: { styleClassPassthrough: "custom-class" },
     });
     expect(wrapper.classes()).toContain("custom-class");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode, {
+    const wrapper = await mountCapture({
       props: { styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");
@@ -203,7 +284,7 @@ describe("CaptureQrCode", () => {
   });
 
   it("retains capture-qr-code class alongside styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode, {
+    const wrapper = await mountCapture({
       props: { styleClassPassthrough: "extra" },
     });
     expect(wrapper.classes()).toContain("capture-qr-code");
@@ -212,23 +293,15 @@ describe("CaptureQrCode", () => {
 });
 
 describe("CaptureQrCode labels and a11y", () => {
-  beforeEach(() => {
-    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({} as unknown as RenderingContext);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
   it("uses cameraStoppedLabel for the stopped message", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode, { props: { cameraStoppedLabel: "Caméra arrêtée" } });
+    const wrapper = await mountCapture({ props: { cameraStoppedLabel: "Caméra arrêtée" } });
     (wrapper.vm as unknown as CaptureVM).state.cameraOn = false;
     await nextTick();
     expect(wrapper.find(".capture-qr-code-stopped").text()).toBe("Caméra arrêtée");
   });
 
   it("uses resetCameraLabel for the reset button and marks the error as an alert", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode, { props: { resetCameraLabel: "Réinitialiser" } });
+    const wrapper = await mountCapture({ props: { resetCameraLabel: "Réinitialiser" } });
     (wrapper.vm as unknown as CaptureVM).onError(new Error("test"));
     await nextTick();
     expect(wrapper.find(".capture-qr-code-error").attributes("role")).toBe("alert");
@@ -236,7 +309,7 @@ describe("CaptureQrCode labels and a11y", () => {
   });
 
   it("lets the error slot replace the default error content", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode, {
+    const wrapper = await mountCapture({
       slots: { error: ({ error }: { error: string }) => `Custom: ${error}` },
     });
     const err = new Error("denied");
@@ -247,12 +320,12 @@ describe("CaptureQrCode labels and a11y", () => {
   });
 
   it("keeps a polite live region for results", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode);
+    const wrapper = await mountCapture();
     expect(wrapper.find(".capture-qr-code-results").attributes("aria-live")).toBe("polite");
   });
 
   it("updates classes when styleClassPassthrough changes after mount", async () => {
-    const wrapper = await mountSuspended(CaptureQrCode, { props: { styleClassPassthrough: ["original"] } });
+    const wrapper = await mountCapture({ props: { styleClassPassthrough: ["original"] } });
     await wrapper.setProps({ styleClassPassthrough: ["updated"] });
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");

package/app/components/02.molecules/qr-code/tests/DecodeQrCode.spec.ts

@@ -1,56 +1,70 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import DecodeQrCode from "../DecodeQrCode.vue";
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountDecode = async (options: { props?: Record<string, unknown> } = {}) => {
+  const wrapper = await mountSuspended(DecodeQrCode, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 interface DecodeVM {
   result: string[] | undefined;
   isDropping: boolean;
   onDetect: (codes: { rawValue: string }[]) => void;
   onDropping: (dropping: boolean) => void;
+  onDropError: () => void;
 }
 
 describe("DecodeQrCode", () => {
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Root element ─────────────────────────────────────────────────────────
 
   it("renders as a div", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("always has the decode-qr-code class", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     expect(wrapper.classes()).toContain("decode-qr-code");
   });
 
   // ─── Initial DOM structure ─────────────────────────────────────────────────
 
   it("renders the file capture element", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     expect(wrapper.find(".decode-qr-code-capture").exists()).toBe(true);
   });
 
   it("renders the drop zone element", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     expect(wrapper.find(".decode-qr-code-dropzone").exists()).toBe(true);
   });
 
   it("does not show scanned results initially", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     expect(wrapper.find(".decode-qr-code-results ul").exists()).toBe(false);
   });
 
   // ─── Detect ───────────────────────────────────────────────────────────────
 
   it("shows scanned results after onDetect is called", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
@@ -58,7 +72,7 @@ describe("DecodeQrCode", () => {
   });
 
   it("shows the detected value in the results list", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
@@ -66,7 +80,7 @@ describe("DecodeQrCode", () => {
   });
 
   it("shows all detected values when multiple codes are decoded", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "https://one.com" }, { rawValue: "https://two.com" }]);
     await nextTick();
@@ -77,7 +91,7 @@ describe("DecodeQrCode", () => {
   });
 
   it("replaces results on subsequent detections", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "first" }]);
     await nextTick();
@@ -89,7 +103,7 @@ describe("DecodeQrCode", () => {
   });
 
   it("hides results when detecting an empty array", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
@@ -101,7 +115,7 @@ describe("DecodeQrCode", () => {
   // ─── Dropping state ───────────────────────────────────────────────────────
 
   it("sets isDropping to true when onDropping is called with true", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDropping(true);
     await nextTick();
@@ -109,7 +123,7 @@ describe("DecodeQrCode", () => {
   });
 
   it("sets isDropping to false when onDropping is called with false", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDropping(true);
     await nextTick();
@@ -121,14 +135,14 @@ describe("DecodeQrCode", () => {
   // ─── styleClassPassthrough ────────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode, {
+    const wrapper = await mountDecode({
       props: { styleClassPassthrough: "custom-class" },
     });
     expect(wrapper.classes()).toContain("custom-class");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode, {
+    const wrapper = await mountDecode({
       props: { styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");
@@ -136,7 +150,7 @@ describe("DecodeQrCode", () => {
   });
 
   it("retains decode-qr-code class alongside styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode, {
+    const wrapper = await mountDecode({
       props: { styleClassPassthrough: "extra" },
     });
     expect(wrapper.classes()).toContain("decode-qr-code");
@@ -146,34 +160,69 @@ describe("DecodeQrCode", () => {
 
 describe("DecodeQrCode labels, drop state and a11y", () => {
   it("wraps the file input in a label with the default upload text", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     const label = wrapper.find("label.decode-qr-code-upload");
     expect(label.text()).toContain("Upload a QR code image");
     expect(label.find(".decode-qr-code-capture").exists()).toBe(true);
   });
 
   it("uses uploadLabel and dropLabel when given", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode, {
+    const wrapper = await mountDecode({
       props: { uploadLabel: "Téléverser", dropLabel: "Déposer ici" },
     });
     expect(wrapper.find(".decode-qr-code-upload-label").text()).toBe("Téléverser");
     expect(wrapper.find(".decode-qr-code-dropzone-label").text()).toBe("Déposer ici");
   });
 
-  it("adds is-dropping to the drop zone while an image is dragged over it", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
-    (wrapper.vm as unknown as DecodeVM).onDropping(true);
+  it("sets data-dropping on the drop zone only while an image is dragged over it", async () => {
+    const wrapper = await mountDecode();
+    const vm = wrapper.vm as unknown as DecodeVM;
+    expect(wrapper.find(".decode-qr-code-dropzone").attributes("data-dropping")).toBeUndefined();
+    vm.onDropping(true);
+    await nextTick();
+    expect(wrapper.find(".decode-qr-code-dropzone").attributes("data-dropping")).toBe("");
+    vm.onDropping(false);
+    await nextTick();
+    expect(wrapper.find(".decode-qr-code-dropzone").attributes("data-dropping")).toBeUndefined();
+  });
+
+  it("says no code was found when an image decodes to nothing", async () => {
+    const wrapper = await mountDecode({ props: { noResultLabel: "Aucun code" } });
+    expect(wrapper.find(".decode-qr-code-status").exists()).toBe(false);
+    (wrapper.vm as unknown as DecodeVM).onDetect([]);
+    await nextTick();
+    expect(wrapper.find(".decode-qr-code-status").text()).toBe("Aucun code");
+  });
+
+  it("says the file couldn't be read when the drop zone reports an error, and clears old results", async () => {
+    const wrapper = await mountDecode();
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDetect([{ rawValue: "https://example.com" }]);
+    await nextTick();
+    vm.onDropError();
+    await nextTick();
+    expect(wrapper.find(".decode-qr-code-results ul").exists()).toBe(false);
+    expect(wrapper.find(".decode-qr-code-status").text()).toBe("That file couldn't be read as an image.");
+  });
+
+  it("replaces a status message with results on the next successful decode", async () => {
+    const wrapper = await mountDecode();
+    const vm = wrapper.vm as unknown as DecodeVM;
+    vm.onDetect([]);
+    await nextTick();
+    vm.onDetect([{ rawValue: "found" }]);
     await nextTick();
-    expect(wrapper.find(".decode-qr-code-dropzone").classes()).toContain("is-dropping");
+    expect(wrapper.find(".decode-qr-code-status").exists()).toBe(false);
+    expect(wrapper.find(".decode-qr-code-result").text()).toBe("found");
   });
 
   it("keeps a polite live region for results", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode);
+    const wrapper = await mountDecode();
     expect(wrapper.find(".decode-qr-code-results").attributes("aria-live")).toBe("polite");
   });
 
   it("updates classes when styleClassPassthrough changes after mount", async () => {
-    const wrapper = await mountSuspended(DecodeQrCode, { props: { styleClassPassthrough: ["original"] } });
+    const wrapper = await mountDecode({ props: { styleClassPassthrough: ["original"] } });
     await wrapper.setProps({ styleClassPassthrough: ["updated"] });
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");

package/app/components/02.molecules/samaritan-prompt/CONSUMER-STYLING.md

@@ -14,13 +14,15 @@ class set and one token API, so everything here applies to both.
 | `--samaritan-prompt-font-size` | `2rem` | Text size (the underline and gaps don't scale with it) |
 | `--samaritan-prompt-letter-spacing` | `0.08em` | Letter spacing |
 | `--samaritan-prompt-text-transform` | `uppercase` | Text case (`none` keeps messages as written) |
-| `--samaritan-prompt-text-colour` | `#ffffff` | Text colour |
+| `--samaritan-prompt-text-colour` | `var(--theme-text)` | Text colour |
+| `--samaritan-prompt-text-white-space` | `normal` | `nowrap` keeps each message on one line (it can then overflow a narrow container) |
+| `--samaritan-prompt-text-line-clamp` | `none` | Lines before an ellipsis. `1` is single-line ellipsis, `none` shows everything |
 
 ### Underline
 
 | Token | Default | Controls |
 |---|---|---|
-| `--samaritan-prompt-underline-colour` | `#ffffff` | Underline colour |
+| `--samaritan-prompt-underline-colour` | `var(--theme-text)` | Underline colour |
 | `--samaritan-prompt-underline-height` | `0.15rem` | Underline thickness |
 | `--samaritan-prompt-underline-gap` | `0.6rem` | Space between text and underline |
 
@@ -28,7 +30,7 @@ class set and one token API, so everything here applies to both.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--samaritan-prompt-cursor-colour` | `#cc0000` | Cursor colour at the peak of the pulse |
+| `--samaritan-prompt-cursor-colour` | `var(--theme-accent)` | Cursor colour at the peak of the pulse |
 | `--samaritan-prompt-cursor-colour-off` | `transparent` | Cursor colour at the trough of the pulse |
 | `--samaritan-prompt-cursor-size` | `2.4rem` | Cursor glyph size |
 | `--samaritan-prompt-cursor-pulse-duration` | `2.5s` | One full pulse cycle |
@@ -37,6 +39,12 @@ class set and one token API, so everything here applies to both.
 Private, not public API: `--_fade-duration` (set inline on the root from the `fadeDuration` prop,
 or the current message's `fadeDuration` in `SamaritanPromptMixed`).
 
+> **Changed 2026-10-21**: colour defaults follow the theme (`--theme-text` for text and underline,
+> `--theme-accent` for the cursor) instead of assuming a dark page (`#ffffff`, `#cc0000`); set the
+> three colour tokens for the classic white-on-black look. Text now wraps (`overflow-wrap: anywhere`)
+> instead of `nowrap`, so a long message stays inside its container; `--samaritan-prompt-text-white-space`
+> and `--samaritan-prompt-text-line-clamp` are new.
+>
 > **Changed 2026-09-27**: all tokens were renamed from `--samaritan-*` to `--samaritan-prompt-*`,
 > and `color` became `colour` (`--samaritan-color-text` is now `--samaritan-prompt-text-colour`,
 > `--samaritan-color-cursor-off` is now `--samaritan-prompt-cursor-colour-off`, and so on). The
@@ -69,20 +77,22 @@ Inner element classes, safe to target:
 
 - The cursor pulses between `--samaritan-prompt-cursor-colour` and `-colour-off`; set both to the
   same value for a steady cursor.
-- `prefers-reduced-motion: reduce` removes the cursor pulse and the word-pulse fade transition.
-  The text sequence itself keeps running (it is the content), and pauses on hover like always.
+- `prefers-reduced-motion: reduce` removes the cursor pulse and the word-pulse fade transition, and
+  the typewriter shows each message whole instead of typing and deleting it character by
+  character. The message sequence itself keeps running (it is the content), and pauses on hover
+  like always.
 
 ---
 
 ## Global theming
 
-The defaults assume a dark page. For a site that switches colour scheme, point the colours at the
-theme tokens once:
+The colours follow the theme by default. For the classic white-on-black look across a site:
 
 ```css
 :where(html) {
-  --samaritan-prompt-text-colour: var(--theme-text);
-  --samaritan-prompt-underline-colour: var(--theme-text);
+  --samaritan-prompt-text-colour: #fff;
+  --samaritan-prompt-underline-colour: #fff;
+  --samaritan-prompt-cursor-colour: #cc0000;
 }
 ```
 
@@ -115,4 +125,6 @@ element. Reactive: changing the prop replaces the previous classes.
   > that ancestor. Its styles now apply wherever it's used, and `.samaritan-stage` means nothing
   > to the library.
 
-- The `Mono MMM 5` font loads from `/fonts/monoMMM_5.ttf`, shipped in this layer's `public/`.
+- The `Mono MMM 5` font loads from `/fonts/monoMMM_5.ttf`, shipped in this layer's `public/`. Both components
+  declare it with `font-display: swap` (until 2026-10-21 `SamaritanPromptMixed` used `optional`, so
+  which one won depended on load order).