srcdev-nuxt-components 9.6.11 → 9.6.13

package/app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts

@@ -1,29 +1,39 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import BannerVideo from "../BannerVideo.vue";
 
+type Wrapper = Awaited<ReturnType<typeof mountSuspended>>;
+
 const defaultProps = {
   src: "/images/banners/video/lake-banner.mp4",
   poster: "/images/banners/video/lake-banner.jpg",
 };
 
 describe("BannerVideo", () => {
+  let wrapper: Wrapper | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = undefined;
+    vi.restoreAllMocks();
+  });
+
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure (default props)", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (all props set)", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: {
         ...defaultProps,
         tag: "header",
@@ -41,79 +51,80 @@ describe("BannerVideo", () => {
   // ─── Root element ────────────────────────────────────────────────────────
 
   it("renders a <div> as the root element by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("renders the specified tag as root", async () => {
     for (const tag of ["div", "header", "main", "article"] as const) {
-      const wrapper = await mountSuspended(BannerVideo, {
+      wrapper = await mountSuspended(BannerVideo, {
         props: { ...defaultProps, tag },
       });
       expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+      wrapper.unmount();
     }
   });
 
   it("always has the banner-video class", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.classes()).toContain("banner-video");
   });
 
   // ─── Video element ───────────────────────────────────────────────────────
 
   it("renders a video element", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("video").exists()).toBe(true);
   });
 
-  it("video has the video class", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    expect(wrapper.find("video").classes()).toContain("video");
+  it("video has the banner-video-media class", async () => {
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").classes()).toContain("banner-video-media");
   });
 
   it("video has autoplay attribute", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("video").attributes()).toHaveProperty("autoplay");
   });
 
   it("video has muted attribute", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("video").attributes()).toHaveProperty("muted");
   });
 
   it("video has loop attribute", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("video").attributes()).toHaveProperty("loop");
   });
 
   it("video has playsinline attribute", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("video").attributes()).toHaveProperty("playsinline");
   });
 
   it("video has the poster attribute set to the poster prop", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("video").attributes("poster")).toBe(defaultProps.poster);
   });
 
   it("video element has preload=auto", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("video").attributes("preload")).toBe("auto");
   });
 
   it("source element has the correct src", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("source").attributes("src")).toBe(defaultProps.src);
   });
 
   it("source element has type video/mp4", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("source").attributes("type")).toBe("video/mp4");
   });
 
   it("calls play() when loadeddata fires", async () => {
     const play = vi.fn().mockResolvedValue(undefined);
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     (wrapper.find("video").element as HTMLVideoElement).play = play;
     await wrapper.find("video").trigger("loadeddata");
     expect(play).toHaveBeenCalled();
@@ -121,7 +132,7 @@ describe("BannerVideo", () => {
 
   it("calls play() when canplay fires", async () => {
     const play = vi.fn().mockResolvedValue(undefined);
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     (wrapper.find("video").element as HTMLVideoElement).play = play;
     await wrapper.find("video").trigger("canplay");
     expect(play).toHaveBeenCalled();
@@ -130,90 +141,111 @@ describe("BannerVideo", () => {
   // ─── Pause/play toggle (WCAG 2.2.2) ─────────────────────────────────────
 
   it("renders a pause/play toggle button", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    expect(wrapper.find(".banner-video__toggle").exists()).toBe(true);
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find(".banner-video-toggle").exists()).toBe(true);
   });
 
-  it("toggle defaults to a 'Pause background video' label once playback starts", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+  it("toggle label reads 'Pause background video' once playback starts", async () => {
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     await wrapper.find("video").trigger("play");
-    expect(wrapper.find(".banner-video__toggle").attributes("aria-label")).toBe("Pause background video");
+    expect(wrapper.find(".banner-video-toggle").find(".input-button-text").text()).toBe("Pause background video");
   });
 
   it("toggle reads 'Play background video' before playback has started", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    expect(wrapper.find(".banner-video__toggle").attributes("aria-label")).toBe("Play background video");
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find(".banner-video-toggle").find(".input-button-text").text()).toBe("Play background video");
   });
 
   it("clicking the toggle calls pause() while playing", async () => {
     const pause = vi.fn();
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const videoElement = wrapper.find("video").element as HTMLVideoElement;
     videoElement.pause = pause;
     Object.defineProperty(videoElement, "paused", { value: false, configurable: true });
-    await wrapper.find(".banner-video__toggle").trigger("click");
+    await wrapper.find(".banner-video-toggle").trigger("click");
     expect(pause).toHaveBeenCalled();
   });
 
   it("clicking the toggle calls play() while paused", async () => {
     const play = vi.fn().mockResolvedValue(undefined);
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const videoElement = wrapper.find("video").element as HTMLVideoElement;
     videoElement.play = play;
     Object.defineProperty(videoElement, "paused", { value: true, configurable: true });
-    await wrapper.find(".banner-video__toggle").trigger("click");
+    await wrapper.find(".banner-video-toggle").trigger("click");
     expect(play).toHaveBeenCalled();
   });
 
-  it("updates aria-label to 'Play background video' after the video pauses", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+  it("updates the toggle label to 'Play background video' after the video pauses", async () => {
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     await wrapper.find("video").trigger("play");
     await wrapper.find("video").trigger("pause");
-    expect(wrapper.find(".banner-video__toggle").attributes("aria-label")).toBe("Play background video");
+    expect(wrapper.find(".banner-video-toggle").find(".input-button-text").text()).toBe("Play background video");
+  });
+
+  it("renders the toggle as an icon-only InputButton with a visually hidden label", async () => {
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const toggle = wrapper.find(".banner-video-toggle");
+    expect(toggle.classes()).toContain("input-button");
+    expect(toggle.attributes("type")).toBe("button");
+    expect(toggle.attributes("data-variant")).toBe("inline");
+    expect(toggle.attributes()).toHaveProperty("data-icon-only");
+    expect(toggle.find(".input-button-text").classes()).toContain("sr-only");
+    expect(toggle.attributes("aria-label")).toBeUndefined();
+  });
+
+  it("uses custom playLabel and pauseLabel", async () => {
+    wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, playLabel: "Video abspielen", pauseLabel: "Video anhalten" },
+    });
+    const label = () => wrapper!.find(".banner-video-toggle .input-button-text").text();
+    expect(label()).toBe("Video abspielen");
+    await wrapper.find("video").trigger("play");
+    expect(label()).toBe("Video anhalten");
   });
 
   // ─── Fallback image ──────────────────────────────────────────────────────
 
   it("renders a NuxtImg fallback element", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("img[data-nuxt-img]").exists()).toBe(true);
   });
 
-  it("fallback image has the fallback class", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    expect(wrapper.find("img[data-nuxt-img]").classes()).toContain("fallback");
+  it("fallback image has the banner-video-fallback class", async () => {
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").classes()).toContain("banner-video-fallback");
   });
 
   it("fallback image src contains the poster filename", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const src = wrapper.find("img[data-nuxt-img]").attributes("src") ?? "";
     expect(src).toContain("lake-banner.jpg");
   });
 
   it("fallback image alt defaults to empty string", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("");
   });
 
   it("fallback image alt reflects the alt prop", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, alt: "A serene lake" },
     });
     expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("A serene lake");
   });
 
   it("fallback image width defaults to 1920", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("img[data-nuxt-img]").attributes("width")).toBe("1920");
   });
 
   it("fallback image height defaults to 1080", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("img[data-nuxt-img]").attributes("height")).toBe("1080");
   });
 
   it("fallback image uses custom imgWidth and imgHeight when provided", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, imgWidth: 1280, imgHeight: 720 },
     });
     const img = wrapper.find("img[data-nuxt-img]");
@@ -222,24 +254,24 @@ describe("BannerVideo", () => {
   });
 
   it("fallback image has loading=eager", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("eager");
   });
 
   it("fallback image has decoding=async", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.find("img[data-nuxt-img]").attributes("decoding")).toBe("async");
   });
 
   // ─── depth / data-depth ──────────────────────────────────────────────────
 
   it("sets data-depth to md by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     expect(wrapper.attributes("data-depth")).toBe("md");
   });
 
   it.each(["xs", "sm", "md", "lg", "xl"] as const)("sets data-depth to %s when depth prop is %s", async (depth) => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, depth },
     });
     expect(wrapper.attributes("data-depth")).toBe(depth);
