@schukai/monster 4.148.0 → 4.148.2

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

@@ -86,6 +86,17 @@ function waitForCondition(check, {timeout = 4000, interval = 25} = {}) {
     });
 }
 
+function configureRemotePaginatedSelect(select) {
+    select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+    select.setOption('filter.mode', 'remote');
+    select.setOption('mapping.selector', 'items.*');
+    select.setOption('mapping.labelTemplate', '${name}');
+    select.setOption('mapping.valueTemplate', '${id}');
+    select.setOption('mapping.total', 'pagination.total');
+    select.setOption('mapping.currentPage', 'pagination.page');
+    select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+}
+
 let Select,
     SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
@@ -397,6 +408,46 @@ describe('Select', function () {
         }
     });
 
+    it('should keep the floating layout queue usable after cancelling a running reentrant job', async function () {
+        const cancelledPopper = document.createElement('div');
+        const nextPopper = document.createElement('div');
+        const releasePosition = createDeferred();
+        let positionStarted = false;
+        let positionFinished = false;
+        let nextMutationCount = 0;
+
+        enqueueFloatingLayout({
+            popperElement: cancelledPopper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            position: async () => {
+                positionStarted = true;
+                await releasePosition.promise;
+                await enqueueFloatingLayout({
+                    popperElement: cancelledPopper,
+                    reason: FLOATING_LAYOUT_REASON.SETTLE
+                });
+                positionFinished = true;
+            }
+        });
+
+        await waitForCondition(() => positionStarted === true);
+        cancelFloatingLayout(cancelledPopper);
+        releasePosition.resolve();
+        await waitForCondition(() => positionFinished === true);
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        enqueueFloatingLayout({
+            popperElement: nextPopper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            mutate: () => {
+                nextMutationCount += 1;
+            }
+        });
+        await flushFloatingLayoutQueueForTests();
+
+        expect(nextMutationCount).to.equal(1);
+    });
+
     it('should flush reentrant floating layout queue jobs through the watchdog', async function () {
         const originalRequestAnimationFrame = global.requestAnimationFrame;
         const originalCancelAnimationFrame = global.cancelAnimationFrame;
@@ -738,7 +789,7 @@ describe('Select', function () {
             expect(popper.style.display).to.equal('block');
         });
 
-        it('should allow the popper to become wider than a narrow control', function (done) {
+        it('should allow the popper to become wider than a narrow control', async function () {
             const mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
 
@@ -764,23 +815,12 @@ describe('Select', function () {
                 y: 100
             });
 
-            setTimeout(() => {
-                try {
-                    shadowRoot.querySelector('[data-monster-role=container]').click();
-                    setTimeout(() => {
-                        try {
-                            expect(popper.style.minWidth).to.equal('240px');
-                            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
-                            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
-                            done();
-                        } catch (e) {
-                            done(e);
-                        }
-                    }, 80);
-                } catch (e) {
-                    done(e);
-                }
-            }, 20);
+            await new Promise(resolve => setTimeout(resolve, 20));
+            shadowRoot.querySelector('[data-monster-role=container]').click();
+            await waitForCondition(() => popper.style.minWidth === '240px');
+
+            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
+            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
         });
 
         it('should use fixed positioning inside a control bar', function (done) {
@@ -1136,12 +1176,48 @@ describe('Select', function () {
             ]);
         });
 
-        it('should prefer the larger live viewport metrics after a resize', function () {
+        it('should use the reduced visual viewport while a soft keyboard is open', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 390,
+                layoutHeight: 844,
+                visualWidth: 390,
+                visualHeight: 480,
+                offsetLeft: 0,
+                offsetTop: 0,
+                padding: 12
+            });
+
+            expect(result.width).to.equal(390);
+            expect(result.height).to.equal(480);
+            expect(result.left).to.equal(0);
+            expect(result.top).to.equal(0);
+            expect(result.padding).to.equal(12);
+        });
+
+        it('should preserve visual viewport offsets for zoomed mobile layouts', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 1200,
+                layoutHeight: 900,
+                visualWidth: 600,
+                visualHeight: 450,
+                offsetLeft: 20,
+                offsetTop: 30,
+                padding: 12
+            });
+
+            expect(result.width).to.equal(600);
+            expect(result.height).to.equal(450);
+            expect(result.left).to.equal(20);
+            expect(result.top).to.equal(30);
+            expect(result.padding).to.equal(12);
+        });
+
+        it('should fall back to layout viewport metrics without a visual viewport', function () {
             const result = resolveSelectViewportMetrics({
                 layoutWidth: 1400,
                 layoutHeight: 900,
-                visualWidth: 1024,
-                visualHeight: 700,
+                visualWidth: 0,
+                visualHeight: 0,
                 offsetLeft: 20,
                 offsetTop: 30,
                 padding: 12
@@ -1149,8 +1225,8 @@ describe('Select', function () {
 
             expect(result.width).to.equal(1400);
             expect(result.height).to.equal(900);
-            expect(result.left).to.equal(20);
-            expect(result.top).to.equal(30);
+            expect(result.left).to.equal(0);
+            expect(result.top).to.equal(0);
             expect(result.padding).to.equal(12);
         });
 
@@ -1487,6 +1563,142 @@ describe('Select', function () {
                     .catch((e) => done(e));
             }, 50);
         });
+
+        it('should ignore a remote page response that settles after reset', async function () {
+            this.timeout(5000);
+
+            const deferredResponse = createDeferred();
+            let requestStarted = false;
+            global['fetch'] = function () {
+                requestStarted = true;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request = select.fetch('https://example.com/items?filter=old&page=3');
+            await waitForCondition(() => requestStarted === true);
+
+            select.reset();
+            await waitForCondition(() => {
+                return select.getOption('options').length === 0 && select.getOption('total') === null;
+            });
+
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'old-3', name: 'Old page 3'}],
+                    pagination: {
+                        total: 9,
+                        page: 3,
+                        perPage: 1
+                    }
+                })
+            );
+            await request;
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+            expect(pagination.style.display).to.equal('none');
+            expect(pagination.getOption('currentPage')).to.equal(null);
+            expect(pagination.getOption('pages')).to.equal(null);
+        });
+
+        it('should ignore a remote page response after disconnect and reconnect', async function () {
+            this.timeout(5000);
+
+            const deferredResponse = createDeferred();
+            let requestStarted = false;
+            global['fetch'] = function () {
+                requestStarted = true;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request = select.fetch('https://example.com/items?filter=old&page=2');
+            await waitForCondition(() => requestStarted === true);
+
+            select.remove();
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'old-2', name: 'Old page 2'}],
+                    pagination: {
+                        total: 4,
+                        page: 2,
+                        perPage: 1
+                    }
+                })
+            );
+            await request;
+            mocks.appendChild(select);
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+            expect(pagination.style.display).to.equal('none');
+            expect(pagination.getOption('currentPage')).to.equal(null);
+            expect(pagination.getOption('pages')).to.equal(null);
+        });
+
+        it('should keep the newest remote page when responses settle out of order', async function () {
+            this.timeout(5000);
+
+            const page2Response = createDeferred();
+            const page3Response = createDeferred();
+            const requests = [];
+            global['fetch'] = function (url) {
+                const requestUrl = String(url);
+                requests.push(requestUrl);
+                return requestUrl.includes('page=2') ? page2Response.promise : page3Response.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request2 = select.fetch('https://example.com/items?filter=all&page=2');
+            const request3 = select.fetch('https://example.com/items?filter=all&page=3');
+            await waitForCondition(() => requests.length === 2);
+
+            page3Response.resolve(
+                await createJsonResponse({
+                    items: [{id: 'page-3', name: 'Page 3'}],
+                    pagination: {
+                        total: 3,
+                        page: 3,
+                        perPage: 1
+                    }
+                })
+            );
+            await request3;
+
+            page2Response.resolve(
+                await createJsonResponse({
+                    items: [{id: 'page-2', name: 'Page 2'}],
+                    pagination: {
+                        total: 3,
+                        page: 2,
+                        perPage: 1
+                    }
+                })
+            );
+            await request2;
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['page-3']);
+            expect(pagination.getOption('currentPage')).to.equal(3);
+            expect(pagination.getOption('pages')).to.equal(3);
+        });
     });
 
     describe('document.createElement()', function () {
@@ -2488,6 +2700,47 @@ describe('Select', function () {
             expect(requests).to.have.length(1);
         });
 
+        it('should cancel a pending remote filter request on reset', async function () {
+            this.timeout(5000);
+
+            const mocks = document.getElementById('mocks');
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            select.setOption('filter.position', 'popper');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            filterInput.value = 'alpha';
+            filterInput.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+            select.reset();
+
+            await new Promise(resolve => setTimeout(resolve, 260));
+
+            expect(requests).to.deep.equal([]);
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+        });
+
         it('should keep unresolved lookup values visible and mark their badge', function (done) {
             this.timeout(3000);
 

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 () {
 
     });
 });
-