@lullabot/playwright-testing 0.1.0 → 1.0.1

package/src/images.test.ts

@@ -1,6 +1,11 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
-import { decodeVisibleImages, settleImage, waitForImages, waitForImagesToDecode } from './images'
+import {
+  decodeVisibleImages,
+  settleImage,
+  waitForImages,
+  waitForImagesToDecode,
+} from "./images";
 
 /**
  * A stand-in for the parts of HTMLImageElement decodeVisibleImages() touches.
@@ -11,195 +16,219 @@ import { decodeVisibleImages, settleImage, waitForImages, waitForImagesToDecode
  * Stage File Proxy URL does once its on-demand fetch finishes.
  */
 interface FakeImageOptions {
-  src?: string
-  currentSrc?: string
-  width?: number
-  height?: number
-  rect?: { width: number, height: number }
-  style?: { visibility?: string, display?: string }
+  src?: string;
+  currentSrc?: string;
+  width?: number;
+  height?: number;
+  rect?: { width: number; height: number };
+  style?: { visibility?: string; display?: string };
   /** 'loaded', 'loading' (never completes on its own), or 'broken'. */
-  state?: 'loaded' | 'loading' | 'broken'
+  state?: "loaded" | "loading" | "broken";
   /** Whether a re-request makes a broken image decode. */
-  recoversOnReload?: boolean
+  recoversOnReload?: boolean;
   /** <source> elements of an enclosing <picture>, if any. */
-  sources?: string[]
+  sources?: string[];
 }
 
 function makeImage(options: FakeImageOptions = {}) {
-  const state = options.state ?? 'loaded'
-  const sources = options.sources
-  let src = options.src ?? 'https://example.com/image.jpg'
-  let broken = state === 'broken'
+  const state = options.state ?? "loaded";
+  const sources = options.sources;
+  let src = options.src ?? "https://example.com/image.jpg";
+  let broken = state === "broken";
 
   const img: any = {
     width: options.width ?? 100,
     height: options.height ?? 100,
-    complete: state !== 'loading',
-    naturalWidth: state === 'loaded' ? 100 : 0,
-    currentSrc: options.currentSrc ?? '',
+    complete: state !== "loading",
+    naturalWidth: state === "loaded" ? 100 : 0,
+    currentSrc: options.currentSrc ?? "",
     removedAttributes: [] as string[],
     picture: sources
       ? {
-        sources: sources.slice(),
-        querySelectorAll: (_selector: string) =>
-          img.picture.sources.map((name: string) => ({
-            remove: () => {
-              img.picture.sources = img.picture.sources.filter((s: string) => s !== name)
-            },
-          })),
-      }
+          sources: sources.slice(),
+          querySelectorAll: () =>
+            img.picture.sources.map((name: string) => ({
+              remove: () => {
+                img.picture.sources = img.picture.sources.filter(
+                  (s: string) => s !== name,
+                );
+              },
+            })),
+        }
       : null,
     getBoundingClientRect: () => options.rect ?? { width: 100, height: 100 },
     style: {
-      visibility: options.style?.visibility ?? 'visible',
-      display: options.style?.display ?? 'block',
+      visibility: options.style?.visibility ?? "visible",
+      display: options.style?.display ?? "block",
     },
-    decode: () => (broken ? Promise.reject(new Error('decode failed')) : Promise.resolve()),
-    closest: (selector: string) => (selector === 'picture' ? img.picture : null),
+    decode: () =>
+      broken ? Promise.reject(new Error("decode failed")) : Promise.resolve(),
+    closest: (selector: string) =>
+      selector === "picture" ? img.picture : null,
     removeAttribute: (name: string) => {
-      img.removedAttributes.push(name)
+      img.removedAttributes.push(name);
     },
     /** Pretend the network finished, for images that start out loading. */
     finishLoading: () => {
-      img.complete = true
-      img.naturalWidth = 100
+      img.complete = true;
+      img.naturalWidth = 100;
     },
-  }
+  };
 
