@schukai/monster 4.148.1 → 4.148.3

package/test/cases/components/form/non-value-form-association.mjs

@@ -0,0 +1,53 @@
+'use strict';
+
+import { expect } from 'chai';
+import { initJSDOM } from '../../../util/jsdom.mjs';
+
+describe('non-value component form association issue #503', function () {
+    let CustomControl;
+    let components;
+
+    before(async function () {
+        await initJSDOM({});
+        await import('element-internals-polyfill');
+        ({ CustomControl } = await import('../../../../source/dom/customcontrol.mjs'));
+        const [{ State }, { CartControl }, { BuyBox }] = await Promise.all([
+            import('../../../../source/components/state/state.mjs'),
+            import('../../../../source/components/form/cart-control.mjs'),
+            import('../../../../source/components/form/buy-box.mjs'),
+        ]);
+        components = [State, CartControl, BuyBox];
+    });
+
+    afterEach(function () {
+        document.getElementById('mocks').innerHTML = '';
+    });
+
+    it('should opt non-value components out of form association', function () {
+        for (const Component of components) {
+            expect(Component.formAssociated, Component.getTag()).to.equal(false);
+        }
+    });
+
+    it('should preserve the public CustomControl inheritance', function () {
+        for (const Component of components) {
+            const control = document.createElement(Component.getTag());
+            expect(control, Component.getTag()).to.be.instanceof(CustomControl);
+        }
+    });
+
+    it('should not contribute values or throw during form reset', function () {
+        for (const Component of components) {
+            const form = document.createElement('form');
+            const control = document.createElement(Component.getTag());
+            control.setAttribute('name', Component.getTag());
+            form.appendChild(control);
+            document.getElementById('mocks').appendChild(form);
+
+            expect(() => form.reset()).not.to.throw();
+            expect(new window.FormData(form).get(Component.getTag())).to.equal(null);
+
+            form.remove();
+        }
+    });
+});

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/data/pathfinder.mjs

@@ -5,6 +5,111 @@ import {Pathfinder} from "../../../source/data/pathfinder.mjs";
 
 describe('Pathfinder', function () {
 
+    describe('mutation path security issue #492', function () {
+        const probe = 'monsterPathfinderSecurityProbe';
+
+        afterEach(function () {
+            delete Object.prototype[probe];
+        });
+
+        [
+            `__proto__.${probe}`,
+            `constructor.prototype.${probe}`,
+            ['__proto__', probe],
+            ['constructor', 'prototype', probe],
+        ].forEach(function (path) {
+            it(`setVia(${JSON.stringify(path)}) should reject unsafe mutation paths`, function () {
+                try {
+                    expect(() => new Pathfinder({}).setVia(path, 'polluted')).to.throw(Error);
+                    expect(Object.prototype).to.not.have.own.property(probe);
+                } finally {
+                    delete Object.prototype[probe];
+                }
+            });
+        });
+
+        it('deleteVia() should not cross a prototype boundary', function () {
+            Object.defineProperty(Object.prototype, probe, {
+                configurable: true,
+                value: 'preserved',
+                writable: true,
+            });
+
+            try {
+                expect(() => new Pathfinder({}).deleteVia(`__proto__.${probe}`)).to.throw(Error);
+                expect(Object.prototype[probe]).to.equal('preserved');
+            } finally {
+                delete Object.prototype[probe];
+            }
+        });
+
+        it('setVia() should keep safe paths working', function () {
+            const subject = {};
+            new Pathfinder(subject).setVia('safe.nested.value', true);
+            expect(subject).to.deep.equal({safe: {nested: {value: true}}});
+        });
+    });
+
+    describe('array and collection path contracts issue #493', function () {
+        it('getVia() should accept an array path without mutating it', function () {
+            const path = ['a', 'b'];
+            const subject = {a: {b: 4}};
+
+            expect(new Pathfinder(subject).getVia(path)).to.equal(4);
+            expect(path).to.deep.equal(['a', 'b']);
+        });
+
+        it('getVia([]) should return the root subject', function () {
+            const subject = {a: true};
+            expect(new Pathfinder(subject).getVia([])).to.equal(subject);
+        });
+
+        it('setVia() should not mutate an array path', function () {
+            const path = ['a', 'b'];
+            const subject = {};
+
+            new Pathfinder(subject).setVia(path, 4);
+
+            expect(subject).to.deep.equal({a: {b: 4}});
+            expect(path).to.deep.equal(['a', 'b']);
+        });
+
+        it('deleteVia() should not mutate an array path', function () {
+            const path = ['a', 'b'];
+            const subject = {a: {b: 4, c: 5}};
+
+            new Pathfinder(subject).deleteVia(path);
+
+            expect(subject).to.deep.equal({a: {c: 5}});
+            expect(path).to.deep.equal(['a', 'b']);
+        });
+
+        it('empty mutation paths should be no-ops', function () {
+            const setPath = [];
+            const deletePath = [];
+            const subject = {a: true};
+            const pathfinder = new Pathfinder(subject);
+
+            pathfinder.setVia(setPath, false).deleteVia(deletePath);
+
+            expect(subject).to.deep.equal({a: true});
+            expect(setPath).to.deep.equal([]);
+            expect(deletePath).to.deep.equal([]);
+        });
+
+        it('setVia() should add values to a Set', function () {
+            const values = new Set(['first']);
+            new Pathfinder({values}).setVia('values.next', 'second');
+            expect([...values]).to.deep.equal(['first', 'second']);
+        });
+
+        it('setVia() should reject WeakSet writes explicitly', function () {
+            const values = new WeakSet();
+            expect(() => new Pathfinder({values}).setVia('values.next', {}))
+                .to.throw(Error, 'unsupported action for this data type in setValueViaPath');
+        });
+    });
+
     let convertMapResult = function (r) {
         if (r instanceof Map) {
             r = Object.fromEntries(r);
@@ -419,4 +524,3 @@ describe('Pathfinder', function () {
 
     });
 });
-

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

package/test/cases/dom/customelement.mjs

@@ -280,6 +280,25 @@ describe('DOM', function () {
                 expect(monster.getOption('demotest')).is.eql(1425);
 
             });
+
+            it('should not pollute Object.prototype through data-monster-options issue #499', function () {
+                delete Object.prototype.monsterCustomElementPolluted;
+
+                try {
+                    const element = document.createElement('monster-testclass2');
+                    element.setAttribute(
+                        'data-monster-options',
+                        '{"__proto__":{"monsterCustomElementPolluted":"yes"},"demotest":42}',
+                    );
+                    document.getElementById('test1').appendChild(element);
+
+                    expect(Object.prototype.monsterCustomElementPolluted).to.equal(undefined);
+                    expect(({}).monsterCustomElementPolluted).to.equal(undefined);
+                    expect(element.getOption('demotest')).to.equal(42);
+                } finally {
+                    delete Object.prototype.monsterCustomElementPolluted;
+                }
+            });
         });
 
         describe('create', function () {
@@ -402,6 +421,50 @@ describe('DOM', function () {
                     }
                 }, 10);
             });
