@schukai/monster 4.137.5 → 4.137.7

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/components/navigation/table-of-content.mjs

@@ -8,6 +8,29 @@ import { initJSDOM } from "../../../util/jsdom.mjs";
 let expect = chai.expect;
 chai.use(chaiDom);
 
+function waitForCondition(check, { timeout = 4000, interval = 25 } = {}) {
+	const startedAt = Date.now();
+	return new Promise((resolve, reject) => {
+		const tick = () => {
+			try {
+				if (check()) {
+					resolve();
+					return;
+				}
+			} catch (error) {
+				reject(error);
+				return;
+			}
+			if (Date.now() - startedAt >= timeout) {
+				reject(new Error('condition timed out'));
+				return;
+			}
+			setTimeout(tick, interval);
+		};
+		tick();
+	});
+}
+
 describe('TableOfContent', function () {
 	this.timeout(10000);
 
@@ -35,7 +58,7 @@ describe('TableOfContent', function () {
 		mocks.innerHTML = '';
 	});
 
-	it('should bind to the first actually scrollable parent', function (done) {
+	it('should bind to the first actually scrollable parent', async function () {
 		const target = document.getElementById('target');
 		const outerScroller = document.createElement('div');
 		const innerWrapper = document.createElement('div');
@@ -91,25 +114,13 @@ describe('TableOfContent', function () {
 		outerScroller.appendChild(innerWrapper);
 		target.appendChild(outerScroller);
 
-		setTimeout(() => {
-			try {
-				const navigation = tableOfContent.shadowRoot.querySelector('.navigation');
-				expect(navigation.style.top).to.equal('50px');
-
-				outerScroller.scrollTop = 120;
-				outerScroller.dispatchEvent(new window.Event('scroll'));
-
-				setTimeout(() => {
-					try {
-						expect(navigation.style.top).to.equal('170px');
-						done();
-					} catch (error) {
-						done(error);
-					}
-				}, 20);
-			} catch (error) {
-				done(error);
-			}
-		}, 30);
+		const navigation = tableOfContent.shadowRoot.querySelector('.navigation');
+
+		await waitForCondition(() => navigation.style.top === '50px');
+
+		outerScroller.scrollTop = 120;
+		outerScroller.dispatchEvent(new window.Event('scroll'));
+
+		await waitForCondition(() => navigation.style.top === '170px');
 	});
 });

package/test/cases/dom/resource/data.mjs

@@ -12,6 +12,9 @@ let expect = chai.expect;
 
 chai.use(chaiDom);
 
+const validDataURL = 'https://example.test/data.json';
+const allowedOrigins = ['https://example.test'];
+
 let html1 = `
 
 `;
@@ -63,7 +66,8 @@ describe('Data', function () {
         it('setEventTypes()', function (done) {
 
             const data = new Data({
-                src: '/data.json'
+                src: validDataURL,
+                allowedOrigins
             });
 
             data.connect().available().then(() => {
@@ -74,24 +78,26 @@ describe('Data', function () {
 
         it('rejects executable script types', function () {
 
+            const scriptCount = document.querySelectorAll('script').length;
             const data = new Data({
                 src: new DataUrl('console.log(1);', 'text/javascript').toString(),
                 type: 'text/javascript'
             });
 
             expect(() => data.connect()).to.throw('unsupported data resource type');
-            expect(document.querySelector('script')).not.to.exist;
+            expect(document.querySelectorAll('script')).to.have.length(scriptCount);
 
         })
 
         it('rejects remote origins by default', function () {
 
+            const scriptCount = document.querySelectorAll('script').length;
             const data = new Data({
                 src: 'https://cdn.example/data.json'
             });
 
             expect(() => data.connect()).to.throw('data resource origin not allowed');
-            expect(document.querySelector('script')).not.to.exist;
+            expect(document.querySelectorAll('script')).to.have.length(scriptCount);
 
         })
 
@@ -117,8 +123,9 @@ describe('Data', function () {
             };
 
             const data = new Data({
-                src: '/data.json',
-                id: 'data-error'
+                src: validDataURL,
+                id: 'data-error',
+                allowedOrigins
             });
 
             data.connect();
@@ -141,13 +148,14 @@ describe('Data', function () {
     describe('External Data', () => {
 
         let id = new ID('data').toString();
-        let server, data, url = '/layzr.json';
+        let server, data, url = 'https://example.test/layzr.json';
 
         beforeEach(() => {
 
             data = new Data({
                 src: url,
-                id: id
+                id: id,
+                allowedOrigins
             });
 
         });

package/test/cases/dom/resourcemanager.mjs

@@ -6,6 +6,10 @@ import {ResourceManager} from "../../../source/dom/resourcemanager.mjs";
 import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../util/cleanupdom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
 
+const validDataURL = 'https://example.test/data.json';
+const validExampleURL = 'https://example.test/example.json';
+const allowedOrigins = ['https://example.test'];
+
 describe('ResourceManager', function () {
 
     let fetchReference, returnStatus;
@@ -70,7 +74,7 @@ describe('ResourceManager', function () {
         });
 
         it('add data should instance of ResourceManager', function () {
-            expect(manager.addData('/data.json')).to.be.instanceOf(ResourceManager);
+            expect(manager.addData(validDataURL, {allowedOrigins})).to.be.instanceOf(ResourceManager);
         });
 
         describe('connect resources', function () {
@@ -83,7 +87,7 @@ describe('ResourceManager', function () {
             });
 
             it('add data and connect  should instance of ResourceManager', function () {
-                expect(manager.addData('/data.json').connect()).to.be.instanceOf(ResourceManager);
+                expect(manager.addData(validDataURL, {allowedOrigins}).connect()).to.be.instanceOf(ResourceManager);
             });
         })
 
@@ -98,13 +102,13 @@ describe('ResourceManager', function () {
             });
 
             it('add data and check availability  should should return Promise', function () {
-                expect(manager.addData('/data.json').available()).to.be.instanceOf(Promise);
+                expect(manager.addData(validDataURL, {allowedOrigins}).available()).to.be.instanceOf(Promise);
             });
         })
 
         describe('check availability example.json', function () {
             it('add data and check content', function (done) {
-                manager.addData('/example.json').connect().available().then(r => {
+                manager.addData(validExampleURL, {allowedOrigins}).connect().available().then(r => {
                     expect(document.querySelector('html').outerHTML).contains('>{"a":"test"}</script></head>');
                     done();
                 }).catch(e => done(e));

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

@@ -1,21 +1,18 @@
 /** this file was created automatically by the run-web-tests script */
 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";
 import "../cases/components/form/message-state-button.mjs";
-import "../cases/components/form/button-bar.mjs";
 import "../cases/components/form/reload.mjs";
 import "../cases/components/form/context-help.mjs";
 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/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";
@@ -30,9 +27,9 @@ import "../cases/components/host/host.mjs";
 import "../cases/components/host/overlay.mjs";
 import "../cases/components/host/util.mjs";
 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/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 15:45:10 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>