-  Object.defineProperty(img, 'src', {
+  Object.defineProperty(img, "src", {
     get: () => src,
     set: (value: string) => {
-      src = value
+      src = value;
       // A re-request clears whatever the browser had resolved from srcset.
-      img.currentSrc = ''
+      img.currentSrc = "";
       if (options.recoversOnReload) {
-        broken = false
-        img.naturalWidth = 100
+        broken = false;
+        img.naturalWidth = 100;
       }
     },
-  })
+  });
 
-  return img
+  return img;
 }
 
 function stubDom(images: any[]) {
-  vi.stubGlobal('document', { images })
-  vi.stubGlobal('location', { href: 'https://example.com/page' })
-  vi.stubGlobal('getComputedStyle', (element: any) => element.style)
+  vi.stubGlobal("document", { images });
+  vi.stubGlobal("location", { href: "https://example.com/page" });
+  vi.stubGlobal("getComputedStyle", (element: any) => element.style);
 }
 
 // Real timers, so the polling is real: keep the intervals tiny.
-const fast = { pollMs: 1, reloadIntervalMs: 0 }
+const fast = { pollMs: 1, reloadIntervalMs: 0 };
 
-describe('decodeVisibleImages', () => {
+describe("decodeVisibleImages", () => {
   afterEach(() => {
-    vi.unstubAllGlobals()
-  })
+    vi.unstubAllGlobals();
+  });
 
-  it('returns no failures when every visible image has decoded', async () => {
-    stubDom([makeImage(), makeImage()])
+  it("returns no failures when every visible image has decoded", async () => {
+    stubDom([makeImage(), makeImage()]);
 
-    expect(await decodeVisibleImages({ timeoutMs: 1000, ...fast })).toEqual([])
-  })
+    expect(await decodeVisibleImages({ timeoutMs: 1000, ...fast })).toEqual([]);
+  });
 
-  it('treats a dimensionless but decodable image as loaded', async () => {
+  it("treats a dimensionless but decodable image as loaded", async () => {
     // An SVG with no intrinsic size is complete with a naturalWidth of 0, but
     // decode() resolves for it. It must not be re-requested or reported.
-    const svg = makeImage({ src: 'https://example.com/logo.svg', state: 'broken' })
-    svg.decode = () => Promise.resolve()
-    stubDom([svg])
-
-    expect(await decodeVisibleImages({ timeoutMs: 1000, ...fast })).toEqual([])
-    expect(svg.src).toBe('https://example.com/logo.svg')
-  })
-
-  it('ignores 1x1, zero-size, and hidden images even when they are broken', async () => {
+    const svg = makeImage({
+      src: "https://example.com/logo.svg",
+      state: "broken",
+    });
+    svg.decode = () => Promise.resolve();
+    stubDom([svg]);
+
+    expect(await decodeVisibleImages({ timeoutMs: 1000, ...fast })).toEqual([]);
+    expect(svg.src).toBe("https://example.com/logo.svg");
+  });
+
+  it("ignores 1x1, zero-size, and hidden images even when they are broken", async () => {
     stubDom([
-      makeImage({ state: 'broken', width: 1, height: 1 }),
-      makeImage({ state: 'broken', rect: { width: 0, height: 0 } }),
-      makeImage({ state: 'broken', style: { visibility: 'hidden' } }),
-      makeImage({ state: 'broken', style: { display: 'none' } }),
-    ])
+      makeImage({ state: "broken", width: 1, height: 1 }),
+      makeImage({ state: "broken", rect: { width: 0, height: 0 } }),
+      makeImage({ state: "broken", style: { visibility: "hidden" } }),
+      makeImage({ state: "broken", style: { display: "none" } }),
+    ]);
 
-    expect(await decodeVisibleImages({ timeoutMs: 0, ...fast })).toEqual([])
-  })
+    expect(await decodeVisibleImages({ timeoutMs: 0, ...fast })).toEqual([]);
+  });
 
