@schukai/monster 4.141.2 → 4.142.0

package/test/cases/components/form/button-bar.mjs

@@ -194,8 +194,9 @@ describe("ButtonBar", function () {
         return originalSetAttribute(name, value);
       };
 
-      resizeObserver.triggerResize([]);
-      resizeObserver.triggerResize([]);
+      const wrapperResizeEntry = { target: wrapper };
+      resizeObserver.triggerResize([wrapperResizeEntry]);
+      resizeObserver.triggerResize([wrapperResizeEntry]);
 
       expect(scheduledCallbacks.length).to.equal(1);
       await flushFrames();

package/test/cases/components/form/control-bar.mjs

@@ -162,6 +162,7 @@ describe("ControlBar", function () {
       stacked: false,
       stackedAlignment: undefined,
       stackedBreakpoint: undefined,
+      stackedBreakpointContainer: undefined,
     });
   });
 
@@ -843,4 +844,458 @@ describe("ControlBar", function () {
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
     }
   });
+
+  it("should keep the configured alignment when the reference container is above the stacked breakpoint", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="headline-wide" class="page-headline-bar">
+          <div id="headline-wide-control-column">
+            <monster-control-bar
+              id="headline-wide-bar"
+              data-monster-option-layout-alignment="right"
+              data-monster-option-layout-stacked-alignment="left"
+              data-monster-option-layout-stacked-breakpoint="480px"
+              data-monster-option-layout-stacked-breakpoint-container=".page-headline-bar"
+            >
+              <button id="headline-wide-button">Run</button>
+            </monster-control-bar>
+          </div>
+        </div>
+      `;
+
+      const headline = document.getElementById("headline-wide");
+      const column = document.getElementById("headline-wide-control-column");
+      const button = document.getElementById("headline-wide-button");
+      const bar = document.getElementById("headline-wide-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      headline.style.boxSizing = "border-box";
+      Object.defineProperty(headline, "clientWidth", {
+        configurable: true,
+        value: 640,
+      });
+      column.style.boxSizing = "border-box";
+      Object.defineProperty(column, "clientWidth", {
+        configurable: true,
+        value: 459.469,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "false",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "right",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should apply stacked alignment when the reference container is below the stacked breakpoint", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="headline-narrow" class="page-headline-bar">
+          <div id="headline-narrow-control-column">
+            <monster-control-bar
+              id="headline-narrow-bar"
+              data-monster-option-layout-alignment="right"
+              data-monster-option-layout-stacked-alignment="left"
+              data-monster-option-layout-stacked-breakpoint="480px"
+              data-monster-option-layout-stacked-breakpoint-container=".page-headline-bar"
+            >
+              <button id="headline-narrow-button">Run</button>
+            </monster-control-bar>
+          </div>
+        </div>
+      `;
+
+      const headline = document.getElementById("headline-narrow");
+      const column = document.getElementById("headline-narrow-control-column");
+      const button = document.getElementById("headline-narrow-button");
+      const bar = document.getElementById("headline-narrow-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      headline.style.boxSizing = "border-box";
+      Object.defineProperty(headline, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      column.style.boxSizing = "border-box";
+      Object.defineProperty(column, "clientWidth", {
+        configurable: true,
+        value: 459.469,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should fall back to the control bar width when the breakpoint container selector cannot resolve", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="missing-reference-wrapper">
+          <monster-control-bar
+            id="missing-reference-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="480px"
+            data-monster-option-layout-stacked-breakpoint-container=".missing-reference"
+          >
+            <button id="missing-reference-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("missing-reference-wrapper");
+      const button = document.getElementById("missing-reference-button");
+      const bar = document.getElementById("missing-reference-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should fall back without throwing when the breakpoint container selector is invalid", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="invalid-reference-wrapper">
+          <monster-control-bar
+            id="invalid-reference-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="480px"
+          >
+            <button id="invalid-reference-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("invalid-reference-wrapper");
+      const button = document.getElementById("invalid-reference-button");
+      const bar = document.getElementById("invalid-reference-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      bar.setOption("layout.stackedBreakpointContainer", "[");
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should observe the resolved breakpoint container and update observation when it changes", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="observed-reference-wrapper">
+          <monster-control-bar
+            id="observed-reference-bar"
+            data-monster-option-layout-stacked-breakpoint="480px"
+            data-monster-option-layout-stacked-breakpoint-container="#reference-a"
+          >
+            <button id="observed-reference-button">Run</button>
+          </monster-control-bar>
+        </div>
+        <div id="reference-a"></div>
+        <div id="reference-b"></div>
+      `;
+
+      const wrapper = document.getElementById("observed-reference-wrapper");
+      const referenceA = document.getElementById("reference-a");
+      const referenceB = document.getElementById("reference-b");
+      const button = document.getElementById("observed-reference-button");
+      const bar = document.getElementById("observed-reference-bar");
+
+      wrapper.style.boxSizing = "border-box";
+      referenceA.style.boxSizing = "border-box";
+      referenceB.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 459,
+      });
+      Object.defineProperty(referenceA, "clientWidth", {
+        configurable: true,
+        value: 640,
+      });
+      Object.defineProperty(referenceB, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      const observer = TrackingResizeObserver.instances[0];
+      expect(observer.elements).to.include(referenceA);
+
+      bar.setOption("layout.stackedBreakpointContainer", "#reference-b");
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(observer.elements).to.not.include(referenceA);
+      expect(observer.elements).to.include(referenceB);
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });