@schukai/monster 4.137.5 → 4.137.6

package/test/cases/components/layout/slider.mjs

@@ -0,0 +1,165 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const expect = chai.expect;
+
+describe("Slider", function () {
+	let Slider;
+
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				import("../../../../source/components/layout/slider.mjs")
+					.then((m) => {
+						Slider = m.Slider;
+						done();
+					})
+					.catch((e) => done(e));
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should register monster-slider", function () {
+		expect(document.createElement("monster-slider")).to.be.instanceof(Slider);
+	});
+
+	it("should coalesce resize updates and skip unchanged sizes", 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 = [];
+
+		try {
+			window.ResizeObserver = TrackingResizeObserver;
+			globalThis.ResizeObserver = TrackingResizeObserver;
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallbacks.push(callback);
+				return scheduledCallbacks.length;
+			};
+			window.cancelAnimationFrame = () => {};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+			const mocks = document.getElementById("mocks");
+			const slider = document.createElement("monster-slider");
+			slider.setOption("features.autoPlay", false);
+			slider.setOption("features.thumbnails", false);
+			mocks.appendChild(slider);
+
+			const sliderElement = slider.shadowRoot.querySelector(
+				"[data-monster-role='slider']",
+			);
+			const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+				observer.elements.includes(sliderElement),
+			);
+			expect(resizeObserver).to.exist;
+
+			let resizeEvents = 0;
+			slider.addEventListener("monster-slider-resized", () => {
+				resizeEvents += 1;
+			});
+
+			resizeObserver.triggerResize([
+				{ contentRect: { width: 320, height: 120 } },
+			]);
+			resizeObserver.triggerResize([
+				{ contentRect: { width: 640, height: 120 } },
+			]);
+
+			expect(scheduledCallbacks).to.have.length(1);
+			scheduledCallbacks.shift()();
+			expect(resizeEvents).to.equal(1);
+
+			resizeObserver.triggerResize([
+				{ contentRect: { width: 640, height: 120 } },
+			]);
+			expect(scheduledCallbacks).to.have.length(0);
+			expect(resizeEvents).to.equal(1);
+		} finally {
+			window.ResizeObserver = OriginalResizeObserver;
+			globalThis.ResizeObserver = originalGlobalResizeObserver;
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+		}
+	});
+
+	it("should coalesce drag updates to the latest move per frame", function () {
+		const originalRequestAnimationFrame = window.requestAnimationFrame;
+		const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+		const scheduledCallbacks = [];
+
+		try {
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallbacks.push(callback);
+				return scheduledCallbacks.length;
+			};
+			window.cancelAnimationFrame = () => {};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+			const mocks = document.getElementById("mocks");
+			const slider = document.createElement("monster-slider");
+			slider.setOption("features.autoPlay", false);
+			mocks.appendChild(slider);
+
+			for (let i = 0; i < 3; i += 1) {
+				const slide = document.createElement("div");
+				Object.defineProperty(slide, "offsetWidth", {
+					configurable: true,
+					value: 100,
+				});
+				slide.textContent = `Slide ${i + 1}`;
+				slider.appendChild(slide);
+			}
+
+			const sliderElement = slider.shadowRoot.querySelector(
+				"[data-monster-role='slider']",
+			);
+			Object.defineProperty(sliderElement, "offsetWidth", {
+				configurable: true,
+				value: 300,
+			});
+			slider.moveTo(0);
+
+			const createMouseEvent = (type, pageX) => {
+				const event = new window.MouseEvent(type, {
+					bubbles: true,
+					clientX: pageX,
+				});
+				Object.defineProperty(event, "pageX", {
+					configurable: true,
+					value: pageX,
+				});
+				return event;
+			};
+
+			sliderElement.dispatchEvent(createMouseEvent("mousedown", 10));
+			document.body.dispatchEvent(createMouseEvent("mousemove", 20));
+			document.body.dispatchEvent(createMouseEvent("mousemove", 55));
+
+			expect(scheduledCallbacks).to.have.length(1);
+			scheduledCallbacks.shift()();
+			expect(sliderElement.style.transform).to.contain("45px");
+
+			document.body.dispatchEvent(createMouseEvent("mouseup", 55));
+		} finally {
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+		}
+	});
+});

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.136.7")
+        monsterVersion = new Version("4.137.5")
 
         let m = getMonsterVersion();
 

package/test/web/import.js

@@ -3,7 +3,7 @@ import "./prepare.js";
 import "../cases/components/layout/tabs.mjs";
 import "../cases/components/layout/slit-panel.mjs";
 import "../cases/components/layout/panel.mjs";
-import "../cases/components/navigation/site-navigation.mjs";
+import "../cases/components/layout/slider.mjs";
 import "../cases/components/content/viewer.mjs";
 import "../cases/components/content/image-editor.mjs";
 import "../cases/components/form/buy-box.mjs";
@@ -15,7 +15,9 @@ import "../cases/components/form/state-button.mjs";
 import "../cases/components/form/select.mjs";
 import "../cases/components/form/login.mjs";
 import "../cases/components/form/confirm-button.mjs";
+import "../cases/components/form/sheet.mjs";
 import "../cases/components/form/context-error.mjs";
+import "../cases/components/form/choice-cards.mjs";
 import "../cases/components/form/form.mjs";
 import "../cases/components/form/tree-select.mjs";
 import "../cases/components/form/popper-button.mjs";
@@ -33,6 +35,8 @@ import "../cases/components/host/details.mjs";
 import "../cases/components/datatable/drag-scroll.mjs";
 import "../cases/components/datatable/writeback-sanitizer.mjs";
 import "../cases/components/datatable/pagination.mjs";
+import "../cases/components/navigation/table-of-content.mjs";
+import "../cases/components/navigation/site-navigation.mjs";
 import "../cases/text/formatter.mjs";
 import "../cases/text/generate-range-comparison-expression.mjs";
 import "../cases/text/util.mjs";

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.136.7</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Wed Apr 22 21:49:31 CEST 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.137.5</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mon May 25 11:56:58 CEST 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>