-  it('waits for an image that is still loading', async () => {
-    const loading = makeImage({ state: 'loading' })
-    stubDom([loading])
-    setTimeout(() => loading.finishLoading(), 5)
+  it("waits for an image that is still loading", async () => {
+    const loading = makeImage({ state: "loading" });
+    stubDom([loading]);
+    setTimeout(() => loading.finishLoading(), 5);
 
-    expect(await decodeVisibleImages({ timeoutMs: 2000, ...fast })).toEqual([])
-  })
+    expect(await decodeVisibleImages({ timeoutMs: 2000, ...fast })).toEqual([]);
+  });
 
-  it('re-requests a broken image and reports success once it decodes', async () => {
+  it("re-requests a broken image and reports success once it decodes", async () => {
     const broken = makeImage({
-      src: 'https://example.com/broken.jpg',
-      currentSrc: 'https://example.com/broken-800.jpg',
-      state: 'broken',
+      src: "https://example.com/broken.jpg",
+      currentSrc: "https://example.com/broken-800.jpg",
+      state: "broken",
       recoversOnReload: true,
-      sources: ['source-1', 'source-2'],
-    })
-    stubDom([broken])
-
-    expect(await decodeVisibleImages({
-      timeoutMs: 2000,
-      recoverErroredImages: true,
-      ...fast,
-    })).toEqual([])
+      sources: ["source-1", "source-2"],
+    });
+    stubDom([broken]);
+
+    expect(
+      await decodeVisibleImages({
+        timeoutMs: 2000,
+        recoverErroredImages: true,
+        ...fast,
+      }),
+    ).toEqual([]);
     // The retry reuses the URL already resolved from srcset, cache-busted...
-    expect(broken.src).toMatch(/^https:\/\/example\.com\/broken-800\.jpg\?playwrightReload=\d+$/)
+    expect(broken.src).toMatch(
+      /^https:\/\/example\.com\/broken-800\.jpg\?playwrightReload=\d+$/,
+    );
     // ...with the responsive sources dropped so that exact URL is fetched.
-    expect(broken.removedAttributes).toContain('srcset')
-    expect(broken.picture.sources).toEqual([])
-  })
+    expect(broken.removedAttributes).toContain("srcset");
+    expect(broken.picture.sources).toEqual([]);
+  });
 
-  it('does not rewrite a broken image source unless recovery is opted into', async () => {
+  it("does not rewrite a broken image source unless recovery is opted into", async () => {
     const broken = makeImage({
-      src: 'https://example.com/broken.jpg',
-      state: 'broken',
+      src: "https://example.com/broken.jpg",
+      state: "broken",
       recoversOnReload: true,
-    })
-    stubDom([broken])
-
-    expect(await decodeVisibleImages({timeoutMs: 0, ...fast})).toEqual([
-      'https://example.com/broken.jpg',
-    ])
-    expect(broken.src).toBe('https://example.com/broken.jpg')
-    expect(broken.removedAttributes).toEqual([])
-  })
+    });
+    stubDom([broken]);
 
-  it('leaves data: URLs alone', async () => {
-    const data = makeImage({ src: 'data:image/png;base64,AAAA', state: 'broken' })
-    stubDom([data])
+    expect(await decodeVisibleImages({ timeoutMs: 0, ...fast })).toEqual([
+      "https://example.com/broken.jpg",
+    ]);
+    expect(broken.src).toBe("https://example.com/broken.jpg");
+    expect(broken.removedAttributes).toEqual([]);
+  });
+
+  it("leaves data: URLs alone", async () => {
+    const data = makeImage({
+      src: "data:image/png;base64,AAAA",
+      state: "broken",
+    });
+    stubDom([data]);
 
-    expect(await decodeVisibleImages({ timeoutMs: 0, ...fast })).toEqual(['data:image/png;base64,AAAA'])
-    expect(data.src).toBe('data:image/png;base64,AAAA')
-  })
+    expect(await decodeVisibleImages({ timeoutMs: 0, ...fast })).toEqual([
+      "data:image/png;base64,AAAA",
+    ]);
+    expect(data.src).toBe("data:image/png;base64,AAAA");
+  });
 
