@akinon/pz-theme 2.0.127-rc.0 → 2.0.127

package/src/blocks/__tests__/video-block.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import VideoBlock from '../video-block';
 
@@ -41,6 +41,105 @@ const renderBlock = (value: any, properties?: any, styles?: any) =>
     />
   );
 
+/**
+ * Stand the test in a browser whose owner asked for less motion.
+ *
+ * `withViewport` cannot answer this one: it only ever matches a `max-width`
+ * query, which is exactly what keeps every other test in this file from arming
+ * reduced motion by accident.
+ */
+const withReducedMotion = (run: () => void) => {
+  const original = window.matchMedia;
+  window.matchMedia = ((query: string) => ({
+    matches: query.includes('prefers-reduced-motion'),
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false
+  })) as unknown as typeof window.matchMedia;
+  try {
+    run();
+  } finally {
+    window.matchMedia = original;
+  }
+};
+
+/**
+ * A recording stand-in for IntersectionObserver.
+ *
+ * `jest/setup.ts` installs a NoopObserver so nothing crashes on mount, which
+ * also means an observer-driven feature is INERT unless the suite brings its
+ * own. This is the fake `listing-controls.test.tsx` already uses: it keeps the
+ * options it was built with, the elements it was handed and whether it was
+ * disconnected, so a test can ask all three.
+ */
+class MockObserver {
+  static instances: MockObserver[] = [];
+  callback: IntersectionObserverCallback;
+  options: IntersectionObserverInit | undefined;
+  elements: Element[] = [];
+  disconnected = false;
+
+  constructor(
+    callback: IntersectionObserverCallback,
+    options?: IntersectionObserverInit
+  ) {
+    this.callback = callback;
+    this.options = options;
+    MockObserver.instances.push(this);
+  }
+
+  observe(element: Element) {
+    this.elements.push(element);
+  }
+
+  unobserve() {}
+
+  disconnect() {
+    this.disconnected = true;
+  }
+
+  takeRecords() {
+    return [];
+  }
+
+  /** Deliver one entry, the way a real observer does when the page scrolls. */
+  fire(isIntersecting: boolean) {
+    act(() => {
+      this.callback(
+        [{ isIntersecting } as IntersectionObserverEntry],
+        this as unknown as IntersectionObserver
+      );
+    });
+  }
+
+  static get live() {
+    return MockObserver.instances.filter((instance) => !instance.disconnected);
+  }
+}
+
+/**
+ * The boxes the control sits in, named the way the source names them:
+ *
+ *   overlay   inset 0, holds the padding   -> the right edge
+ *     column  flex column                  -> the bottom edge
+ *       rail  position: sticky             -> stays reachable
+ *         button
+ *
+ * The button itself carries none of the placement any more, so a test that
+ * reads `button.style.left` is reading the wrong node.
+ */
+const controlBoxes = (container: HTMLElement) => {
+  const button = container.querySelector('button') as HTMLButtonElement;
+  const rail = button.parentElement as HTMLElement;
+  const column = rail.parentElement as HTMLElement;
+  const overlay = column.parentElement as HTMLElement;
+  return { button, rail, column, overlay };
+};
+
 describe('VideoBlock', () => {
   /**
    * A designer's Corner Radius lands on the block's `[data-block-id]` box, and
@@ -814,18 +913,18 @@ describe('VideoBlock', () => {
       expect(video.pause).toHaveBeenCalledTimes(1);
     });
 
-    it('stacks above a sibling content overlay (z-index 2) so its clicks are not swallowed', () => {
+    it('stacks above a sibling content overlay, so its clicks are not swallowed', () => {
       // A title/CTA content block placed over the video is a full-size
       // `position: absolute; z-index: 1` box (see pz-theme's group content
-      // pattern) — its transparent area still captures pointer events. Without
-      // an explicit, higher z-index the button was visually and functionally
-      // underneath it, unclickable everywhere it overlapped.
+      // pattern) — its transparent area still captures pointer events. The
+      // z-index belongs on the control LAYER now, because that is the box the
+      // shopper's click has to land in before it can reach a button.
       const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
         controls: false,
         customPlayPause: true
       });
-      const button = container.querySelector('button') as HTMLButtonElement;
-      expect(Number(button.style.zIndex)).toBeGreaterThan(1);
+      const { overlay } = controlBoxes(container);
+      expect(Number(overlay.style.zIndex)).toBeGreaterThan(1);
     });
 
     it('matches the design: a 20x20 button, not an oversized icon', () => {
@@ -839,20 +938,40 @@ describe('VideoBlock', () => {
     });
 
     it('draws the pause icon as two 1x8 bars', () => {
+      // One path with the gap cut out of it, not two rects: at 8px the glyph
+      // has to read as a hairline, the way the outlined triangle beside it
+      // does, and a single path is how the reference storefront draws it.
+      // `playWhenVisible: false` is what puts this clip in the playing state
+      // on the first render: it keeps the block out of ambient mode, so the
+      // element still carries the autoplay attribute and the control is seeded
+      // to match it. An ambient clip is honestly stopped until the observer
+      // starts it, and draws the play glyph until then.
       const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
         controls: false,
         customPlayPause: true,
-        autoplay: true // starts in the "playing" state, so the Pause icon renders
+        autoplay: true,
+        playWhenVisible: false
       });
-      const rects = container.querySelectorAll('button svg rect');
-      expect(rects).toHaveLength(2);
-      rects.forEach(rect => {
-        expect(rect.getAttribute('width')).toBe('1');
-        expect(rect.getAttribute('height')).toBe('8');
+      const paths = container.querySelectorAll('button svg path');
+      expect(paths).toHaveLength(1);
+      expect(paths[0].getAttribute('d')).toBe('M1.5 8h-1V0h1zm6 0h-1V0h1z');
+      expect(container.querySelector('button svg')).toHaveAttribute(
+        'viewBox',
+        '0 0 8 8'
+      );
+    });
+
+    it('draws the play icon as an outlined triangle, not a solid wedge', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+        controls: false,
+        customPlayPause: true
       });
+      const paths = container.querySelectorAll('button svg path');
+      expect(paths).toHaveLength(1);
+      expect(paths[0].getAttribute('d')).toBe('M7 4 1 8V0zM2 6.13 5.197 4 2 1.868z');
     });
 
-    it('sits bottom-left, inset from the left edge, on desktop', () => {
+    it('sits in the bottom-right corner, 24px in from both edges, on desktop', () => {
       const { container } = render(
         <VideoBlock
           block={
@@ -867,14 +986,14 @@ describe('VideoBlock', () => {
           currentBreakpoint="desktop"
         />
       );
-      const button = container.querySelector('button') as HTMLButtonElement;
-      expect(button.style.bottom).toBe('0px');
-      expect(button.style.left).toBe('24px');
-      expect(button.style.top).toBe('');
-      expect(button.style.right).toBe('');
+      const { overlay, column, rail } = controlBoxes(container);
+      expect(overlay.style.justifyContent).toBe('flex-end'); // the right edge
+      expect(column.style.justifyContent).toBe('flex-end'); // the bottom edge
+      expect(overlay.style.padding).toBe('24px');
+      expect(rail.style.bottom).toBe('24px');
     });
 
-    it('moves to the top-right on mobile instead of just rescaling the desktop inset', () => {
+    it('keeps that same bottom-right corner on mobile, at a tighter 18px', () => {
       const { container } = render(
         <VideoBlock
           block={
@@ -889,12 +1008,508 @@ describe('VideoBlock', () => {
           currentBreakpoint="mobile"
         />
       );
+      const { overlay, column, rail } = controlBoxes(container);
+      expect(overlay.style.justifyContent).toBe('flex-end');
+      expect(column.style.justifyContent).toBe('flex-end');
+      expect(overlay.style.padding).toBe('18px');
+      expect(rail.style.bottom).toBe('18px');
+    });
+
+    /*
+     * The three names the panel writes rules against. A part the renderer does
+     * not stamp is a whole group of controls that save and do nothing, so the
+     * names are asserted here as well as by the cross-repo parity test — that
+     * one is skipped wherever pz-dynamic-widget is not checked out, which is
+     * every CI run.
+     */
+    describe('a glyph the brand supplied', () => {
+      const MARK =
+        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLz4=';
+
+      it('replaces the built-in one for the state it was uploaded against', () => {
+        const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+          controls: false,
+          customPlayPause: true,
+          playIcon: MARK
+        });
+
+        // The paused clip draws the authored mark, and the built-in triangle
+        // is gone rather than sitting behind it.
+        const masked = container.querySelector('button span') as HTMLElement;
+        expect(masked).toBeInTheDocument();
+        expect(masked.style.maskImage).toContain(MARK);
+        expect(container.querySelector('button svg')).not.toBeInTheDocument();
+      });
+
+      it('is painted by the panel, not by whatever colours the file carries', () => {
+        // A mask filled with currentColor, because the button's colour lives in
+        // generated part CSS the renderer cannot read — baking a colour into
+        // the SVG the way the icon block does would ignore the panel entirely.
+        const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+          controls: false,
+          customPlayPause: true,
+          playIcon: MARK
+        });
+
+        const masked = container.querySelector('button span') as HTMLElement;
+        expect(masked.style.backgroundColor).toBe('currentColor');
+      });
+
+      it('leaves the other states on the marks that ship with the block', () => {
+        // Only Play was uploaded, so Pause is still ours — the two states are
+        // separate fields precisely so they can differ.
+        const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+          controls: false,
+          customPlayPause: true,
+          playWhenVisible: false,
+          autoplay: true,
+          playIcon: MARK
+        });
+
+        expect(container.querySelector('button svg')).toBeInTheDocument();
+        expect(container.querySelector('button span')).not.toBeInTheDocument();
+      });
+
+      it('keeps the built-in mark when the field was left empty', () => {
+        const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+          controls: false,
+          customPlayPause: true,
+          playIcon: ''
+        });
+
+        expect(container.querySelector('button svg')).toBeInTheDocument();
+      });
+    });
+
+    it('names the parts the panel styles: the overlay, the rail and the buttons', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+        controls: false,
+        customPlayPause: true,
+        soundToggle: true
+      });
+
+      expect(container.querySelector('[data-part="controls"]')).toBeInTheDocument();
+      expect(container.querySelector('[data-part="control-rail"]')).toBeInTheDocument();
+      // Both buttons carry the SAME name: they are a matched pair and a brand
+      // restyles them together.
+      expect(container.querySelectorAll('[data-part="control-button"]')).toHaveLength(2);
+    });
+
+    /*
+     * The wrapper's handler is a REACT one — `WithDesignerFeatures` puts
+     * `onClick` on the `[data-block-id]` div — so these two stand the block
+     * inside a React `onClick` rather than adding a native listener to the RTL
+     * container. React attaches its own listener at the root container, so a
+     * native listener there fires whatever the synthetic event does, and the
+     * test would be measuring the harness instead of the block.
+     */
+    const renderInsideClickableWrapper = (isDesigner: boolean) => {
+      const onWrapperClick = jest.fn();
+      const { container } = render(
+        <div onClick={onWrapperClick}>
+          <VideoBlock
+            block={
+              {
+                value: 'https://cdn.example.com/clip.mp4',
+                properties: { controls: false, customPlayPause: true }
+              } as any
+            }
+            placeholderId="p1"
+            sectionId="s1"
+            isDesigner={isDesigner}
+          />
+        </div>
+      );
+      return { onWrapperClick, container };
+    };
+
+    it('keeps the click off the block, so a video with an Action does not navigate on pause', () => {
+      const { onWrapperClick, container } = renderInsideClickableWrapper(false);
+      (container.querySelector('button') as HTMLButtonElement).click();
+      expect(onWrapperClick).not.toHaveBeenCalled();
+    });
+
+    it('lets the click through inside the designer, so the canvas can select the part', () => {
+      // The canvas resolves which part was clicked from one bubble handler on
+      // the block wrapper. Swallowing the event there selected nothing at all —
+      // not the part, not even the block.
+      const { onWrapperClick, container } = renderInsideClickableWrapper(true);
+      (container.querySelector('button') as HTMLButtonElement).click();
+      expect(onWrapperClick).toHaveBeenCalled();
+    });
+
+    it('stays reachable on a portrait clip taller than the window', () => {
+      // At 749px wide a 2:3 clip is 1123px tall — taller than most laptop
+      // viewports — so a control parked at the bottom of the block is off
+      // screen for the whole time the clip is being watched.
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+        controls: false,
+        customPlayPause: true
+      });
+      const { overlay, rail } = controlBoxes(container);
+      expect(rail.style.position).toBe('sticky');
+      expect(rail.style.bottom).toBe(overlay.style.padding);
+    });
+
+    it('lets a click reach whatever sits under the player, except on the button', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4', {
+        controls: false,
+        customPlayPause: true
+      });
+      const { overlay, column, rail, button } = controlBoxes(container);
+      expect(overlay.style.pointerEvents).toBe('none');
+      expect(column.style.pointerEvents).toBe('none');
+      expect(rail.style.pointerEvents).toBe('none');
+      expect(button.style.pointerEvents).toBe('auto');
+    });
+  describe('the sound button beside it', () => {
+    const renderControls = (properties: any) =>
+      render(
+        <VideoBlock
+          block={
+            {
+              value: 'https://cdn.example.com/clip.mp4',
+              properties: {
+                controls: false,
+                customPlayPause: true,
+                muted: true,
+                ...properties
+              }
+            } as any
+          }
+          placeholderId="p1"
+          sectionId="s1"
+          isDesigner={false}
+          currentBreakpoint="desktop"
+        />
+      );
+
+    it('is absent unless the merchant asks for it, because an ambient clip is silent furniture', () => {
+      const { container } = renderControls({});
+      expect(container.querySelectorAll('button')).toHaveLength(1);
+    });
+
+    it('cannot appear on its own, without the play/pause button it rides with', () => {
+      const { container } = renderControls({
+        customPlayPause: false,
+        soundToggle: true
+      });
+      expect(container.querySelectorAll('button')).toHaveLength(0);
+    });
+
+    it('appears beside play/pause when both are turned on', () => {
+      const { container } = renderControls({ soundToggle: true });
+      expect(container.querySelectorAll('button')).toHaveLength(2);
+    });
+
+    it('is the left of the two, so play/pause keeps the corner it always had', () => {
+      const { container } = renderControls({ soundToggle: true });
+      const [first, second] = Array.from(container.querySelectorAll('button'));
+      expect(first).toHaveAttribute('aria-label', 'Unmute video');
+      expect(second).toHaveAttribute('aria-label', 'Play video');
+    });
+
+    it('actually unmutes the clip when the shopper presses it, and says so', () => {
+      const { container } = renderControls({ soundToggle: true });
+      const video = container.querySelector('video') as HTMLVideoElement;
+      const sound = container.querySelectorAll('button')[0] as HTMLButtonElement;
+
+      expect(video.muted).toBe(true);
+      expect(sound).toHaveAttribute('aria-pressed', 'false');
+
+      act(() => {
+        sound.click();
+      });
+
+      expect(video.muted).toBe(false);
+      expect(sound).toHaveAttribute('aria-label', 'Mute video');
+      expect(sound).toHaveAttribute('aria-pressed', 'true');
+    });
+  });
+
+  /**
+   * PLAYING ONLY WHILE THE CLIP IS ON SCREEN.
+   *
+   * An `autoPlay` attribute starts a clip wherever it sits on the page, so a
+   * homepage with three of them decodes three films at once. Everything below
+   * needs the recording observer: the one `jest/setup.ts` installs does
+   * nothing, so without this harness the whole feature is invisible to a test.
+   */
+  describe('a clip that plays by itself', () => {
+    const originalObserver = window.IntersectionObserver;
+    const originalPlay = window.HTMLMediaElement.prototype.play;
+    const originalPause = window.HTMLMediaElement.prototype.pause;
+
+    /**
+     * The property set that makes a clip ambient.
+     *
+     * `controls: false` is not decoration. A player showing the browser's own
+     * control bar is a deliberate watch and the viewport never touches it, so
+     * leaving it out here would describe a block the observer is not supposed
+     * to drive at all.
+     */
+    const ambient = {
+      controls: false,
+      autoplay: true,
+      muted: true,
+      loop: true
+    };
+
+    let play: jest.Mock;
+    let pause: jest.Mock;
+
+    beforeEach(() => {
+      MockObserver.instances = [];
+      (window as unknown as Record<string, unknown>).IntersectionObserver =
+        MockObserver;
+      play = jest.fn(() => Promise.resolve());
+      pause = jest.fn();
+      window.HTMLMediaElement.prototype.play =
+        play as unknown as typeof originalPlay;
+      window.HTMLMediaElement.prototype.pause = pause;
+    });
+
+    afterEach(() => {
+      (window as unknown as Record<string, unknown>).IntersectionObserver =
+        originalObserver;
+      window.HTMLMediaElement.prototype.play = originalPlay;
+      window.HTMLMediaElement.prototype.pause = originalPause;
+    });
+
+    const renderPlayer = (properties: any, isDesigner = false) =>
+      render(
+        <VideoBlock
+          block={
+            { value: 'https://cdn.example.com/clip.mp4', properties } as any
+          }
+          placeholderId="p1"
+          sectionId="s1"
+          isDesigner={isDesigner}
+          currentBreakpoint="desktop"
+        />
+      );
+
+    it('starts as soon as a tenth of it has scrolled into view', () => {
+      const { container } = renderPlayer({ ...ambient });
+      const video = container.querySelector('video') as HTMLVideoElement;
+
+      expect(MockObserver.instances).toHaveLength(1);
+      expect(MockObserver.instances[0].options?.threshold).toBe(0.1);
+      expect(MockObserver.instances[0].elements).toEqual([video]);
+
+      MockObserver.instances[0].fire(true);
+      expect(play).toHaveBeenCalledTimes(1);
+    });
+
+    it('stops again when the shopper scrolls it off the screen', () => {
+      renderPlayer({ ...ambient });
+
+      MockObserver.instances[0].fire(true);
+      MockObserver.instances[0].fire(false);
+
+      expect(pause).toHaveBeenCalledTimes(1);
+    });
+
+    it('picks up where it stopped instead of rewinding to the start', () => {
+      const { container } = renderPlayer({ ...ambient });
+      const video = container.querySelector('video') as HTMLVideoElement;
+
+      // jsdom's `currentTime` cannot be read back after a write, so the
+      // property is swapped for one that records every seek attempt.
+      const seeks: number[] = [];
+      Object.defineProperty(video, 'currentTime', {
+        configurable: true,
+        get: () => 12,
+        set: (value: number) => seeks.push(value)
+      });
+
+      MockObserver.instances[0].fire(true);
+      MockObserver.instances[0].fire(false);
+      MockObserver.instances[0].fire(true);
+
+      expect(seeks).toEqual([]);
+      expect(play).toHaveBeenCalledTimes(2);
+    });
+
+    it('plays again after a hand pause once the shopper scrolls back to it', () => {
+      // Measured on the reference storefront rather than overlooked: pause by
+      // hand, scroll away, scroll back, and the clip is running again. The
+      // viewport is authoritative and the button is an override that lasts
+      // only while the clip is on screen.
+      const { container } = renderPlayer({
+        ...ambient,
+        controls: false,
+        customPlayPause: true
+      });
+      const video = container.querySelector('video') as HTMLVideoElement;
       const button = container.querySelector('button') as HTMLButtonElement;
-      expect(button.style.top).toBe('18px');
-      expect(button.style.right).toBe('18px');
-      expect(button.style.bottom).toBe('');
-      expect(button.style.left).toBe('');
+
+      MockObserver.instances[0].fire(true);
+      expect(play).toHaveBeenCalledTimes(1);
+
+      Object.defineProperty(video, 'paused', {
+        value: false,
+        configurable: true
+      });
+      act(() => {
+        button.click();
+      });
+      expect(pause).toHaveBeenCalledTimes(1);
+
+      MockObserver.instances[0].fire(false);
+      MockObserver.instances[0].fire(true);
+
+      expect(play).toHaveBeenCalledTimes(2);
+    });
+
+    it('stops watching the viewport once the block leaves the page', () => {
+      const { unmount } = renderPlayer({ ...ambient });
+      expect(MockObserver.live).toHaveLength(1);
+
+      unmount();
+
+      expect(MockObserver.live).toHaveLength(0);
+    });
+
+    it('leaves a clip the shopper has to press play on entirely alone', () => {
+      renderPlayer({ muted: true, loop: true });
+      expect(MockObserver.instances).toHaveLength(0);
+    });
+
+    /*
+     * The shape the editor ACTUALLY writes, which is the only shape almost
+     * every published block is in: `getDefaultBlockProperties` stamps
+     * `{ desktop: <default> }` for every property, so a merchant who touched
+     * nothing has `controls: {desktop:true}` and `autoplay: {desktop:false}`.
+     * `autoplay` is read raw and an object is truthy, so the clip LOOKS
+     * ambient to that read — `controls` is the gate that saves it. Written
+     * with plain booleans, this whole describe block would pass while every
+     * published video on the storefront quietly became viewport-driven and
+     * undid shoppers' manual pauses.
+     */
+    it('leaves alone the video every merchant already published, controls and all', () => {
+      renderPlayer({
+        controls: { desktop: true },
+        autoplay: { desktop: false },
+        muted: { desktop: true }
+      });
+      expect(MockObserver.instances).toHaveLength(0);
+    });
+
+    it('drives the ambient clip the editor writes per breakpoint, object shape and all', () => {
+      renderPlayer({
+        controls: { desktop: false },
+        customPlayPause: { desktop: true },
+        autoplay: { desktop: true },
+        muted: { desktop: true }
+      });
+      expect(MockObserver.instances).toHaveLength(1);
+    });
+
+    it('plays from the moment the page loads when the merchant turned Play when visible off', () => {
+      const { container } = renderPlayer({
+        ...ambient,
+        playWhenVisible: false
+      });
+      expect(MockObserver.instances).toHaveLength(0);
+      expect(container.querySelector('video')).toHaveAttribute('autoplay');
+    });
+
+    it('is not driven by the viewport inside the editor canvas', () => {
+      renderPlayer({ ...ambient }, true);
+      expect(MockObserver.instances).toHaveLength(0);
+    });
+
+    describe('a shopper who asked for less motion', () => {
+      it('gets the clip held still, with nothing watching to restart it', () => {
+        withReducedMotion(() => {
+          renderPlayer({ ...ambient });
+          expect(MockObserver.instances).toHaveLength(0);
+          expect(pause).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      it('can still press play, because the file was not left unfetchable', () => {
+        // The element ships `preload="none"` waiting for an observer that is
+        // never armed here, so standing down has to release it too.
+        withReducedMotion(() => {
+          const { container } = renderPlayer({ ...ambient });
+          expect(container.querySelector('video')).toHaveAttribute(
+            'preload',
+            'metadata'
+          );
+        });
+      });
     });
+
+    describe('how much of the file is fetched before anyone asks for it', () => {
+      it('fetches nothing at all until an ambient clip reaches the viewport', () => {
+        const { container } = renderPlayer({ ...ambient });
+        expect(container.querySelector('video')).toHaveAttribute(
+          'preload',
+          'none'
+        );
+      });
+
+      it('ships that same nothing in the server HTML, so the player hydrates', () => {
+        // Server and first client render have to agree: if the attribute
+        // differed the element would be rebuilt rather than adopted, and the
+        // shopper would pay for the swap.
+        const html = renderToStaticMarkup(
+          <VideoBlock
+            block={
+              {
+                value: 'https://cdn.example.com/clip.mp4',
+                properties: { ...ambient }
+              } as any
+            }
+            placeholderId="p1"
+            sectionId="s1"
+            isDesigner={false}
+          />
+        );
+        expect(html).toContain('preload="none"');
+      });
+
+      it('fetches the amount the merchant authored once the clip has been seen', () => {
+        const { container } = renderPlayer({ ...ambient, preload: 'auto' });
+        MockObserver.instances[0].fire(true);
+        expect(container.querySelector('video')).toHaveAttribute(
+          'preload',
+          'auto'
+        );
+      });
+
+      it('fetches that amount straight away when the clip never plays by itself', () => {
+        const { container } = renderPlayer({ muted: true, preload: 'auto' });
+        expect(container.querySelector('video')).toHaveAttribute(
+          'preload',
+          'auto'
+        );
+      });
+
+      it('asks for metadata only when the merchant authored nothing', () => {
+        const { container } = renderPlayer({});
+        expect(container.querySelector('video')).toHaveAttribute(
+          'preload',
+          'metadata'
+        );
+      });
+
+      it('loads normally in a browser that has no IntersectionObserver at all', () => {
+        // Without this the clip would sit on `preload="none"` forever, waiting
+        // for an observer the browser cannot build.
+        delete (window as unknown as Record<string, unknown>)
+          .IntersectionObserver;
+        const { container } = renderPlayer({ ...ambient });
+        expect(container.querySelector('video')).toHaveAttribute(
+          'preload',
+          'metadata'
+        );
+      });
+    });
+  });
+
   });
 });