@schukai/monster 4.128.2 → 4.129.0

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/login.mjs

@@ -0,0 +1,168 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let Login;
+
+describe("Login", function () {
+	before(function (done) {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill")
+				.then(() => import("../../../../source/components/form/login.mjs"))
+				.then((module) => {
+					Login = module.Login;
+					done();
+				})
+				.catch((error) => done(error));
+		});
+	});
+
+	beforeEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should create a monster-login element", function () {
+		expect(document.createElement("monster-login")).is.instanceof(Login);
+	});
+
+	it("should respect the native hidden attribute on the host", function (done) {
+		const login = document.createElement("monster-login");
+		login.setAttribute("hidden", "");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+				expect(login.isVisible).to.be.false;
+				done();
+			} catch (error) {
+				done(error);
+			}
+		}, 100);
+	});
+
+	it("should hide and show the host with the public visibility API", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		const states = [];
+		login.addEventListener("monster-visibility-changed", (event) => {
+			states.push(event.detail.visible);
+		});
+
+		setTimeout(() => {
+			try {
+				const username = login.shadowRoot.querySelector("input[name='username']");
+				username.focus();
+
+				login.hide();
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+
+		setTimeout(() => {
+			try {
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+
+				login.show();
+
+				setTimeout(() => {
+					try {
+						expect(login.hidden).to.be.false;
+						expect(login.visible).to.be.true;
+						expect(states).to.deep.equal([false, true]);
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 25);
+			} catch (error) {
+				done(error);
+			}
+		}, 200);
+	});
+
+	it("should keep host visibility separate from openLogin", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				login.hide();
+				login.openLogin();
+
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+				done();
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+	});
+
+	it("should show the custom collapse and close the login collapse", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				const loginCollapse = login.shadowRoot.querySelector(
+					'[data-monster-role="login-collapse"]',
+				);
+				const customCollapse = login.shadowRoot.querySelector(
+					'[data-monster-role="custom-collapse"]',
+				);
+
+				expect(loginCollapse.isOpen()).to.be.true;
+				expect(customCollapse.isClosed()).to.be.true;
+
+				const button = document.createElement("button");
+				button.textContent = "Weiter";
+
+				login.showCustomCollapse({
+					header: "Hinweis",
+					content: ["Manueller Inhalt", button],
+					footer: "Footer",
+				});
+
+				setTimeout(() => {
+					try {
+						expect(customCollapse.isOpen()).to.be.true;
+						expect(loginCollapse.isClosed()).to.be.true;
+						expect(
+							login.shadowRoot.getElementById("customCollapseHeader").textContent,
+						).to.equal("Hinweis");
+						expect(
+							login.shadowRoot
+								.getElementById("customCollapseContent")
+								.textContent.includes("Manueller Inhalt"),
+						).to.be.true;
+						expect(
+							login.shadowRoot
+								.getElementById("customCollapseContent")
+								.querySelector("button"),
+						).to.equal(button);
+						expect(
+							login.shadowRoot.getElementById("customCollapseFooter").textContent,
+						).to.equal("Footer");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 700);
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+	});
+});

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);
         });
     });
 
@@ -333,6 +371,30 @@ describe('Select', function () {
 
         });
 
+        it('should expose styling parts for container, filter messages and pagination', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('filter.mode', 'remote');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+                    const selectionMessages = select.shadowRoot.querySelector('[data-monster-role=selection-messages]');
+                    const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+
+                    expect(container.getAttribute('part')).to.equal('container');
+                    expect(selectionMessages.getAttribute('part')).to.equal('selection-messages');
+                    expect(pagination.getAttribute('part')).to.equal('pagination');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+        });
+
         it('should normalize options without throwing', function (done) {
             this.timeout(2000);
 

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

@@ -212,7 +212,28 @@ describe('Treeselect', function () {
 
         });
 
+        it('should expose styling parts for container and popper filter control', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-tree-select');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+                    const popperFilterControl = select.shadowRoot.querySelector('.option-filter-control');
+
+                    expect(container.getAttribute('part')).to.equal('container');
+                    expect(popperFilterControl.getAttribute('part')).to.equal('popper-filter-control');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+        });
+
     });
 
 
-});
+});

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');
+	            });
+
+
+	        });
+	    });
+
+});