Track Responsive-Design carousel resize events (#579)

* Track Responsive-Design carousel resize events

Author: issackjohn

resources/benchmark-runner.mjs

@@ -163,6 +163,44 @@ class PageElement {
         this.#node.scrollIntoView(options);
     }
 
+    async observeResizeEvents() {
+        const contentWindow = this.#node.ownerDocument.defaultView;
+        const state = {
+            count: 0,
+            lastWidth: null,
+        };
+        let markReady;
+        // Resolves on the first callback so the initial width can be used as a baseline.
+        const ready = new Promise((resolve) => {
+            markReady = resolve;
+        });
+        const observer = new contentWindow.ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const contentBoxSize = entry.contentBoxSize;
+                const inlineSize = Array.isArray(contentBoxSize) ? contentBoxSize[0]?.inlineSize : contentBoxSize?.inlineSize;
+                const width = inlineSize ?? entry.contentRect.width;
+                // The first callback seeds the baseline width without counting it as a change.
+                if (state.lastWidth === null) {
+                    state.lastWidth = width;
+                    markReady();
+                    continue;
+                }
+                if (width === state.lastWidth)
+                    continue;
+                state.count++;
+                state.lastWidth = width;
+            }
+        });
+        observer.observe(this.#node);
+        await ready;
+        return {
+            stop() {
+                observer.disconnect();
+                return state.count;
+            },
+        };
+    }
+
     dispatchEvent(eventName, options = NATIVE_OPTIONS, eventType = Event) {
         if (eventName === "submit")
             // FIXME FireFox doesn't like `new Event('submit')

suites-experimental/suites.mjs

@@ -3,6 +3,14 @@ import { getTodoText } from "../resources/shared/translations.mjs";
 import { getNumberOfItemsToAdd } from "../resources/shared/todomvc-utils.mjs";
 import { freezeSuites } from "../resources/suites-helper.mjs";
 
+function reportRecipeCarouselResizeEvents(stepName, resizeEvents) {
+    const count = resizeEvents.stop();
+    if (count)
+        console.warn(`${stepName}: recipe-carousel ResizeObserver reported ${count} width change(s).`);
+    else
+        console.warn(`${stepName}: recipe-carousel ResizeObserver reported 0 width changes; expected width changes during iframe resize.`);
+}
+
 export const ExperimentalSuites = freezeSuites([
     {
         name: "TodoMVC-LocalStorage",
@@ -214,6 +222,7 @@ export const ExperimentalSuites = freezeSuites([
             new BenchmarkTestStep("ReduceWidthIn5Steps", async (page) => {
                 const widths = [768, 704, 640, 560, 480];
                 const MATCH_MEDIA_QUERY_BREAKPOINT = 640;
+                const carouselResizeEvents = await page.querySelector(".carousel", ["cooking-app", "main-content", "recipe-carousel"]).observeResizeEvents();
 
                 // The matchMedia query is "(max-width: 640px)"
                 // Starting from a width > 640px, we'll only get 1 event when crossing to <= 640px
@@ -230,6 +239,7 @@ export const ExperimentalSuites = freezeSuites([
                 }
 
                 await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+                reportRecipeCarouselResizeEvents("ReduceWidthIn5Steps", carouselResizeEvents);
             }),
             new BenchmarkTestStep("ScrollToChatAndSendMessages", async (page) => {
                 const cvWorkComplete = new Promise((resolve) => {
@@ -273,6 +283,7 @@ export const ExperimentalSuites = freezeSuites([
             new BenchmarkTestStep("IncreaseWidthIn5Steps", async (page) => {
                 const widths = [560, 640, 704, 768, 800];
                 const MATCH_MEDIA_QUERY_BREAKPOINT = 704;
+                const carouselResizeEvents = await page.querySelector(".carousel", ["cooking-app", "main-content", "recipe-carousel"]).observeResizeEvents();
 
                 // The matchMedia query is "(max-width: 640px)"
                 // Starting from a width <= 640px, we'll get 1 event when crossing back to > 640px.
@@ -289,6 +300,7 @@ export const ExperimentalSuites = freezeSuites([
                 }
 
                 await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+                reportRecipeCarouselResizeEvents("IncreaseWidthIn5Steps", carouselResizeEvents);
             }),
         ],
     },

tests/unittests/benchmark-runner.mjs

@@ -307,3 +307,93 @@ describe("BenchmarkRunner", () => {
         });
     });
 });
+
+describe("PageElement", () => {
+    describe("observeResizeEvents", () => {
+        before(function () {
+            skipInShell(this);
+        });
+
+        async function withPageElement(configureFrame, callback) {
+            let fixtureNode;
+            let result;
+            const runner = new BenchmarkRunner(
+                [
+                    {
+                        name: "PageElement fixture",
+                        enabled: true,
+                        url: "about:blank",
+                        async prepare(page) {
+                            result = await callback(page.getElementById("resize-target"), fixtureNode);
+                        },
+                        tests: [],
+                    },
+                ],
+                {}
+            );
+            sinon.stub(SuiteRunner.prototype, "_loadFrame").callsFake(async function () {
+                fixtureNode = configureFrame(this.frame);
+            });
+            sinon.stub(SuiteRunner.prototype, "_runSuite").callsFake(async () => {});
+            await runner.runAllSuites();
+            return result;
+        }
+
+        // A fake ResizeObserver drives callbacks synchronously for exact-count assertions.
+        async function createTracker() {
+            let deliver;
+            const disconnect = sinon.stub();
+            class FakeResizeObserver {
+                constructor(callback) {
+                    deliver = (...widths) => callback(widths.map((width) => ({ contentBoxSize: [{ inlineSize: width }] })));
+                }
+                observe() {}
+                disconnect() {
+                    disconnect();
+                }
+            }
+            return withPageElement(
+                (frame) => {
+                    Object.defineProperty(frame.contentWindow, "ResizeObserver", { configurable: true, value: FakeResizeObserver });
+                    const node = frame.contentDocument.createElement("div");
+                    node.id = "resize-target";
+                    frame.contentDocument.body.appendChild(node);
+                    return node;
+                },
+                (element) => ({
+                    resizeEventsPromise: element.observeResizeEvents(),
+                    deliver: (...widths) => deliver(...widths),
+                    disconnect,
+                })
+            );
+        }
+
+        it("treats the first callback as the baseline without counting it", async () => {
+            const { resizeEventsPromise, deliver, disconnect } = await createTracker();
+            deliver(200);
+            const resizeEvents = await resizeEventsPromise;
+            expect(resizeEvents.stop()).to.equal(0);
+            sinon.assert.calledOnce(disconnect);
+        });
+
+        it("counts each distinct width change exactly once", async () => {
+            const { resizeEventsPromise, deliver } = await createTracker();
+            deliver(200); // seed
+            const resizeEvents = await resizeEventsPromise;
+            deliver(300);
+            deliver(400);
+            deliver(500);
+            expect(resizeEvents.stop()).to.equal(3);
+        });
+
+        it("does not count callbacks that report the same width", async () => {
+            const { resizeEventsPromise, deliver } = await createTracker();
+            deliver(200); // seed
+            const resizeEvents = await resizeEventsPromise;
+            deliver(300);
+            deliver(300);
+            deliver(300);
+            expect(resizeEvents.stop()).to.equal(1);
+        });
+    });
+});