@schukai/monster 4.148.2 → 4.148.4

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

@@ -97,6 +97,14 @@ function configureRemotePaginatedSelect(select) {
     select.setOption('mapping.objectsPerPage', 'pagination.perPage');
 }
 
+function configureLazySelect(select) {
+    select.setOption('url', 'https://example.com/lazy-options');
+    select.setOption('features.lazyLoad', true);
+    select.setOption('mapping.selector', 'items.*');
+    select.setOption('mapping.labelTemplate', '${name}');
+    select.setOption('mapping.valueTemplate', '${id}');
+}
+
 let Select,
     SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
@@ -643,6 +651,223 @@ describe('Select', function () {
 
     });
 
+    describe('Lazy load lifecycle', function () {
+        this.timeout(5000);
+
+        afterEach(() => {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            global['fetch'] = fetchReference;
+        });
+
+        it('should open from the first click after a delayed lazy response renders', async function () {
+            const deferredResponse = createDeferred();
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+
+            await waitForCondition(() => requestCount === 1);
+            container.click();
+            await new Promise(resolve => setTimeout(resolve, 250));
+            expect(requestCount).to.equal(1);
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                })
+            );
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll('[data-monster-role=option]').length === 1;
+            });
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(1);
+            expect(popper.style.display).to.equal('block');
+        });
+
+        it('should keep a failed lazy load in the error state', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({}, 500);
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return (select.getAttribute('data-monster-error') ?? '').includes('HTTP error! status: 500');
+            });
+            await new Promise(resolve => setTimeout(resolve, 350));
+
+            expect(select.getOption('classes.statusOrRemoveBadge')).to.equal('error');
+            expect(select.getAttribute('data-monster-error')).to.not.contain('No options available.');
+        });
+
+        it('should retry a failed lazy load on the next click', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                if (requestCount === 1) {
+                    return createJsonResponse({}, 500);
+                }
+
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return (select.getAttribute('data-monster-error') ?? '').includes('HTTP error! status: 500');
+            });
+
+            container.click();
+
+            await waitForCondition(() => requestCount === 2, {timeout: 1500});
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll('[data-monster-role=option]').length === 1;
+            });
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(2);
+            expect(select.getAttribute('data-monster-error') ?? '').to.not.contain('HTTP error! status: 500');
+        });
+
+        it('should retry lazy loading after disconnecting during the request', async function () {
+            const firstResponse = createDeferred();
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                if (requestCount === 1) {
+                    return firstResponse.promise;
+                }
+
+                return createJsonResponse({
+                    items: [{id: 'fresh', name: 'Fresh'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            container.click();
+            await waitForCondition(() => requestCount === 1);
+
+            select.remove();
+            mocks.appendChild(select);
+            firstResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'stale', name: 'Stale'}]
+                })
+            );
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            container.click();
+
+            await waitForCondition(() => requestCount === 2, {timeout: 1500});
+            await waitForCondition(() => {
+                return select.getOption('options').map(option => option.value).includes('fresh');
+            });
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['fresh']);
+        });
+
+        it('should not start a delayed lazy request after disconnecting', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({
+                    items: [{id: 'fresh', name: 'Fresh'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            container.click();
+            select.remove();
+
+            await new Promise(resolve => setTimeout(resolve, 300));
+            expect(requestCount).to.equal(0);
+
+            mocks.appendChild(select);
+            container.click();
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return select.getOption('options').map(option => option.value).includes('fresh');
+            });
+        });
+
+        it('should not reload a completed lazy select after reconnecting', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+            await waitForCondition(() => popper.style.display === 'block');
+
+            container.click();
+            await waitForCondition(() => popper.style.display === 'none');
+            select.remove();
+            mocks.appendChild(select);
+            container.click();
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(1);
+        });
+    });
+
     describe('Popper sizing', function () {
         this.timeout(5000);
 
@@ -1701,6 +1926,56 @@ describe('Select', function () {
         });
     });
 
+    describe('Remote open lifecycle', function () {
+        this.timeout(5000);
+
+        afterEach(() => {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            global['fetch'] = fetchReference;
+        });
+
+        it('should request an immediately entered remote filter only once', async function () {
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            container.click();
+            filterInput.value = 'alpha';
+            filterInput.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+
+            await waitForCondition(() => requests.length >= 1);
+            await new Promise(resolve => setTimeout(resolve, 350));
+
+            expect(requests).to.deep.equal([
+                'https://example.com/items?filter=alpha&page=1'
+            ]);
+        });
+    });
+
     describe('document.createElement()', function () {
 
         afterEach(() => {

package/test/cases/data/extend.mjs

@@ -156,7 +156,33 @@ describe('extend function', () => {
         const result = extend(target, source);
         expect(result).to.deep.equal({ a: [3, 4] });
     });
-});
 
+    it('should ignore inherited enumerable properties issue #499', () => {
+        const prototype = { inherited: 'unsafe' };
+        const source = Object.assign(Object.create(prototype), { own: 'safe' });
+
+        expect(extend({}, source)).to.deep.equal({ own: 'safe' });
+    });
+
+    [
+        '{"__proto__":{"monsterExtendPolluted":"yes"}}',
+        '{"nested":{"__proto__":{"monsterExtendPolluted":"yes"}}}',
+        '{"constructor":{"prototype":{"monsterExtendPolluted":"yes"}}}',
+    ].forEach((json) => {
+        it(`should not mutate Object.prototype for ${json} issue #499`, () => {
+            delete Object.prototype.monsterExtendPolluted;
+
+            try {
+                const result = extend({}, JSON.parse(json));
+
+                expect(Object.prototype.monsterExtendPolluted).to.equal(undefined);
+                expect(({}).monsterExtendPolluted).to.equal(undefined);
+                expect(result).to.be.an('object');
+            } finally {
+                delete Object.prototype.monsterExtendPolluted;
+            }
+        });
+    });
+});
 
 

package/test/cases/dom/customcontrol.mjs

@@ -88,14 +88,20 @@ describe('DOM', function () {
 
         })
 
-        it('should return undefined', function () {
+        it('should not reflect computed disabledness to the host attribute issue #500', function () {
             expect(element.formDisabledCallback()).to.be.undefined;
             expect(element.hasAttribute('disabled')).to.be.false;
             expect(element.formDisabledCallback(true)).to.be.undefined;
-            expect(element.hasAttribute('disabled')).to.be.true;
-            const d = element.getAttribute('disabled');
-            expect(d).to.not.be.null;
-            
+            expect(element.hasAttribute('disabled')).to.be.false;
+            expect(element.getOption('disabled')).to.be.false;
+        });
+
+        it('should preserve an author-provided form attribute issue #500', function () {
+            element.setAttribute('form', 'author-form');
+
+            element.formAssociatedCallback(null);
+
+            expect(element.getAttribute('form')).to.equal('author-form');
         });
 
     })
@@ -319,9 +325,185 @@ describe('DOM', function () {
 	                expect(d.value).to.equal('seed');
 	            });
 
+                it('formStateRestoreCallback() should restore through the value setter issue #501', function () {
+                    const htmlTAG = 'monster-customcontrol-state-restore';
+
+                    class StateRestoreComponent extends CustomControl {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get value() {
+                            return this._value ?? '';
+                        }
+
+                        set value(value) {
+                            this._value = value;
+                        }
+                    }
+
+                    registerCustomElement(StateRestoreComponent);
+                    const control = document.createElement(htmlTAG);
+                    control.value = 'changed';
+
+                    control.formStateRestoreCallback('restored', 'restore');
+
+                    expect(control.value).to.equal('restored');
+                });
+
+                it('should normalize a removed value attribute to an empty string issue #501', async function () {
+                    const htmlTAG = 'monster-customcontrol-value-removal';
+
+                    class ValueRemovalComponent 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;
+                            this.lastAssignedValue = value;
+                        }
+                    }
+
+                    registerCustomElement(ValueRemovalComponent);
+                    const control = document.createElement(htmlTAG);
+                    document.body.appendChild(control);
+                    control.setAttribute('value', 'seed');
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+                    control.removeAttribute('value');
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+
+                    expect(control.lastAssignedValue).to.equal('');
+                    expect(control.value).to.equal('');
+                    control.remove();
+                });
+
+                it('should replay a pre-upgrade value once after assembly issue #501', async function () {
+                    const htmlTAG = 'monster-customcontrol-pre-upgrade';
+                    const control = document.createElement(htmlTAG);
+                    control.value = 'assigned-before-definition';
+                    document.body.appendChild(control);
+
+                    class PreUpgradeComponent 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;
+                            this.setterCalls = (this.setterCalls ?? 0) + 1;
+                        }
+                    }
+
+                    registerCustomElement(PreUpgradeComponent);
+                    await customElements.whenDefined(htmlTAG);
+                    await Promise.resolve();
+
+                    expect(control).to.be.instanceof(PreUpgradeComponent);
+                    expect(Object.prototype.hasOwnProperty.call(control, 'value')).to.be.false;
+                    expect(control.value).to.equal('assigned-before-definition');
+                    expect(control.setterCalls).to.equal(1);
+
+                    control.remove();
+                    document.body.appendChild(control);
+                    await Promise.resolve();
+                    expect(control.setterCalls).to.equal(1);
+                    control.remove();
+                });
+
+                it('should preserve native fieldset and explicit form lifecycle issue #500', async function () {
+                    if (window.navigator.userAgent.includes('jsdom')) {
+                        this.skip();
+                    }
+
+                    const htmlTAG = 'monster-customcontrol-native-lifecycle';
+
+                    class NativeLifecycleComponent 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 ?? '';
+                            this.setFormValue(this._value);
+                        }
+                    }
+
+                    registerCustomElement(NativeLifecycleComponent);
+
+                    const externalForm = document.createElement('form');
+                    externalForm.id = 'external-form-500';
+                    document.body.appendChild(externalForm);
+
+                    const externalControl = document.createElement(htmlTAG);
+                    externalControl.setAttribute('name', 'external');
+                    externalControl.setAttribute('form', externalForm.id);
+                    document.body.appendChild(externalControl);
+                    externalControl.value = 'submitted';
+
+                    expect(new FormData(externalForm).get('external')).to.equal('submitted');
+                    externalControl.remove();
+                    expect(externalControl.getAttribute('form')).to.equal(externalForm.id);
+                    document.body.appendChild(externalControl);
+                    expect(externalControl.form).to.equal(externalForm);
+                    expect(new FormData(externalForm).get('external')).to.equal('submitted');
+
+                    const nestedForm = document.createElement('form');
+                    const fieldset = document.createElement('fieldset');
+                    const nestedControl = document.createElement(htmlTAG);
+                    nestedControl.setAttribute('name', 'nested');
+                    fieldset.appendChild(nestedControl);
+                    nestedForm.appendChild(fieldset);
+                    document.body.appendChild(nestedForm);
+                    nestedControl.value = 'nested-value';
+
+                    fieldset.disabled = true;
+                    await Promise.resolve();
+                    expect(nestedControl.hasAttribute('disabled')).to.be.false;
+                    expect(new FormData(nestedForm).get('nested')).to.equal(null);
+
+                    fieldset.disabled = false;
+                    await Promise.resolve();
+                    expect(nestedControl.hasAttribute('disabled')).to.be.false;
+                    expect(new FormData(nestedForm).get('nested')).to.equal('nested-value');
+
+                    externalControl.remove();
+                    externalForm.remove();
+                    nestedForm.remove();
+                });
+
 
 	        });
 	    });
 
 });