+
+            it('should keep runtime option attributes typed and reversible issue #504', async function () {
+                const htmlTAG = 'monster-testclass-runtime-options';
+
+                class RuntimeOptionsComponent extends CustomElement {
+                    static getTag() {
+                        return htmlTAG;
+                    }
+
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            shadowMode: false,
+                            count: 1,
+                            config: {
+                                enabled: true,
+                            },
+                        });
+                    }
+                }
+
+                registerCustomElement(RuntimeOptionsComponent);
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+
+                element.setOption('count', null);
+                element.setAttribute('data-monster-option-count', '5');
+                element.setOption('config', null);
+                element.setAttribute(
+                    'data-monster-option-config',
+                    '{"enabled":false}',
+                );
+                await new Promise((resolve) => setTimeout(resolve, 30));
+
+                expect(element.getOption('count')).to.equal(5);
+                expect(typeof element.getOption('count')).to.equal('number');
+                expect(element.getOption('config')).to.deep.equal({ enabled: false });
+
+                element.removeAttribute('data-monster-option-count');
+                element.removeAttribute('data-monster-option-config');
+                await new Promise((resolve) => setTimeout(resolve, 30));
+
+                expect(element.getOption('count')).to.equal(1);
+                expect(element.getOption('config')).to.deep.equal({ enabled: true });
+            });
         });
 
         describe('Options change', function () {
@@ -796,7 +859,7 @@ describe('DOM', function () {
 
 	        })
 
-	        describe('mutation observer lifecycle', function () {
+        describe('mutation observer lifecycle', function () {
 	            it('should not rerun linked updaters after disconnect', function (done) {
 	                let mocks = document.getElementById('mocks');
 	                mocks.innerHTML = `<monster-testclass-mutation id="mutation-case"></monster-testclass-mutation>`;
@@ -843,7 +906,65 @@ describe('DOM', function () {
 	                        done(e);
 	                    }
 	                }, 20);
-	            })
+        })
+
+        describe('dynamic disabled synchronization issue #505', function () {
+            it('should synchronize late controls and preserve child-owned disabled state', async function () {
+                const htmlTAG = 'monster-testclass-dynamic-disabled';
+
+                class DynamicDisabledComponent extends CustomElement {
+                    static getTag() {
+                        return htmlTAG;
+                    }
+
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            templates: {
+                                main: '<input id="initial"><slot></slot>',
+                            },
+                        });
+                    }
+                }
+
+                registerCustomElement(DynamicDisabledComponent);
+                const element = document.createElement(htmlTAG);
+                const childOwned = document.createElement('input');
+                childOwned.setAttribute('disabled', '');
+                element.appendChild(childOwned);
+                document.getElementById('test1').appendChild(element);
+
+                const initial = element.shadowRoot.querySelector('#initial');
+                element.setOption('disabled', true);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+                expect(initial.disabled).to.equal(true);
+                expect(childOwned.disabled).to.equal(true);
+
+                const lateSlotted = document.createElement('input');
+                element.appendChild(lateSlotted);
+                const lateShadow = document.createElement('input');
+                element.shadowRoot.appendChild(lateShadow);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(lateSlotted.disabled).to.equal(true);
+                expect(lateShadow.disabled).to.equal(true);
+
+                lateSlotted.remove();
+                await new Promise((resolve) => setTimeout(resolve, 20));
+                expect(lateSlotted.disabled).to.equal(false);
+
+                element.appendChild(lateSlotted);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+                expect(lateSlotted.disabled).to.equal(true);
+
+                element.setOption('disabled', false);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(initial.disabled).to.equal(false);
+                expect(lateSlotted.disabled).to.equal(false);
+                expect(lateShadow.disabled).to.equal(false);
+                expect(childOwned.disabled).to.equal(true);
+            });
+        });
 	        })
 
 	    });