-  it('reports the images that never decode instead of returning silently', async () => {
-    const broken = makeImage({ src: 'https://example.com/missing.jpg', state: 'broken' })
-    const loading = makeImage({ src: 'https://example.com/slow.jpg', state: 'loading' })
-    stubDom([makeImage(), broken, loading])
+  it("reports the images that never decode instead of returning silently", async () => {
+    const broken = makeImage({
+      src: "https://example.com/missing.jpg",
+      state: "broken",
+    });
+    const loading = makeImage({
+      src: "https://example.com/slow.jpg",
+      state: "loading",
+    });
+    stubDom([makeImage(), broken, loading]);
 
-    const undecoded = await decodeVisibleImages({ timeoutMs: 20, ...fast })
+    const undecoded = await decodeVisibleImages({ timeoutMs: 20, ...fast });
 
     // The cache-busting parameter the retries added is stripped back off, so
     // the reported URL is the one the page asked for.
     expect(undecoded).toEqual([
-      'https://example.com/missing.jpg',
-      'https://example.com/slow.jpg',
-    ])
-  })
+      "https://example.com/missing.jpg",
+      "https://example.com/slow.jpg",
+    ]);
+  });
 
-  it('checks the images at least once even with an elapsed timeout', async () => {
-    stubDom([makeImage({ src: 'https://example.com/missing.jpg', state: 'broken' })])
+  it("checks the images at least once even with an elapsed timeout", async () => {
+    stubDom([
+      makeImage({ src: "https://example.com/missing.jpg", state: "broken" }),
+    ]);
 
     expect(await decodeVisibleImages({ timeoutMs: 0, ...fast })).toEqual([
-      'https://example.com/missing.jpg',
-    ])
-  })
-})
+      "https://example.com/missing.jpg",
+    ]);
+  });
+});
 
 /**
  * A stand-in for the parts of HTMLImageElement settleImage() touches.
@@ -207,8 +236,10 @@ describe('decodeVisibleImages', () => {
  * settleImage() also runs in the browser, so it is exercised against a fake
  * element whose load and error events can be fired on demand.
  */
