@schukai/monster 4.111.0 → 4.113.0

package/source/monster.mjs

@@ -29,6 +29,7 @@ export * from "./components/layout/width-toggle.mjs";
 export * from "./components/layout/board.mjs";
 export * from "./components/layout/panel.mjs";
 export * from "./components/layout/details.mjs";
+export * from "./components/layout/vertical-tabs.mjs";
 export * from "./components/layout/slider.mjs";
 export * from "./components/content/fetch-box.mjs";
 export * from "./components/content/viewer.mjs";
@@ -73,6 +74,7 @@ export * from "./components/form/action-button.mjs";
 export * from "./components/form/form.mjs";
 export * from "./components/form/repeat-field-set.mjs";
 export * from "./components/form/api-button.mjs";
+export * from "./components/form/select-link.mjs";
 export * from "./components/form/digits.mjs";
 export * from "./components/form/tree-select.mjs";
 export * from "./components/form/popper-button.mjs";

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

@@ -184,6 +184,122 @@ describe('Select', function () {
 
     });
 
+    describe('Remote filter pagination', function () {
+        let requestCount = 0;
+
+        beforeEach((done) => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                let headers = new Map;
+                headers.set('content-type', 'application/json');
+
+                if (requestCount === 1) {
+                    return Promise.resolve({
+                        ok: true,
+                        status: 200,
+                        headers: headers,
+                        text: function () {
+                            return Promise.resolve(JSON.stringify({
+                                items: [
+                                    {id: 1, name: "Alpha"}
+                                ],
+                                pagination: {
+                                    total: 2,
+                                    page: 1,
+                                    perPage: 1
+                                }
+                            }));
+                        }
+                    });
+                }
+
+                return Promise.resolve({
+                    ok: false,
+                    status: 500,
+                    headers: headers,
+                    text: function () {
+                        return Promise.resolve(JSON.stringify({}));
+                    }
+                });
+            };
+
+            done();
+        });
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+            global['fetch'] = fetchReference;
+        });
+
+        it('should reset pagination and clear options on fetch error', function (done) {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            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');
+            mocks.appendChild(select);
+
+            const pagination = () => select.shadowRoot.querySelector('[data-monster-role=pagination]');
+
+            const triggerFilter = (value) => {
+                const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter]');
+                filterInput.value = value;
+                filterInput.dispatchEvent(new KeyboardEvent('keydown', {
+                    code: 'KeyA',
+                    bubbles: true
+                }));
+            };
+
+            select.addEventListener('monster-options-set', () => {
+                setTimeout(() => {
+                    try {
+                        const options = select.getOption('options');
+                        expect(options.length).to.equal(1);
+                        expect(pagination().getOption('currentPage')).to.equal(1);
+                        expect(pagination().getOption('pages')).to.equal(2);
+                        expect(pagination().getOption('objectsPerPage')).to.equal(1);
+
+                        triggerFilter('b');
+
+                        setTimeout(() => {
+                            try {
+                                const optionsAfterError = select.getOption('options');
+                                expect(optionsAfterError.length).to.equal(0);
+                                expect(pagination().getOption('currentPage')).to.equal(null);
+                                expect(pagination().getOption('pages')).to.equal(null);
+                                expect(pagination().getOption('objectsPerPage')).to.equal(null);
+                                expect(select.getOption('total')).to.equal(null);
+                                expect(select.getOption('messages.total')).to.equal("");
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            done();
+                        }, 500);
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 50);
+            }, {once: true});
+
+            setTimeout(() => {
+                triggerFilter('a');
+            }, 0);
+        });
+    });
+
     describe('document.createElement()', function () {
 
         afterEach(() => {