@schukai/monster 4.148.2 → 4.148.3

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

package/test/cases/dom/util/extract-keys.mjs

@@ -19,6 +19,7 @@ describe('extractKeys', () => {
         expect(result.get('first-name')).to.equal('firstName');
         expect(result.get('lastname')).to.equal('lastName');
         expect(result.get('last-name')).to.equal('lastName');
+        expect(result.get('address')).to.equal('address');
         expect(result.get('address-street')).to.equal('address.street');
         expect(result.get('address-city')).to.equal('address.city');
     });
@@ -67,9 +68,22 @@ describe('extractKeys', () => {
 
         const result = extractKeys(obj);
 
+        expect(result.get('popper')).to.equal('popper');
         expect(result.get('popper-contentoverflow')).to.equal('popper.contentOverflow');
         expect(result.get('popper-content-overflow')).to.equal('popper.contentOverflow');
+        expect(result.get('message-width')).to.equal('message.width');
         expect(result.get('message-width-viewportratio')).to.equal('message.width.viewportRatio');
         expect(result.get('message-width-viewport-ratio')).to.equal('message.width.viewportRatio');
     });
+
+    it('should ignore inherited option keys issue #504', () => {
+        const obj = Object.assign(Object.create({ inherited: true }), {
+            own: true,
+        });
+
+        const result = extractKeys(obj);
+
+        expect(result.get('own')).to.equal('own');
+        expect(result.has('inherited')).to.equal(false);
+    });
 });

package/test/cases/dom/util/init-options-from-attributes.mjs

@@ -199,4 +199,22 @@ describe('initOptionsFromAttributes', () => {
         expect(result.popper.contentOverflow).to.equal('visible');
     });
 
+    [
+        Object.assign(Object.create(null), {
+            url: (value) => `https://${value}.example`,
+        }),
+        {
+            hasOwnProperty: true,
+            url: (value) => `https://${value}.example`,
+        },
+    ].forEach((mapping) => {
+        it('should support mappings without a callable hasOwnProperty issue #504', () => {
+            element.setAttribute('data-monster-option-url', 'monster');
+
+            const result = initOptionsFromAttributes(element, options, mapping);
+
+            expect(result.url).to.equal('https://monster.example');
+        });
+    });
+
 });

package/test/cases/dom/util/set-option-from-attribute.mjs

@@ -0,0 +1,151 @@
+'use strict';
+
+import { expect } from 'chai';
+import { initJSDOM } from '../../../util/jsdom.mjs';
+
+describe('setOptionFromAttribute issue #504', function () {
+    let element;
+    let setOptionFromAttribute;
+
+    before(async function () {
+        await initJSDOM();
+        ({ setOptionFromAttribute } = await import('../../../../source/dom/util/set-option-from-attribute.mjs'));
+    });
+
+    beforeEach(function () {
+        element = document.createElement('div');
+    });
+
+    it('should use the default schema when the current number is null', function () {
+        const options = { count: null };
+        const defaults = { count: 1 };
+        element.setAttribute('data-monster-option-count', '5');
+
+        setOptionFromAttribute(
+            element,
+            'data-monster-option-count',
+            options,
+            {},
+            'data-monster-option-',
+            defaults,
+        );
+
+        expect(options.count).to.equal(5);
+        expect(typeof options.count).to.equal('number');
+    });
+
+    it('should use the default schema when the current object is null', function () {
+        const options = { config: null };
+        const defaults = { config: { enabled: true } };
+        element.setAttribute('data-monster-option-config', '{"enabled":false}');
+
+        setOptionFromAttribute(
+            element,
+            'data-monster-option-config',
+            options,
+            {},
+            'data-monster-option-',
+            defaults,
+        );
+
+        expect(options.config).to.deep.equal({ enabled: false });
+    });
+
+    it('should restore the default when the attribute is removed', function () {
+        const options = { count: 5 };
+        const defaults = { count: 1 };
+
+        setOptionFromAttribute(
+            element,
+            'data-monster-option-count',
+            options,
+            {},
+            'data-monster-option-',
+            defaults,
+        );
+
+        expect(options.count).to.equal(1);
+    });
+
+    it('should preserve all declared default types and nested kebab-case paths', function () {
+        const options = {
+            enabled: null,
+            label: null,
+            tags: null,
+            popper: {
+                contentOverflow: null,
+            },
+        };
+        const defaults = {
+            enabled: false,
+            label: '',
+            tags: [],
+            popper: {
+                contentOverflow: 'both',
+            },
+        };
+        const attributes = {
+            'data-monster-option-enabled': 'true',
+            'data-monster-option-label': 'monster',
+            'data-monster-option-tags': 'one::two',
+            'data-monster-option-popper-content-overflow': 'horizontal',
+        };
+
+        for (const [name, value] of Object.entries(attributes)) {
+            element.setAttribute(name, value);
+            setOptionFromAttribute(
+                element,
+                name,
+                options,
+                {},
+                'data-monster-option-',
+                defaults,
+            );
+        }
+
+        expect(options).to.deep.equal({
+            enabled: true,
+            label: 'monster',
+            tags: ['one', 'two'],
+            popper: {
+                contentOverflow: 'horizontal',
+            },
+        });
+    });
+
+    it('should clone object defaults when an attribute is removed', function () {
+        const options = { config: { enabled: false } };
+        const defaults = { config: { enabled: true } };
+
+        setOptionFromAttribute(
+            element,
+            'data-monster-option-config',
+            options,
+            {},
+            'data-monster-option-',
+            defaults,
+        );
+        options.config.enabled = false;
+
+        expect(defaults.config.enabled).to.equal(true);
+    });
+
+    [
+        Object.assign(Object.create(null), {
+            count: (value) => Number(value) + 1,
+        }),
+        {
+            hasOwnProperty: true,
+            count: (value) => Number(value) + 1,
+        },
+    ].forEach((mapping) => {
+        it('should support mappings without a callable hasOwnProperty', function () {
+            const options = { count: 1 };
+            element.setAttribute('data-monster-option-count', '5');
+
+            setOptionFromAttribute(element, 'data-monster-option-count', options, mapping);
+
+            expect(options.count).to.equal(6);
+        });
+    });
+});