@schukai/monster 4.128.1 → 4.128.3

package/test/cases/components/datatable/drag-scroll.mjs

@@ -1,6 +1,7 @@
 import * as chai from "chai";
 import { chaiDom } from "../../../util/chai-dom.mjs";
 import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 
 const expect = chai.expect;
 chai.use(chaiDom);
@@ -32,6 +33,26 @@ function dispatchPointerEvent(target, type, options = {}) {
 	return event;
 }
 
+function mockScrollableElement(element, { clientWidth, scrollWidth, scrollLeft = 0 }) {
+	let currentScrollLeft = scrollLeft;
+
+	Object.defineProperty(element, "clientWidth", {
+		configurable: true,
+		value: clientWidth,
+	});
+	Object.defineProperty(element, "scrollWidth", {
+		configurable: true,
+		value: scrollWidth,
+	});
+	Object.defineProperty(element, "scrollLeft", {
+		configurable: true,
+		get: () => currentScrollLeft,
+		set: (value) => {
+			currentScrollLeft = value;
+		},
+	});
+}
+
 describe("Datatable drag scroll", function () {
 	before(async function () {
 		await initJSDOM();
@@ -68,13 +89,9 @@ describe("Datatable drag scroll", function () {
 		expect(scroll).to.exist;
 		expect(cell).to.exist;
 
-		Object.defineProperty(scroll, "clientWidth", {
-			configurable: true,
-			value: 200,
-		});
-		Object.defineProperty(scroll, "scrollWidth", {
-			configurable: true,
-			value: 600,
+		mockScrollableElement(scroll, {
+			clientWidth: 200,
+			scrollWidth: 600,
 		});
 
 		scroll.scrollLeft = 120;
@@ -134,13 +151,9 @@ describe("Datatable drag scroll", function () {
 		expect(scroll).to.exist;
 		expect(button).to.exist;
 
-		Object.defineProperty(scroll, "clientWidth", {
-			configurable: true,
-			value: 200,
-		});
-		Object.defineProperty(scroll, "scrollWidth", {
-			configurable: true,
-			value: 600,
+		mockScrollableElement(scroll, {
+			clientWidth: 200,
+			scrollWidth: 600,
 		});
 
 		scroll.scrollLeft = 120;
@@ -255,4 +268,195 @@ describe("Datatable drag scroll", function () {
 		await new Promise((resolve) => setTimeout(resolve, 0));
 		expect(copied).deep.equal(['"Alpha";"Beta"']);
 	});
+
+	it("defers resize observer grid updates to the next animation frame", 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);
+			}
+		}
+
+		try {
+			window.ResizeObserver = TrackingResizeObserver;
+			globalThis.ResizeObserver = TrackingResizeObserver;
+
+			const mocks = document.getElementById("mocks");
+			const wrapper = document.createElement("div");
+			let wrapperWidth = 500;
+
+			Object.defineProperty(wrapper, "clientWidth", {
+				configurable: true,
+				get: () => wrapperWidth,
+			});
+
+			mocks.appendChild(wrapper);
+
+			const datatable = document.createElement("monster-datatable");
+			datatable.id = "resize-scheduled-table";
+			datatable.innerHTML = `
+				<template id="resize-scheduled-table-row">
+					<div data-monster-head="Name">Alpha</div>
+					<div data-monster-head="Value">Beta</div>
+				</template>
+			`;
+			datatable.setOption("responsive.breakpoint", 300);
+			datatable.setOption("data", [{}]);
+			wrapper.appendChild(datatable);
+
+			await new Promise((resolve) => setTimeout(resolve, 30));
+
+			const control = datatable.shadowRoot.querySelector(
+				"[data-monster-role=control]",
+			);
+			expect(control).to.exist;
+			expect(control.classList.contains("small")).to.equal(false);
+			expect(TrackingResizeObserver.instances).to.have.length.greaterThan(0);
+			const tableResizeObserver = TrackingResizeObserver.instances.find(
+				(observer) => observer.elements.includes(wrapper),
+			);
+			expect(tableResizeObserver).to.exist;
+
+			let scheduledCallback = null;
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallback = callback;
+				return 1;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+			wrapperWidth = 200;
+			tableResizeObserver.triggerResize([]);
+
+			expect(scheduledCallback).to.be.a("function");
+			expect(control.classList.contains("small")).to.equal(false);
+
+			scheduledCallback();
+
+			expect(control.classList.contains("small")).to.equal(true);
+		} finally {
+			window.ResizeObserver = OriginalResizeObserver;
+			globalThis.ResizeObserver = originalGlobalResizeObserver;
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+		}
+	});
+
+	it("defers column bar resize updates to the next animation frame", 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);
+			}
+		}
+
+		try {
+			window.ResizeObserver = TrackingResizeObserver;
+			globalThis.ResizeObserver = TrackingResizeObserver;
+
+			const mocks = document.getElementById("mocks");
+			const wrapper = document.createElement("div");
+			let parentWidth = 400;
+
+			Object.defineProperty(wrapper, "getBoundingClientRect", {
+				configurable: true,
+				value: () => ({ width: parentWidth }),
+			});
+
+			mocks.appendChild(wrapper);
+
+			const columnBar = document.createElement("monster-column-bar");
+			columnBar.setOption("columns", [
+				{ index: 0, name: "One", visible: true },
+				{ index: 1, name: "Two", visible: true },
+				{ index: 2, name: "Three", visible: true },
+				{ index: 3, name: "Four", visible: true },
+				{ index: 4, name: "Five", visible: true },
+				{ index: 5, name: "Six", visible: true },
+			]);
+			wrapper.appendChild(columnBar);
+
+			await new Promise((resolve) => setTimeout(resolve, 30));
+
+			const control = columnBar.shadowRoot.querySelector(
+				"[data-monster-role=control]",
+			);
+			const settingsButton = columnBar.shadowRoot.querySelector(
+				"[data-monster-role=settings-button]",
+			);
+			const dotsContainer = columnBar.shadowRoot.querySelector(
+				"[data-monster-role=dots]",
+			);
+			const dots = Array.from(dotsContainer.querySelectorAll("li"));
+
+			expect(control).to.exist;
+			expect(settingsButton).to.exist;
+			expect(dots.length).to.equal(6);
+
+			Object.defineProperty(control, "getBoundingClientRect", {
+				configurable: true,
+				value: () => ({ width: parentWidth }),
+			});
+			Object.defineProperty(settingsButton, "getBoundingClientRect", {
+				configurable: true,
+				value: () => ({ width: 20 }),
+			});
+			dots.forEach((dot) => {
+				Object.defineProperty(dot, "getBoundingClientRect", {
+					configurable: true,
+					value: () => ({ width: 20 }),
+				});
+			});
+
+			await new Promise((resolve) => setTimeout(resolve, 0));
+
+			expect(
+				dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.equal(null);
+
+			const columnBarResizeObserver = TrackingResizeObserver.instances.find(
+				(observer) => observer.elements.includes(control),
+			);
+			expect(columnBarResizeObserver).to.exist;
+
+			let scheduledCallback = null;
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallback = callback;
+				return 1;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+			parentWidth = 80;
+			columnBarResizeObserver.triggerResize([]);
+
+			expect(scheduledCallback).to.be.a("function");
+			expect(
+				dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.equal(null);
+
+			scheduledCallback();
+
+			expect(
+				dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.exist;
+		} finally {
+			window.ResizeObserver = OriginalResizeObserver;
+			globalThis.ResizeObserver = originalGlobalResizeObserver;
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+		}
+	});
 });

package/test/cases/components/form/select.mjs

@@ -238,7 +238,7 @@ describe('Select', function () {
         });
 
         it('should reset pagination and clear options on fetch error', function (done) {
-            this.timeout(4000);
+            this.timeout(5000);
 
             let mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
@@ -257,47 +257,85 @@ describe('Select', function () {
             const triggerFilter = (value) => {
                 const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter]');
                 filterInput.value = value;
+                filterInput.dispatchEvent(new InputEvent('input', {
+                    bubbles: true,
+                    composed: true,
+                    data: value
+                }));
                 filterInput.dispatchEvent(new KeyboardEvent('keydown', {
                     code: 'KeyA',
-                    bubbles: true
+                    key: 'a',
+                    bubbles: true,
+                    composed: true
                 }));
             };
 
-            select.addEventListener('monster-options-set', () => {
-                setTimeout(() => {
-                    try {
-                        const options = select.getOption('options');
-                        expect(options.length).to.equal(1);
-                        expect(pagination().getOption('currentPage')).to.equal(1);
-                        expect(pagination().getOption('pages')).to.equal(2);
-                        expect(pagination().getOption('objectsPerPage')).to.equal(1);
-
-                        triggerFilter('b');
-
-                        setTimeout(() => {
-                            try {
-                                const optionsAfterError = select.getOption('options');
-                                expect(optionsAfterError.length).to.equal(0);
-                                expect(pagination().getOption('currentPage')).to.equal(null);
-                                expect(pagination().getOption('pages')).to.equal(null);
-                                expect(pagination().getOption('objectsPerPage')).to.equal(null);
-                                expect(select.getOption('total')).to.equal(null);
-                                expect(select.getOption('messages.total')).to.equal("");
-                            } catch (e) {
-                                return done(e);
-                            }
+            const startedAt = Date.now();
+            const pollLoadedState = () => {
+                try {
+                    const options = select.getOption('options');
+                    const pager = pagination();
+
+                    if (
+                        options?.length !== 1 ||
+                        !pager ||
+                        pager.getOption('currentPage') !== 1 ||
+                        pager.getOption('pages') !== 2 ||
+                        pager.getOption('objectsPerPage') !== 1
+                    ) {
+                        if (Date.now() - startedAt < 3000) {
+                            return setTimeout(pollLoadedState, 50);
+                        }
+                    }
 
-                            done();
-                        }, 500);
-                    } catch (e) {
-                        done(e);
+                    expect(options.length).to.equal(1);
+                    expect(pager.getOption('currentPage')).to.equal(1);
+                    expect(pager.getOption('pages')).to.equal(2);
+                    expect(pager.getOption('objectsPerPage')).to.equal(1);
+
+                    triggerFilter('b');
+                    setTimeout(pollErrorState, 50);
+                } catch (e) {
+                    done(e);
+                }
+            };
+
+            const pollErrorState = () => {
+                try {
+                    const optionsAfterError = select.getOption('options');
+                    const pager = pagination();
+
+                    if (
+                        optionsAfterError?.length !== 0 ||
+                        !pager ||
+                        pager.getOption('currentPage') !== null ||
+                        pager.getOption('pages') !== null ||
+                        pager.getOption('objectsPerPage') !== null ||
+                        select.getOption('total') !== null ||
+                        select.getOption('messages.total') !== ""
+                    ) {
+                        if (Date.now() - startedAt < 4500) {
+                            return setTimeout(pollErrorState, 50);
+                        }
                     }
-                }, 50);
-            }, {once: true});
+
+                    expect(optionsAfterError.length).to.equal(0);
+                    expect(pager.getOption('currentPage')).to.equal(null);
+                    expect(pager.getOption('pages')).to.equal(null);
+                    expect(pager.getOption('objectsPerPage')).to.equal(null);
+                    expect(select.getOption('total')).to.equal(null);
+                    expect(select.getOption('messages.total')).to.equal("");
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            };
 
             setTimeout(() => {
                 triggerFilter('a');
-            }, 0);
+                setTimeout(pollLoadedState, 50);
+            }, 50);
         });
     });
 

package/test/cases/dom/customcontrol.mjs

@@ -161,9 +161,9 @@ describe('DOM', function () {
         //
         // })
 
-        describe('Test ElementInternals', function () {
+	        describe('Test ElementInternals', function () {
 
-            let form;
+	            let form;
 
             beforeEach(() => {
                 form = document.createElement('form');
@@ -276,18 +276,52 @@ describe('DOM', function () {
             });
 
 
-            it('setValidity()', function () {
+	            it('setValidity()', function () {
 
-                let d = document.createElement('monster-customcontrol');
-                form.appendChild(d);
-                expect(d.setValidity({'valueMissing': true}, "my message")).to.be.undefined;
+	                let d = document.createElement('monster-customcontrol');
+	                form.appendChild(d);
+	                expect(d.setValidity({'valueMissing': true}, "my message")).to.be.undefined;
 
-            });
+	            });
 
+	            it('formResetCallback() should restore the value attribute', function () {
+	                const htmlTAG = 'monster-customcontrol-reset';
 
-        });
-    });
+	                class ResetComponent extends CustomControl {
+	                    static getTag() {
+	                        return htmlTAG;
+	                    }
 
-});
+	                    get defaults() {
+	                        return Object.assign({}, super.defaults, {
+	                            shadowMode: false,
+	                        });
+	                    }
+
+	                    get value() {
+	                        return this._value ?? '';
+	                    }
+
+	                    set value(value) {
+	                        this._value = value;
+	                    }
+	                }
 
+	                registerCustomElement(ResetComponent);
+
+	                let d = document.createElement(htmlTAG);
+	                d.setAttribute('value', 'seed');
+	                d.value = 'changed';
+	                form.appendChild(d);
+
+	                d.formResetCallback();
+
+	                expect(d.value).to.equal('seed');
+	            });
+
+
+	        });
+	    });
+
+});
 