-

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

@@ -154,6 +154,68 @@ describe('DOM', function () {
                 expect(control.getOption('test')).is.eql(3);
                 expect(control.hasAttribute('data-monster-error')).is.false;
             });
+
+            it('should resolve a changed script host attribute issue #506', function () {
+                const mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="call-back-host-a"></div>
+                    <div id="call-back-host-b"></div>
+                    <div id="container"></div>
+                `;
+                document.getElementById('call-back-host-a').resolveHost = () => 'a';
+                document.getElementById('call-back-host-b').resolveHost = () => 'b';
+
+                const control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', 'call-back-host-a');
+                document.getElementById('container').appendChild(control);
+
+                expect(control.callCallback('resolveHost', [])).to.equal('a');
+                control.setAttribute('data-monster-script-host', 'call-back-host-b');
+                expect(control.callCallback('resolveHost', [])).to.equal('b');
+            });
+
+            it('should resolve a replacement host with the same id issue #506', function () {
+                const mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="replaceable-host"></div>
+                    <div id="container"></div>
+                `;
+                const original = document.getElementById('replaceable-host');
+                original.resolveHost = () => 'original';
+                const control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', 'replaceable-host');
+                document.getElementById('container').appendChild(control);
+                expect(control.callCallback('resolveHost', [])).to.equal('original');
+
+                const replacement = document.createElement('div');
+                replacement.id = 'replaceable-host';
+                replacement.resolveHost = () => 'replacement';
+                original.replaceWith(replacement);
+
+                expect(control.callCallback('resolveHost', [])).to.equal('replacement');
+            });
+
+            it('should resolve the current ancestor after reparenting issue #506', function () {
+                const mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="ancestor-host"><div id="first-container"></div></div>
+                    <div><div id="second-container"></div></div>
+                `;
+                const firstHost = document.getElementById('ancestor-host');
+                firstHost.resolveHost = () => 'first';
+                const control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', 'ancestor-host');
+                document.getElementById('first-container').appendChild(control);
+                expect(control.callCallback('resolveHost', [])).to.equal('first');
+
+                firstHost.removeAttribute('id');
+                const secondHost = document.getElementById('second-container').parentElement;
+                secondHost.id = 'ancestor-host';
+                secondHost.resolveHost = () => 'second';
+                document.getElementById('second-container').appendChild(control);
+
+                expect(control.callCallback('resolveHost', [])).to.equal('second');
+            });
         })
 
     });