@schukai/monster 4.136.4 → 4.136.6

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

@@ -33,7 +33,27 @@ let html2 = `
     </div>
 `;
 
-let Select, fetchReference;
+function createJsonResponse(data, status = 200) {
+    let headers = new Map();
+    headers.set('content-type', 'application/json');
+
+    return Promise.resolve({
+        ok: status >= 200 && status < 300,
+        status,
+        headers,
+        text: function () {
+            return Promise.resolve(JSON.stringify(data));
+        }
+    });
+}
+
+let Select,
+    getDefaultSelectPopperPositionProfile,
+    resolveSelectListDimension,
+    resolveSelectPopperWidthConstraints,
+    resolveSelectVisibleRect,
+    resolveSelectViewportMetrics,
+    fetchReference;
 
 describe('Select', function () {
 
@@ -50,6 +70,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 +210,191 @@ describe('Select', function () {
 
     });
 
+    describe('Popper sizing', function () {
+        this.timeout(5000);
+
+        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;
 
@@ -528,25 +738,286 @@ describe('Select', function () {
 
             setTimeout(() => {
                 try {
-                    const observer = mockIntersectionObserver.getInstance();
-                    observer.enterNode();
+                    expect(lookupCount).to.equal(0);
                 } catch (e) {
                     mockIntersectionObserver.restore();
                     return done(e);
                 }
 
+                mockIntersectionObserver.restore();
+                done();
+            }, 150);
+        });
+
+        it('should not refetch after selecting an already loaded remote option', function (done) {
+            this.timeout(3000);
+
+            let 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');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.defaultValue', '*');
+            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');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                select.fetch('https://example.com/items?filter=*&page=1')
+                    .then(() => {
+                        try {
+                            expect(requests).to.deep.equal([
+                                'https://example.com/items?filter=*&page=1'
+                            ]);
+
+                            select.value = 'alpha';
+                        } catch (e) {
+                            return done(e);
+                        }
+
+                        setTimeout(() => {
+                            try {
+                                expect(requests).to.deep.equal([
+                                    'https://example.com/items?filter=*&page=1'
+                                ]);
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            done();
+                        }, 200);
+                    })
+                    .catch((e) => done(e));
+            }, 50);
+        });
+
+        it('should reuse defaultOptionsUrl after clearing the filter and reopening', function (done) {
+            this.timeout(5000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+
+            global['fetch'] = function (url) {
+                const requestUrl = String(url);
+                requests.push(requestUrl);
+
+                if (requestUrl.indexOf('/defaults') !== -1) {
+                    return createJsonResponse({
+                        items: [
+                            {id: 'seed', name: 'Seed'}
+                        ],
+                        pagination: {
+                            total: 1,
+                            page: 1,
+                            perPage: 1
+                        }
+                    });
+                }
+
+                return createJsonResponse({
+                    items: [
+                        {id: 'match', name: 'Match'}
+                    ],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            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('filter.defaultOptionsUrl', 'https://example.com/defaults?page={page}');
+            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');
+            mocks.appendChild(select);
+
+            const dispatchFilterKey = (input, code, key) => {
+                input.dispatchEvent(new KeyboardEvent('keydown', {
+                    bubbles: true,
+                    composed: true,
+                    code,
+                    key
+                }));
+            };
+
+            setTimeout(() => {
+                let container;
+                let filterInput;
+
+                try {
+                    container = select.shadowRoot.querySelector('[data-monster-role=container]');
+                    filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+                    container.click();
+                } catch (e) {
+                    return done(e);
+                }
+
                 setTimeout(() => {
                     try {
-                        expect(lookupCount).to.equal(0);
+                        expect(requests[0]).to.equal('https://example.com/defaults?page=1');
+
+                        filterInput.value = 'alpha';
+                        dispatchFilterKey(filterInput, 'KeyA', 'a');
+                    } catch (e) {
+                        return done(e);
+                    }
+
+                    setTimeout(() => {
+                        try {
+                            expect(requests[1]).to.equal('https://example.com/items?filter=alpha&page=1');
+
+                            filterInput.value = '';
+                            dispatchFilterKey(filterInput, 'Backspace', 'Backspace');
+                        } catch (e) {
+                            return done(e);
+                        }
+
+                        setTimeout(() => {
+                            try {
+                                expect(requests[2]).to.equal('https://example.com/defaults?page=1');
+
+                                container.click();
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            setTimeout(() => {
+                                try {
+                                    container.click();
+                                } catch (e) {
+                                    return done(e);
+                                }
+
+                                setTimeout(() => {
+                                    try {
+                                        expect(requests[3]).to.equal('https://example.com/defaults?page=1');
+                                    } catch (e) {
+                                        return done(e);
+                                    }
+
+                                    done();
+                                }, 250);
+                            }, 50);
+                        }, 300);
+                    }, 300);
+                }, 250);
+            }, 50);
+        });
+
+        it('should keep unresolved lookup values visible and mark their badge', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: 'missing-key'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                    const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                    expect(badge).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel.textContent.trim()).to.equal('missing-key');
+                    expect(badge.className).to.contain('monster-badge-warning');
+                    expect(badge.className).to.not.contain('monster-badge-primary');
+                    expect(badge.getAttribute('data-monster-unresolved')).to.equal('true');
+                    expect(badgeLabel.textContent).to.not.contain(select.getOption('labels.cannot-be-loaded'));
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 250);
+        });
+
+        it('should clear the unresolved badge state once a local option can resolve the value', function (done) {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: 'missing-key'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                select.setOption('options', [{label: 'Resolved Label', value: 'missing-key'}]);
+                select.value = 'missing-key';
+
+                setTimeout(() => {
+                    try {
+                        const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                        const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                        expect(badge).to.be.instanceof(HTMLDivElement);
+                        expect(badgeLabel.textContent.trim()).to.equal('Resolved Label');
+                        expect(badge.className).to.contain('monster-badge-primary');
+                        expect(badge.className).to.not.contain('monster-badge-warning');
+                        expect(badge.getAttribute('data-monster-unresolved')).to.not.equal('true');
                     } catch (e) {
-                        mockIntersectionObserver.restore();
                         return done(e);
                     }
 
-                    mockIntersectionObserver.restore();
                     done();
                 }, 150);
-            }, 50);
+            }, 250);
         });
 
         it('should not throw when IntersectionObserver is unavailable', function (done) {