package/test/cases/dom/customelement-initfromscripthost.mjs

@@ -133,7 +133,28 @@ describe('DOM', function () {
                 expect(control.hasAttribute('data-monster-error')).is.false;
 
             });
+
+            it('should resolve callback hosts from a comma separated list', function () {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="call-back-host-1"></div>
+                    <div id="call-back-host-2"></div>
+                    <div id="container"></div>
+                `;
+
+                const container = document.getElementById('call-back-host-2');
+                container.initCustomControlCallback = function (control) {
+                    control.setOption('test', 3);
+                }
+
+                let control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', "call-back-host-1,call-back-host-2");
+                document.getElementById('container').appendChild(control);
+
+                expect(control.getOption('test')).is.eql(3);
+                expect(control.hasAttribute('data-monster-error')).is.false;
+            });
         })
 
     });
-})
+})

package/test/cases/dom/customelement.mjs

@@ -321,6 +321,89 @@ describe('DOM', function () {
             });
         });
 
+        describe('shadow root lifecycle', function () {
+            it('should support closed shadow roots without adding an error', function (done) {
+                const htmlTAG = 'monster-testclass-closed';
+
+                class ClosedShadowComponent extends CustomElement {
+                    static getTag() {
+                        return htmlTAG;
+                    }
+
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            shadowMode: 'closed',
+                            templates: {
+                                main: '<span id="inside">ok</span>'
+                            },
+                        });
+                    }
+                }
+
+                registerCustomElement(ClosedShadowComponent);
+
+                let d = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(d);
+
+                setTimeout(function () {
+                    try {
+                        expect(d.hasAttribute('data-monster-error')).to.be.false;
+                        expect(d.shadowRoot).to.equal(null);
+                        done();
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 10);
+            });
+        });
+
+        describe('attribute lifecycle', function () {
+            it('should not double-call attributeChangedCallback for observed attributes', function (done) {
+                const htmlTAG = 'monster-testclass-observed';
+
+                class ObservedAttributeComponent extends CustomElement {
+                    static getTag() {
+                        return htmlTAG;
+                    }
+
+                    static get observedAttributes() {
+                        return ['data-demo'];
+                    }
+
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            shadowMode: false,
+                        });
+                    }
+
+                    constructor() {
+                        super();
+                        this.attributeChangedCalls = [];
+                    }
+
+                    attributeChangedCallback(attrName, oldVal, newVal) {
+                        this.attributeChangedCalls.push([attrName, oldVal, newVal]);
+                        super.attributeChangedCallback(attrName, oldVal, newVal);
+                    }
+                }
+
+                registerCustomElement(ObservedAttributeComponent);
+
+                let d = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(d);
+                d.setAttribute('data-demo', '1');
+
+                setTimeout(function () {
+                    try {
+                        expect(d.attributeChangedCalls).to.have.length(1);
+                        done();
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 10);
+            });
+        });
+
         describe('Options change', function () {
 
             it('delegatesFocus should change from true to false', function () {

package/test/cases/dom/updater.mjs

@@ -1907,5 +1907,103 @@ describe("DOM", function () {
         })
         .catch((e) => done(e));
     });
+
+    it("should update every parent-path binding when a nested path changes", function (done) {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="nested-parent-1" data-monster-replace="path:a | tojson"></div>
+        <div id="nested-leaf" data-monster-replace="path:a.b"></div>
+        <div id="nested-parent-2" data-monster-replace="path:a | tojson"></div>
+      `;
+
+      const updater = new Updater(mocks, { a: { b: "first" } });
+
+      updater
+        .run()
+        .then(() => {
+          updater.getSubject().a.b = "second";
+
+          setTimeout(() => {
+            try {
+              expect(document.getElementById("nested-parent-1").textContent).to.equal(
+                '{"b":"second"}',
+              );
+              expect(document.getElementById("nested-leaf").textContent).to.equal(
+                "second",
+              );
+              expect(document.getElementById("nested-parent-2").textContent).to.equal(
+                '{"b":"second"}',
+              );
+              done();
+            } catch (e) {
+              done(e);
+            }
+          }, 50);
+        })
+        .catch((e) => done(e));
+    });
+
+    it('should keep "0" for optional number bindings', function (done) {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <input id="optional-number" data-monster-bind="path:value" data-monster-bind-type="number?">
+      `;
+
+      const updater = new Updater(mocks, {});
+      updater.enableEventProcessing();
+
+      const input = document.getElementById("optional-number");
+      input.value = "0";
+      input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+
+      setTimeout(() => {
+        try {
+          expect(updater.getSubject().value).to.equal(0);
+          done();
+        } catch (e) {
+          done(e);
+        }
+      }, 80);
+    });
+
+    it("should clear select attributes when bound values become undefined", function (done) {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <select id="select-one" data-monster-attributes="value path:single">
+          <option value="a">a</option>
+          <option value="b">b</option>
+        </select>
+        <select id="select-multiple" multiple data-monster-attributes="value path:multiple">
+          <option value="a">a</option>
+          <option value="b">b</option>
+        </select>
+      `;
+
+      const updater = new Updater(mocks, {
+        single: "b",
+        multiple: ["a"],
+      });
+
+      updater
+        .run()
+        .then(() => {
+          updater.getSubject().single = undefined;
+          updater.getSubject().multiple = undefined;
+
+          setTimeout(() => {
+            try {
+              const selectOne = document.getElementById("select-one");
+              const selectMultiple = document.getElementById("select-multiple");
+              expect(selectOne.selectedIndex).to.equal(-1);
+              expect(Array.from(selectMultiple.selectedOptions)).to.have.length(0);
+              expect(mocks.hasAttribute("data-monster-error")).to.be.false;
+              done();
+            } catch (e) {
+              done(e);
+            }
+          }, 50);
+        })
+        .catch((e) => done(e));
+    });
   });
 });