@@ -248,27 +280,42 @@ describe("BannerVideo", () => {
   // ─── CSS custom properties ───────────────────────────────────────────────
 
   it("sets --_aspect-ratio to 21/9 by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const style = (wrapper.element as HTMLElement).style;
     expect(style.getPropertyValue("--_aspect-ratio")).toBe("21/9");
   });
 
   it("reflects aspectRatio prop in --_aspect-ratio", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, aspectRatio: "16/9" },
     });
     const style = (wrapper.element as HTMLElement).style;
     expect(style.getPropertyValue("--_aspect-ratio")).toBe("16/9");
   });
 
+  it.each(["4/3", "1", "1.5", " 16 / 9 ", "2.35/1"])("accepts a valid aspectRatio %j", async (aspectRatio) => {
+    wrapper = await mountSuspended(BannerVideo, { props: { ...defaultProps, aspectRatio } });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_aspect-ratio")).toBe(aspectRatio.trim());
+  });
+
+  it.each(["", "abc", "0", "0/9", "16/0", "-16/9", "16/9/4", "16:9"])(
+    "falls back to 21/9 for an invalid aspectRatio %j",
+    async (aspectRatio) => {
+      wrapper = await mountSuspended(BannerVideo, { props: { ...defaultProps, aspectRatio } });
+      const style = (wrapper.element as HTMLElement).style;
+      expect(style.getPropertyValue("--_aspect-ratio")).toBe("21/9");
+    }
+  );
+
   it("sets object-fit to cover on the video element by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const style = (wrapper.find("video").element as HTMLElement).style;
     expect(style.objectFit).toBe("cover");
   });
 
   it("reflects objectFit prop on the video element", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, objectFit: "contain" },
     });
     const style = (wrapper.find("video").element as HTMLElement).style;
@@ -276,13 +323,13 @@ describe("BannerVideo", () => {
   });
 
   it("sets object-fit to cover on the fallback image by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
     expect(style.objectFit).toBe("cover");
   });
 
   it("reflects objectFit prop on the fallback image", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, objectFit: "contain" },
     });
     const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
@@ -290,13 +337,13 @@ describe("BannerVideo", () => {
   });
 
   it("video element does not have object-position style", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const style = (wrapper.find("video").element as HTMLElement).style;
     expect(style.objectPosition).toBe("");
   });
 
   it("sets --_align-self to center by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const style = (wrapper.element as HTMLElement).style;
     expect(style.getPropertyValue("--_align-self")).toBe("center");
   });
@@ -306,15 +353,16 @@ describe("BannerVideo", () => {
       ["start", "start"],
       ["end", "end"],
     ] as const) {
-      const wrapper = await mountSuspended(BannerVideo, {
+      wrapper = await mountSuspended(BannerVideo, {
         props: { ...defaultProps, verticalPosition: prop },
       });
       expect((wrapper.element as HTMLElement).style.getPropertyValue("--_align-self")).toBe(expected);
+      wrapper.unmount();
     }
   });
 
   it("sets --_justify-self to center by default", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const style = (wrapper.element as HTMLElement).style;
     expect(style.getPropertyValue("--_justify-self")).toBe("center");
   });
@@ -324,21 +372,22 @@ describe("BannerVideo", () => {
       ["start", "start"],
       ["end", "end"],
     ] as const) {
-      const wrapper = await mountSuspended(BannerVideo, {
+      wrapper = await mountSuspended(BannerVideo, {
         props: { ...defaultProps, horizontalPosition: prop },
       });
       expect((wrapper.element as HTMLElement).style.getPropertyValue("--_justify-self")).toBe(expected);
+      wrapper.unmount();
     }
   });
 
   it("fallback image object-position defaults to center center", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
     expect(style.objectPosition).toBe("center center");
   });
 
   it("fallback image object-position reflects verticalPosition", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, verticalPosition: "start" },
     });
     const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
@@ -346,7 +395,7 @@ describe("BannerVideo", () => {
   });
 
   it("fallback image object-position reflects horizontalPosition", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, horizontalPosition: "end" },
     });
     const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
