@schukai/monster 4.136.3 → 4.136.5

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

@@ -33,7 +33,13 @@ let html2 = `
     </div>
 `;
 
-let Select, fetchReference;
+let Select,
+    getDefaultSelectPopperPositionProfile,
+    resolveSelectListDimension,
+    resolveSelectPopperWidthConstraints,
+    resolveSelectVisibleRect,
+    resolveSelectViewportMetrics,
+    fetchReference;
 
 describe('Select', function () {
 
@@ -50,6 +56,11 @@ describe('Select', function () {
 
             import("../../../../source/components/form/select.mjs").then((m) => {
                 Select = m['Select'];
+                getDefaultSelectPopperPositionProfile = m['getDefaultSelectPopperPositionProfile'];
+                resolveSelectListDimension = m['resolveSelectListDimension'];
+                resolveSelectPopperWidthConstraints = m['resolveSelectPopperWidthConstraints'];
+                resolveSelectVisibleRect = m['resolveSelectVisibleRect'];
+                resolveSelectViewportMetrics = m['resolveSelectViewportMetrics'];
                 done()
             }).catch(e => done(e))
 
@@ -185,6 +196,189 @@ describe('Select', function () {
 
     });
 
+    describe('Popper sizing', function () {
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        });
+
+        it('should allow the popper to become wider than a narrow control', function (done) {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            control.getBoundingClientRect = () => ({
+                width: 120,
+                height: 36,
+                top: 100,
+                left: 40,
+                right: 160,
+                bottom: 136,
+                x: 40,
+                y: 100
+            });
+
+            setTimeout(() => {
+                try {
+                    shadowRoot.querySelector('[data-monster-role=container]').click();
+                    setTimeout(() => {
+                        try {
+                            expect(popper.style.minWidth).to.equal('');
+                            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
+                            done();
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 80);
+                } catch (e) {
+                    done(e);
+                }
+            }, 20);
+        });
+
+        it('should keep the option list height tight for short lists', function () {
+            const result = resolveSelectListDimension({
+                visibleOptionHeights: [28, 28],
+                maxVisibleOptions: 20,
+                availableHeight: 500,
+                padding: 0,
+                margin: 0
+            });
+
+            expect(result.desiredHeight).to.equal(56);
+            expect(result.maxHeight).to.equal(500);
+            expect(result.overflowY).to.equal('hidden');
+        });
+
+        it('should refresh the content max height when the available popper height grows again', function (done) {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+
+            select.setOption('options', Array.from({length: 24}, (_, index) => ({
+                label: `Option ${index + 1}`,
+                value: `${index + 1}`
+            })));
+
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+            const content = shadowRoot.querySelector('[part=content]');
+            const options = shadowRoot.querySelector('[data-monster-role=options]');
+
+            control.getBoundingClientRect = () => ({
+                width: 200,
+                height: 36,
+                top: 100,
+                left: 40,
+                right: 240,
+                bottom: 136,
+                x: 40,
+                y: 100
+            });
+
+            setTimeout(() => {
+                try {
+                    shadowRoot.querySelector('[data-monster-role=container]').click();
+                    setTimeout(() => {
+                        try {
+                            content.style.maxHeight = '20px';
+                            options.style.height = '20px';
+                            options.style.maxHeight = '20px';
+
+                            select.calcAndSetOptionsDimension();
+
+                            expect(parseFloat(content.style.maxHeight)).to.be.greaterThan(20);
+                            expect(content.style.maxHeight).to.equal(options.style.maxHeight);
+                            expect(parseFloat(popper.style.maxHeight)).to.be.at.least(parseFloat(content.style.maxHeight));
+                            done();
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 80);
+                } catch (e) {
+                    done(e);
+                }
+            }, 20);
+        });
+
+        it('should clamp preferred width to the visible viewport width', function () {
+            const result = resolveSelectPopperWidthConstraints({
+                controlWidth: 120,
+                availableWidth: 176
+            });
+
+            expect(result.preferredWidth).to.equal(240);
+            expect(result.maxWidth).to.equal(176);
+        });
+
+        it('should keep start placement while enabling cross-axis shifting', function () {
+            const result = getDefaultSelectPopperPositionProfile();
+
+            expect(result.placement).to.equal('bottom-start');
+            expect(result.middleware).to.deep.equal([
+                'flip',
+                'offset:4',
+                'shift:crossAxis',
+                'size'
+            ]);
+        });
+
+        it('should prefer the larger live viewport metrics after a resize', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 1400,
+                layoutHeight: 900,
+                visualWidth: 1024,
+                visualHeight: 700,
+                offsetLeft: 20,
+                offsetTop: 30,
+                padding: 12
+            });
+
+            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.padding).to.equal(12);
+        });
+
+        it('should intersect viewport and split container for the visible rect', function () {
+            const result = resolveSelectVisibleRect({
+                viewportMetrics: {
+                    width: 1400,
+                    height: 900,
+                    left: 0,
+                    top: 0,
+                    padding: 12
+                },
+                boundaryRect: {
+                    left: 100,
+                    top: 80,
+                    right: 620,
+                    bottom: 700
+                }
+            });
+
+            expect(result.left).to.equal(100);
+            expect(result.top).to.equal(80);
+            expect(result.right).to.equal(620);
+            expect(result.bottom).to.equal(700);
+            expect(result.width).to.equal(520);
+            expect(result.height).to.equal(620);
+        });
+    });
+
     describe('Remote filter pagination', function () {
         let requestCount = 0;
 
@@ -549,6 +743,46 @@ describe('Select', function () {
             }, 50);
         });
 
+        it('should not throw when IntersectionObserver is unavailable', function (done) {
+            this.timeout(2000);
+
+            let mocks = document.getElementById('mocks');
+            const savedIntersectionObserver = global.IntersectionObserver;
+            global.IntersectionObserver = undefined;
+            window.IntersectionObserver = undefined;
+            const failures = [];
+            const onError = (event) => {
+                failures.push(event?.error || event);
+            };
+            window.addEventListener('error', onError);
+
+            const select = document.createElement('monster-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');
+            select.setOption('selection', [{value: 'alpha'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    expect(failures).to.have.length(0);
+                } catch (e) {
+                    return done(e);
+                } finally {
+                    window.removeEventListener('error', onError);
+                    global.IntersectionObserver = savedIntersectionObserver;
+                    window.IntersectionObserver = savedIntersectionObserver;
+                }
+
+                done();
+            }, 250);
+        });
+
     });
 
 

package/test/util/intersection-mock.mjs

@@ -14,6 +14,7 @@ export function setupIntersectionObserverMock(
     } = {}) {
 
     const savedImplementation = window.IntersectionObserver;
+    const savedGlobalImplementation = global.IntersectionObserver;
 
     let lastObject;
 
@@ -61,9 +62,10 @@ export function setupIntersectionObserverMock(
     return {
         restore: function () {
             window.IntersectionObserver = savedImplementation;
+            global.IntersectionObserver = savedGlobalImplementation;
         },
         getInstance: function () {
             return lastObject;
         }
     }
-}
+}