srcdev-nuxt-components 9.1.36 → 9.1.38

package/app/components/01.atoms/qr-code/tests/DisplayQrCode.spec.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayQrCode from "../DisplayQrCode.vue";
+import type { QrCodeVariant } from "~/types/components";
+
+const defaultProps = {
+  qrValue: "https://example.com",
+};
+
+describe("DisplayQrCode", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders a single root element", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.element).toBeTruthy();
+  });
+
+  it("always has the display-qr-code class", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.classes()).toContain("display-qr-code");
+  });
+
+  // ─── Default props ────────────────────────────────────────────────────────
+
+  it("defaults radius to 0", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { radius: number }
+    expect((wrapper.vm as unknown as VM).radius).toBe(0);
+  });
+
+  it("defaults blackColor to currentColor", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { blackColor: string }
+    expect((wrapper.vm as unknown as VM).blackColor).toBe("currentColor");
+  });
+
+  it("defaults whiteColor to transparent", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { whiteColor: string }
+    expect((wrapper.vm as unknown as VM).whiteColor).toBe("transparent");
+  });
+
+  it("defaults size to 256px", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { size: string }
+    expect((wrapper.vm as unknown as VM).size).toBe("256px");
+  });
+
+  it("defaults variant to all-default", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { variant: QrCodeVariant }
+    expect((wrapper.vm as unknown as VM).variant).toEqual({ inner: "default", marker: "default", pixel: "default" });
+  });
+
+  // ─── Custom props ─────────────────────────────────────────────────────────
+
+  it("reflects a custom radius prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, radius: 12 },
+    });
+    interface VM { radius: number }
+    expect((wrapper.vm as unknown as VM).radius).toBe(12);
+  });
+
+  it("reflects a custom blackColor prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, blackColor: "#ff0000" },
+    });
+    interface VM { blackColor: string }
+    expect((wrapper.vm as unknown as VM).blackColor).toBe("#ff0000");
+  });
+
+  it("reflects a custom whiteColor prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, whiteColor: "#ffffff" },
+    });
+    interface VM { whiteColor: string }
+    expect((wrapper.vm as unknown as VM).whiteColor).toBe("#ffffff");
+  });
+
+  it("reflects a custom size prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, size: "128px" },
+    });
+    interface VM { size: string }
+    expect((wrapper.vm as unknown as VM).size).toBe("128px");
+  });
+
+  it("reflects a custom variant prop", async () => {
+    const variant: QrCodeVariant = { inner: "circle", marker: "rounded", pixel: "dots" };
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, variant },
+    });
+    interface VM { variant: QrCodeVariant }
+    expect((wrapper.vm as unknown as VM).variant).toEqual(variant);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("retains display-qr-code class alongside styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: "extra" },
+    });
+    expect(wrapper.classes()).toContain("display-qr-code");
+    expect(wrapper.classes()).toContain("extra");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/02.molecules/qr-code/CaptureQrCode.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="capture-qr-stream" :class="[elementClasses]">
+    <div v-if="!state.error">
+      <QrcodeStream v-if="state.cameraOn" ref="qrcodeStreamRef" @error="onError" @detect="onDetect" />
+      <div v-else class="camera-stopped">
+        <p>Camera stopped</p>
+      </div>
+      <div v-if="result?.length" class="scanned-results">
+        <ul>
+          <li v-for="(r, i) in result" :key="i">
+            <span>{{ r }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-else class="camera-error">
+      <p>{{ state.errorMsg }}</p>
+      <button @click="resetCamera">Reset camera</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DetectedBarcode } from "nuxt-qrcode";
+
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
+
+const qrcodeStreamRef = ref();
+const result = ref<string[]>();
+const state = reactive({
+  errorMsg: "",
+  error: false,
+  cameraOn: true,
+});
+
+onMounted(() => {
+  state.cameraOn = true;
+  state.error = false;
+  state.errorMsg = "";
+  result.value = [];
+
+  const handleVisibilityChange = () => {
+    if (document.hidden) {
+      state.cameraOn = false;
+      stopAllMediaStreams();
+    }
+  };
+
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+
+  onBeforeUnmount(() => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  });
+});
+
+function onDetect(detectedCodes: DetectedBarcode[]) {
+  result.value = detectedCodes.map((code) => code.rawValue);
+}
+
+function onError(err: Error) {
+  state.error = true;
+  state.errorMsg = `[${err.name}]: ${err.message}`;
+}
+
+function resetCamera() {
+  state.error = false;
+  state.cameraOn = true;
+}
+
+function stopAllMediaStreams() {
+  if (qrcodeStreamRef.value) {
+    try {
+      const videoElement = qrcodeStreamRef.value.$el?.querySelector("video");
+      if (videoElement && videoElement.srcObject) {
+        const stream = videoElement.srcObject as MediaStream;
+        stream.getTracks().forEach((track) => track.stop());
+        videoElement.srcObject = null;
+      }
+    } catch (error) {
+      console.warn("Error stopping camera stream:", error);
+    }
+  }
+
+  try {
+    document.querySelectorAll("video").forEach((video) => {
+      if (video.srcObject) {
+        const stream = video.srcObject as MediaStream;
+        stream.getTracks().forEach((track) => track.stop());
+        video.srcObject = null;
+      }
+    });
+  } catch (error) {
+    console.warn("Error in global video cleanup:", error);
+  }
+}
+
+watch(
+  () => state.cameraOn,
+  (newValue) => {
+    if (!newValue) {
+      nextTick(() => stopAllMediaStreams());
+    }
+  }
+);
+
+onBeforeUnmount(() => {
+  state.cameraOn = false;
+  stopAllMediaStreams();
+});
+
+onDeactivated(() => {
+  state.cameraOn = false;
+  stopAllMediaStreams();
+});
+
+onActivated(() => {
+  state.cameraOn = true;
+  state.error = false;
+  state.errorMsg = "";
+});
+
+onBeforeRouteLeave(() => {
+  state.cameraOn = false;
+  stopAllMediaStreams();
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .capture-qr-stream {
+    aspect-ratio: 1 / 1;
+  }
+}
+</style>

package/app/components/{qr-code → 02.molecules/qr-code}/DecodeQrCode.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="decode-qr-code" :class="[elementClasses]">
-    <h2>Upload QR Code</h2>
     <QrcodeCapture class="qr-code-capture" @detect="onDetect" />
-
-    <h2>Drop QR Code</h2>
     <QrcodeDropZone class="qr-code-dropzone" @detect="onDetect" @dragover="onDropping" />
-
-    <div v-if="isDropping">
-      <h5>Scanned QRCodes (Dropped): {{ isDropping ? "Dropping..." : "" }}</h5>
-    </div>
-
-    <div class="pt-4">
-      <h5>Scanned QRCodes:</h5>
-      <ul v-if="result" class="list-disc pl-4">
+    <div v-if="result?.length" class="scanned-results">
+      <ul>
         <li v-for="(r, i) in result" :key="i">
-          <span class="text-wrap wrap-anywhere">
-            {{ r }}
-          </span>
+          <span>{{ r }}</span>
         </li>
       </ul>
     </div>
@@ -26,12 +15,13 @@
 <script setup lang="ts">
 import type { DetectedBarcode } from "nuxt-qrcode"
 
-const props = defineProps({
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
 
 const result = ref<string[]>()
 const isDropping = ref(false)
@@ -41,21 +31,7 @@ function onDropping(dropping: boolean) {
 }
 
 function onDetect(detectedCodes: DetectedBarcode[]) {
-  result.value = detectedCodes.map((code) => {
-    // toast.add({
-    //   title: 'Detected',
-    //   description: `Value: ${code.rawValue}`,
-    //   actions: [
-    //     {
-    //       label: 'Copy',
-    //       onClick: () => {
-    //         navigator.clipboard.writeText(code.rawValue)
-    //       },
-    //     },
-    //   ],
-    // })
-    return code.rawValue
-  })
+  result.value = detectedCodes.map((code) => code.rawValue)
 }
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)

package/app/components/02.molecules/qr-code/stories/QrCode.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import CaptureQrCodeComponent from "../CaptureQrCode.vue";
+import DecodeQrCodeComponent from "../DecodeQrCode.vue";
+
+// ===== CAPTURE QR CODE =====
+
+const CaptureQrCodeMeta: Meta<typeof CaptureQrCodeComponent> = {
+  title: "Molecules/QR Code/CaptureQrCode",
+  component: CaptureQrCodeComponent,
+  argTypes: {
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Interactive QR code scanner using device camera. Requires camera permissions to function properly. Features automatic detection, error handling, and camera management.",
+      },
+    },
+  },
+};
+
+const CaptureTemplate: StoryFn<typeof CaptureQrCodeComponent> = (args) => ({
+  components: { CaptureQrCodeComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
+      <div style="background: #f8fafc; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
+        <h3 style="margin: 0 0 10px 0; color: #374151;">Live Camera QR Scanner</h3>
+        <p style="margin: 0 0 10px 0; color: #6b7280; font-size: 14px;">
+          This component uses your device camera to scan QR codes in real-time.
+          Make sure to allow camera access when prompted.
+        </p>
+        <div style="background: #fff3cd; padding: 12px; border-radius: 4px; border: 1px solid #ffeaa7;">
+          <p style="margin: 0; color: #856404; font-size: 12px;">
+            <strong>Features:</strong> Automatic detection, multiple code scanning, camera management, error recovery
+          </p>
+        </div>
+      </div>
+      <CaptureQrCodeComponent :style-class-passthrough="args.styleClassPassthrough" />
+    </div>
+  `,
+});
+
+export const CaptureDefault = CaptureTemplate.bind({});
+export const CaptureDefaultMeta = CaptureQrCodeMeta;
+
+// ===== DECODE QR CODE =====
+
+const DecodeQrCodeMeta: Meta<typeof DecodeQrCodeComponent> = {
+  title: "Molecules/QR Code/DecodeQrCode",
+  component: DecodeQrCodeComponent,
+  argTypes: {
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Upload or drag-and-drop QR code images to decode their content. Supports various image formats including PNG, JPEG, WEBP, and more.",
+      },
+    },
+  },
+};
+
+const DecodeTemplate: StoryFn<typeof DecodeQrCodeComponent> = (args) => ({
+  components: { DecodeQrCodeComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
+      <div style="background: #f8fafc; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
+        <h3 style="margin: 0 0 10px 0; color: #374151;">QR Image Decoder</h3>
+        <p style="margin: 0 0 10px 0; color: #6b7280; font-size: 14px;">
+          Upload or drag QR code images to extract their content.
+          Supports PNG, JPEG, WEBP, and other common image formats.
+        </p>
+        <div style="background: #d1ecf1; padding: 12px; border-radius: 4px; border: 1px solid #bee5eb;">
+          <p style="margin: 0; color: #0c5460; font-size: 12px;">
+            <strong>Supported formats:</strong> PNG, JPEG, WEBP, BMP, GIF • <strong>Methods:</strong> File upload, drag & drop
+          </p>
+        </div>
+      </div>
+      <DecodeQrCodeComponent :style-class-passthrough="args.styleClassPassthrough" />
+    </div>
+  `,
+});
+
+export const DecodeDefault = DecodeTemplate.bind({});
+export const DecodeDefaultMeta = DecodeQrCodeMeta;
+
+export default CaptureQrCodeMeta;

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

@@ -0,0 +1,212 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import CaptureQrCode from "../CaptureQrCode.vue";
+
+interface CaptureVM {
+  state: { error: boolean; errorMsg: string; cameraOn: boolean };
+  result: string[] | undefined;
+  onDetect: (codes: { rawValue: string }[]) => void;
+  onError: (err: Error) => void;
+  resetCamera: () => void;
+}
+
+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 any);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as a div", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("always has the capture-qr-stream class", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.classes()).toContain("capture-qr-stream");
+  });
+
+  // ─── Initial state ────────────────────────────────────────────────────────
+
+  it("has camera on by default", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    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);
+    expect(wrapper.find(".camera-stopped").exists()).toBe(false);
+  });
+
+  it("does not show scanned results initially", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.find(".scanned-results").exists()).toBe(false);
+  });
+
+  it("does not show the error state initially", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.find(".camera-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 vm = wrapper.vm as unknown as CaptureVM;
+    vm.state.cameraOn = false;
+    await nextTick();
+    expect(vm.state.cameraOn).toBe(false);
+    expect(wrapper.find(".camera-stopped").exists()).toBe(true);
+  });
+
+  // ─── Error state ──────────────────────────────────────────────────────────
+
+  it("shows camera-error when onError is called", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("Permission denied"));
+    await nextTick();
+    expect(wrapper.find(".camera-error").exists()).toBe(true);
+  });
+
+  it("shows the error message in the error state", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("Permission denied"));
+    await nextTick();
+    expect(wrapper.find(".camera-error p").text()).toContain("Permission denied");
+  });
+
+  it("sets state.error when onError is called, hiding the stream", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    expect(vm.state.error).toBe(true);
+    expect(wrapper.find(".camera-error").exists()).toBe(true);
+  });
+
+  it("shows a reset button in the error state", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    expect(wrapper.find(".camera-error button").exists()).toBe(true);
+  });
+
+  // ─── Reset camera ─────────────────────────────────────────────────────────
+
+  it("clears the error state when resetCamera is called", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    vm.resetCamera();
+    await nextTick();
+    expect(wrapper.find(".camera-error").exists()).toBe(false);
+    expect(vm.state.cameraOn).toBe(true);
+  });
+
+  it("clears the error state when the reset button is clicked", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onError(new Error("test"));
+    await nextTick();
+    await wrapper.find(".camera-error button").trigger("click");
+    expect(wrapper.find(".camera-error").exists()).toBe(false);
+  });
+
+  // ─── Detect ───────────────────────────────────────────────────────────────
+
+  it("shows scanned results after onDetect is called", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onDetect([{ rawValue: "https://example.com" }]);
+    await nextTick();
+    expect(wrapper.find(".scanned-results").exists()).toBe(true);
+  });
+
+  it("shows the detected value in the results list", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onDetect([{ rawValue: "https://example.com" }]);
+    await nextTick();
+    expect(wrapper.find(".scanned-results").text()).toContain("https://example.com");
+  });
+
+  it("shows all detected values when multiple codes are scanned", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onDetect([{ rawValue: "https://one.com" }, { rawValue: "https://two.com" }]);
+    await nextTick();
+    const items = wrapper.findAll(".scanned-results li");
+    expect(items).toHaveLength(2);
+    expect(items[0]!.text()).toBe("https://one.com");
+    expect(items[1]!.text()).toBe("https://two.com");
+  });
+
+  it("replaces results on subsequent scans", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    const vm = wrapper.vm as unknown as CaptureVM;
+    vm.onDetect([{ rawValue: "first" }]);
+    await nextTick();
+    vm.onDetect([{ rawValue: "second" }]);
+    await nextTick();
+    const items = wrapper.findAll(".scanned-results li");
+    expect(items).toHaveLength(1);
+    expect(items[0]!.text()).toBe("second");
+  });
+
+  // ─── Visibility change ────────────────────────────────────────────────────
+
+  it("stops the camera when the page becomes hidden", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    Object.defineProperty(document, "hidden", { get: () => true, configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    await nextTick();
+    expect(wrapper.find("qrcodestream").exists()).toBe(false);
+    Object.defineProperty(document, "hidden", { get: () => false, configurable: true });
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, {
+      props: { styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("retains capture-qr-stream class alongside styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, {
+      props: { styleClassPassthrough: "extra" },
+    });
+    expect(wrapper.classes()).toContain("capture-qr-stream");
+    expect(wrapper.classes()).toContain("extra");
+  });
+});