@@ -354,7 +403,7 @@ describe("BannerVideo", () => {
   });
 
   it("fallback image object-position reflects both verticalPosition and horizontalPosition", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, verticalPosition: "end", horizontalPosition: "start" },
     });
     const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
@@ -364,14 +413,14 @@ describe("BannerVideo", () => {
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string to the root", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, styleClassPassthrough: "full-bleed" },
     });
     expect(wrapper.classes()).toContain("full-bleed");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, styleClassPassthrough: ["full-bleed", "mbe-0"] },
     });
     expect(wrapper.classes()).toContain("full-bleed");
@@ -379,14 +428,14 @@ describe("BannerVideo", () => {
   });
 
   it("does not apply styleClassPassthrough to the video element", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, styleClassPassthrough: "full-bleed" },
     });
     expect(wrapper.find("video").classes()).not.toContain("full-bleed");
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, styleClassPassthrough: ["original"] },
     });
     expect(wrapper.classes()).toContain("original");
@@ -398,33 +447,33 @@ describe("BannerVideo", () => {
   // ─── Toggle icon ─────────────────────────────────────────────────────────
 
   it("renders the default play icon before playback starts", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:play");
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find(".banner-video-toggle").html()).toContain("mdi:play");
   });
 
   it("renders the default pause icon once playback starts", async () => {
-    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
     await wrapper.find("video").trigger("play");
-    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:pause");
+    expect(wrapper.find(".banner-video-toggle").html()).toContain("mdi:pause");
   });
 
   it("renders a custom playIcon", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, playIcon: "mdi:play-circle" },
     });
-    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:play-circle");
+    expect(wrapper.find(".banner-video-toggle").html()).toContain("mdi:play-circle");
   });
 
   it("renders a custom pauseIcon", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: { ...defaultProps, pauseIcon: "mdi:pause-circle" },
     });
     await wrapper.find("video").trigger("play");
-    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:pause-circle");
+    expect(wrapper.find(".banner-video-toggle").html()).toContain("mdi:pause-circle");
   });
 
   it("replaces the toggle icon via the toggle-icon slot", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: defaultProps,
       slots: {
         "toggle-icon": '<span class="test-custom-icon">custom</span>',
@@ -434,7 +483,7 @@ describe("BannerVideo", () => {
   });
 
   it("passes isPlaying to the toggle-icon slot", async () => {
-    const wrapper = await mountSuspended(BannerVideo, {
+    wrapper = await mountSuspended(BannerVideo, {
       props: defaultProps,
       slots: {
         "toggle-icon": `<span class="test-is-playing">{{ params.isPlaying }}</span>`,

package/app/components/01.atoms/banner-video/tests/__snapshots__/BannerVideo.spec.ts.snap

@@ -1,13 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BannerVideo > renders correct HTML structure (all props set) 1`] = `
-"<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+"<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="banner-video-media" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"><button type="button" class="banner-video__toggle" aria-label="Play background video"><span class="iconify i-mdi:play" aria-hidden="true"></span></button></header>"
+  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="banner-video-fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"><button type="button" data-testid="input-button" data-theme="default" data-variant="inline" data-icon-only="" class="input-button banner-video-toggle">
+    <!--v-if-->
+    <!--v-if--><span class="input-button-text sr-only">Play background video</span>
+    <!--v-if--><span class="input-button-icon" data-slot="icon-only"><span class="iconify i-mdi:play" aria-hidden="true"></span></span>
+  </button></header>"
 `;
 
 exports[`BannerVideo > renders correct HTML structure (default props) 1`] = `
-"<div class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+"<div class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="banner-video-media" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"><button type="button" class="banner-video__toggle" aria-label="Play background video"><span class="iconify i-mdi:play" aria-hidden="true"></span></button></div>"
+  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="banner-video-fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"><button type="button" data-testid="input-button" data-theme="default" data-variant="inline" data-icon-only="" class="input-button banner-video-toggle">
+    <!--v-if-->
+    <!--v-if--><span class="input-button-text sr-only">Play background video</span>
+    <!--v-if--><span class="input-button-icon" data-slot="icon-only"><span class="iconify i-mdi:play" aria-hidden="true"></span></span>
+  </button></div>"
 `;