-function makeSettleImage(options: { width?: number, height?: number, complete?: boolean } = {}) {
-  const listeners: Record<string, Array<() => void>> = { load: [], error: [] }
+function makeSettleImage(
+  options: { width?: number; height?: number; complete?: boolean } = {},
+) {
+  const listeners: Record<string, Array<() => void>> = { load: [], error: [] };
 
   return {
     width: options.width ?? 100,
@@ -218,138 +249,152 @@ function makeSettleImage(options: { width?: number, height?: number, complete?:
     onload: null,
     onerror: null,
     addEventListener: (type: string, handler: () => void) => {
-      listeners[type].push(handler)
+      listeners[type].push(handler);
     },
     removeEventListener: (type: string, handler: () => void) => {
-      listeners[type] = listeners[type].filter(h => h !== handler)
+      listeners[type] = listeners[type].filter((h) => h !== handler);
     },
-    fire: (type: 'load' | 'error') => {
-      listeners[type].slice().forEach(handler => handler())
+    fire: (type: "load" | "error") => {
+      listeners[type].slice().forEach((handler) => handler());
     },
     listenerCount: () => listeners.load.length + listeners.error.length,
-  }
+  };
 }
 
-describe('settleImage', () => {
-  it('does not wait for an image that has already settled', () => {
-    const settled = makeSettleImage({ complete: true })
+describe("settleImage", () => {
+  it("does not wait for an image that has already settled", () => {
+    const settled = makeSettleImage({ complete: true });
 
     // No promise back means nothing to await.
-    expect(settleImage(settled as any)).toBeUndefined()
-    expect(settled.listenerCount()).toBe(0)
-  })
+    expect(settleImage(settled as any)).toBeUndefined();
+    expect(settled.listenerCount()).toBe(0);
+  });
 
-  it('does not wait for a 1x1 visually-hidden image', () => {
+  it("does not wait for a 1x1 visually-hidden image", () => {
     // Chrome never loads these at desktop widths, so waiting would hang.
-    const hidden = makeSettleImage({ width: 1, height: 1, complete: false })
+    const hidden = makeSettleImage({ width: 1, height: 1, complete: false });
 
-    expect(settleImage(hidden as any)).toBeUndefined()
-    expect(hidden.listenerCount()).toBe(0)
-  })
+    expect(settleImage(hidden as any)).toBeUndefined();
+    expect(hidden.listenerCount()).toBe(0);
+  });
 
-  it('resolves once a loading image loads', async () => {
-    const loading = makeSettleImage()
-    const settled = settleImage(loading as any)
-    loading.fire('load')
+  it("resolves once a loading image loads", async () => {
+    const loading = makeSettleImage();
+    const settled = settleImage(loading as any);
+    loading.fire("load");
 
-    await expect(settled).resolves.toBeUndefined()
-  })
+    await expect(settled).resolves.toBeUndefined();
+  });
 
-  it('resolves once a loading image errors', async () => {
+  it("resolves once a loading image errors", async () => {
     // The regression: an image that 404s or 503s after the wait begins only
     // ever fires `error`. Waiting on `load` alone hung until the test timed
     // out, and never reached the decode retry that could have recovered it.
-    const loading = makeSettleImage()
-    const settled = settleImage(loading as any)
-    loading.fire('error')
+    const loading = makeSettleImage();
+    const settled = settleImage(loading as any);
+    loading.fire("error");
 
-    await expect(settled).resolves.toBeUndefined()
-  })
+    await expect(settled).resolves.toBeUndefined();
+  });
 
-  it('cleans up both listeners once settled, and leaves the page handlers alone', async () => {
-    const loading = makeSettleImage()
-    const settled = settleImage(loading as any)
-    expect(loading.listenerCount()).toBe(2)
+  it("cleans up both listeners once settled, and leaves the page handlers alone", async () => {
+    const loading = makeSettleImage();
+    const settled = settleImage(loading as any);
+    expect(loading.listenerCount()).toBe(2);
 
-    loading.fire('error')
-    await settled
+    loading.fire("error");
+    await settled;
 
-    expect(loading.listenerCount()).toBe(0)
+    expect(loading.listenerCount()).toBe(0);
     // Assigning onload/onerror would have replaced whatever the page installed.
-    expect(loading.onload).toBeNull()
-    expect(loading.onerror).toBeNull()
-  })
-})
+    expect(loading.onload).toBeNull();
+    expect(loading.onerror).toBeNull();
+  });
+});
 
-describe('waitForImagesToDecode', () => {
-  let warn: any
+describe("waitForImagesToDecode", () => {
+  let warn: any;
 
   beforeEach(() => {
-    warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
-  })
+    warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
 
   afterEach(() => {
-    warn.mockRestore()
-  })
+    warn.mockRestore();
+  });
 
   function makePage(undecoded: string[]) {
     return {
       evaluate: vi.fn().mockResolvedValue(undecoded),
-    } as any
+    } as any;
   }
 
-  it('runs the decode poll in the page with the requested timeout', async () => {
-    const page = makePage([])
+  it("runs the decode poll in the page with the requested timeout", async () => {
+    const page = makePage([]);
 
-    expect(await waitForImagesToDecode(page, 5000)).toEqual([])
+    expect(await waitForImagesToDecode(page, 5000)).toEqual([]);
     // The browser-side function is handed to evaluate() by reference so
     // Playwright serializes it: it must not be wrapped in a closure over
     // anything in this module.
     expect(page.evaluate).toHaveBeenCalledWith(decodeVisibleImages, {
       timeoutMs: 5000,
       recoverErroredImages: false,
-    })
-    expect(warn).not.toHaveBeenCalled()
-  })
+    });
+    expect(warn).not.toHaveBeenCalled();
+  });
 
-  it('defaults to a 15 second timeout', async () => {
-    const page = makePage([])
+  it("defaults to a 15 second timeout", async () => {
+    const page = makePage([]);
 
-    await waitForImagesToDecode(page)
+    await waitForImagesToDecode(page);
 
     expect(page.evaluate).toHaveBeenCalledWith(decodeVisibleImages, {
       timeoutMs: 15000,
       recoverErroredImages: false,
-    })
-  })
-
-  it('warns about, and returns, the images that never decoded', async () => {
-    const page = makePage(['https://example.com/a.jpg', 'https://example.com/b.jpg'])
+    });
+  });
 
-    const undecoded = await waitForImagesToDecode(page, 1000)
+  it("warns about, and returns, the images that never decoded", async () => {
+    const page = makePage([
+      "https://example.com/a.jpg",
+      "https://example.com/b.jpg",
+    ]);
 
-    expect(undecoded).toEqual(['https://example.com/a.jpg', 'https://example.com/b.jpg'])
-    expect(warn).toHaveBeenCalledTimes(1)
-    expect(warn.mock.calls[0][0]).toContain('2 image(s) did not finish loading within 1000ms')
-    expect(warn.mock.calls[0][0]).toContain('https://example.com/a.jpg, https://example.com/b.jpg')
-  })
-})
+    const undecoded = await waitForImagesToDecode(page, 1000);
 
-describe('waitForImages', () => {
-  it('restores the viewport and runs the adapter hook when decoding fails', async () => {
-    const failure = new Error('decode failed')
-    const afterScroll = vi.fn().mockResolvedValue(undefined)
+    expect(undecoded).toEqual([
+      "https://example.com/a.jpg",
+      "https://example.com/b.jpg",
+    ]);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0][0]).toContain(
+      "2 image(s) did not finish loading within 1000ms",
+    );
+    expect(warn.mock.calls[0][0]).toContain(
+      "https://example.com/a.jpg, https://example.com/b.jpg",
+    );
+  });
+});
+
+describe("waitForImages", () => {
+  it("restores the viewport and runs the adapter hook when decoding fails", async () => {
+    const failure = new Error("decode failed");
+    const afterScroll = vi.fn().mockResolvedValue(undefined);
     const page = {
-      locator: vi.fn().mockReturnValue({all: vi.fn().mockResolvedValue([])}),
+      locator: vi.fn().mockReturnValue({ all: vi.fn().mockResolvedValue([]) }),
       evaluate: vi.fn((callback: unknown) =>
-        callback === decodeVisibleImages ? Promise.reject(failure) : Promise.resolve(undefined)
+        callback === decodeVisibleImages
+          ? Promise.reject(failure)
+          : Promise.resolve(undefined),
       ),
       waitForFunction: vi.fn().mockResolvedValue(undefined),
-    } as any
+    } as any;
 
-    await expect(waitForImages(page, 'img', {afterScroll})).rejects.toBe(failure)
+    await expect(waitForImages(page, "img", { afterScroll })).rejects.toBe(
+      failure,
+    );
 
-    expect(page.waitForFunction).toHaveBeenCalledOnce()
-    expect(afterScroll).toHaveBeenCalledWith(page)
-  })
-})
+    expect(page.waitForFunction).toHaveBeenCalledOnce();
+    expect(afterScroll).toHaveBeenCalledWith(page);
+  });
+});