@schukai/monster 3.51.5 → 3.52.0

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

@@ -0,0 +1,216 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+let html2 = `
+    <div id="test2">
+    <monster-tree-select
+                        tabindex="0"
+                        data-monster-bind="path:values.checkbox"
+                        data-monster-options='{
+  "url": "mock-data.json",
+  "mapping": {
+    "valueTemplate": "\${first_name} \${last_name}",
+    "labelTemplate": "id",
+    "selector": "*"
+  },
+      "type":"checkbox"
+
+}'></monster-tree-select>
+    </div>
+`;
+
+let TreeSelect, fetchReference;
+
+describe('Treeselect', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("element-internals-polyfill").catch(e => done(e));
+            fetchReference = global['fetch'];
+
+            import("../../../../source/components/form/tree-select.mjs").then((m) => {
+                TreeSelect = m['TreeSelect'];
+                done()
+            }).catch(e => done(e))
+
+
+        });
+    })
+
+    describe('With fetch', function () {
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            global['fetch'] = function (url, options) {
+
+                let headers = new Map;
+                headers.set('content-type', 'application/json');
+
+                return new Promise((resolve, reject) => {
+                    resolve({
+                        headers: headers,
+                        text: function () {
+                            return new Promise((resolve2, reject2) => {
+
+                                let json = JSON.parse(`[
+                                          {
+                                            "id": 1,
+                                            "first_name": "Alexia",
+                                            "last_name": "Oughtright",
+                                            "email": "aoughtright0@exblog.jp",
+                                            "gender": "Agender",
+                                            "country": "mn" ,
+                                            "parent": "0"
+                                          },
+                                          {
+                                            "id": 2,
+                                            "first_name": "Beth",
+                                            "last_name": "Boddington",
+                                            "email": "bboddington1@statcounter.com",
+                                            "gender": "Non-binary",
+                                            "country": "sy",
+                                            "parent": "0"
+                                          },
+                                          {
+                                            "id": 3,
+                                            "first_name": "Shelli",
+                                            "last_name": "A'Barrow",
+                                            "email": "sabarrow2@google.co.uk",
+                                            "gender": "Polygender",
+                                            "country": "no",
+                                            "parent": "0"
+                                          } ]`);
+
+                                resolve2(JSON.stringify(json))
+
+
+                            })
+
+
+                        }
+                    });
+                })
+
+            };
+
+
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+            global['fetch'] = fetchReference;
+        })
+
+        describe('create from template', function () {
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = html2;
+            });
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
+                global['fetch'] = fetchReference;
+            })
+
+            describe('create from template', function () {
+                it('should contains monster-tree-select', function () {
+                    expect(document.getElementById('test2')).contain.html('<monster-tree-select');
+                });
+            });
+
+        });
+
+        describe('document.createElement', function () {
+            it('should instance of select', function () {
+                expect(document.createElement('monster-tree-select')).is.instanceof(TreeSelect);
+            });
+
+            it('should has options', function (done) {
+
+                let mocks = document.getElementById('mocks');
+                const treeselect = document.createElement('monster-tree-select');
+                treeselect.setOption('url', 'https://example.com')
+
+                treeselect.setOption('mapping.selector', '*');
+                treeselect.setOption('mapping.labelTemplate', '${last_name}');
+                treeselect.setOption('mapping.valueTemplate', '${id | tostring }');
+
+                mocks.appendChild(treeselect);
+
+                setTimeout(() => {
+                    try {
+                        const options = treeselect.shadowRoot.querySelectorAll('[data-monster-role=option]');
+
+                        // 3 options (see fetch above)
+                        expect(options.length).is.equal(3);
+
+
+                        const optionHtml = treeselect.shadowRoot.querySelector('[data-monster-role=options]');
+                        expect(optionHtml).contain.html('data-monster-insert-reference="options-0"');
+                        expect(optionHtml).contain.html('data-monster-insert-reference="options-1"');
+                        expect(optionHtml).contain.html('data-monster-insert-reference="options-2"');
+                        expect(optionHtml).contain.not.html('data-monster-insert-reference="options-3"');
+
+                    } catch (e) {
+                        return done(e);
+                    }
+
+                    done();
+                }, 0)
+
+
+            });
+
+        });
+
+    });
+
+    describe('document.createElement()', function () {
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('should has no options', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-tree-select');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const options = select.shadowRoot.querySelector('[data-monster-role=options]');
+
+                    expect(options).is.instanceof(HTMLDivElement);
+                    expect(options.hasChildNodes()).to.be.false;
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+
+
+        });
+
+    });
+
+
+});

package/test/cases/components/host/details.mjs

@@ -0,0 +1,68 @@
+import {initJSDOM} from "../../../util/jsdom.mjs";
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {ResizeObserverMock} from "../../../util/resize-observer.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+
+describe('Details', function () {
+
+    let host;
+    let html1 = `
+        <monster-details id="details1"></monster-details>
+    `;
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("../../../../source/components/host/details.mjs").then((m) => {
+                host = m['Details'];
+
+                if(!global.ResizeObserver) {
+                    global.ResizeObserver = ResizeObserverMock;
+                }
+                
+                done()
+            }).catch(e => done(e))
+
+        });
+        
+        
+        
+    })
+
+    beforeEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = html1;
+    });    
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+    })
+    
+    
+    it('should run', function (done) {
+
+        let mocks = document.getElementById('mocks');
+        const formControl = document.createElement('monster-details');
+
+        setTimeout(() => {
+            try {
+                
+                expect(document.getElementById('mocks')).contain.html(
+                    '<monster-details id="details1" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
+            } catch (e) {
+                return done(e);
+            }
+
+            done();
+        }, 0)
+
+    });
+
+});

package/test/cases/components/host/host.mjs

@@ -0,0 +1,70 @@
+import {initJSDOM} from "../../../util/jsdom.mjs";
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+
+describe('Host', function () {
+
+    let host;
+    let html1 = `
+        <monster-host id="host1"></monster-host>
+    `;
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("../../../../source/components/host/host.mjs").then((m) => {
+                host = m['Host'];
+                done()
+            }).catch(e => done(e))
+
+        });
+    })
+
+    beforeEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = html1;
+
+        // register own datasource, after the form is loaded
+        // because in the wild, the form is parsed before the datasource is registered
+        //form.registerDatasource('test3', test3Datasource);
+
+
+    });    
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+        localStorage.removeItem('test-key')
+    })
+    
+    
+    it('should run', function (done) {
+
+        let mocks = document.getElementById('mocks');
+        const formControl = document.createElement('monster-host');
+        mocks.appendChild(formControl);
+
+        setTimeout(() => {
+            try {
+                expect(document.getElementById('mocks')).contain.html('<monster-host data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
+            } catch (e) {
+                return done(e);
+            }
+
+            done();
+        }, 0)
+
+
+
+
+
+    });
+
+
+});

package/test/cases/components/host/overlay.mjs

@@ -0,0 +1,60 @@
+import {initJSDOM} from "../../../util/jsdom.mjs";
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+
+describe('Overlay', function () {
+
+    let host;
+    let html1 = `
+        <monster-overlay id="details1"></monster-overlay>
+    `;
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("../../../../source/components/host/overlay.mjs").then((m) => {
+                host = m['Details'];
+                done()
+            }).catch(e => done(e))
+
+        });
+    })
+
+    beforeEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = html1;
+    });    
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+    })
+    
+    
+    it('should run', function (done) {
+
+        let mocks = document.getElementById('mocks');
+        const formControl = document.createElement('monster-overlay');
+        mocks.appendChild(formControl);
+
+        setTimeout(() => {
+            try {
+                expect(document.getElementById('mocks')).contain.html(
+                    ' <monster-overlay data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
+            } catch (e) {
+                return done(e);
+            }
+
+            done();
+        }, 0)
+
+    });
+
+});

package/test/cases/components/host/util.mjs

@@ -0,0 +1,79 @@
+// Import the required libraries
+import { expect } from 'chai';
+//import { JSDOM } from 'jsdom';
+import { generateUniqueConfigKey } from '../../../../source/components/host/util.mjs';
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+// Create a JSDOM instance to simulate the browser environment
+//const dom = new JSDOM();
+
+
+// Test suite for the generateUniqueConfigKey function
+describe('generateUniqueConfigKey', () => {
+
+    //let originalWindow;
+
+    // before(() => {
+    //     // Store the original window object
+    //     originalWindow = globalThis.window;
+    //
+    //     // Create a JSDOM instance to simulate the browser environment
+    //     const dom = new JSDOM();
+    //     globalThis.window = dom.window;
+    // });
+
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            done();
+        });
+    })    
+
+    // ... (same test cases as before)
+
+    after(() => {
+        // Restore the original window object
+       // globalThis.window = originalWindow;
+    });    
+    
+    it('should generate a unique key with the given parameters', () => {
+        const componentName = 'MyComponent';
+        const id = '123';
+        const prefix = 'myPrefix';
+
+        const uniqueKey = generateUniqueConfigKey(componentName, id, prefix);
+
+        // Ensure the unique key contains the given parameters and follows the expected format
+        expect(uniqueKey).to.include(prefix);
+        expect(uniqueKey).to.include(componentName);
+        expect(uniqueKey).to.include(id);
+        expect(uniqueKey).to.match(/^[a-zA-Z0-9_]+$/);
+    });
+
+    it('should replace special characters and spaces with underscores', () => {
+        const componentName = 'My$Component';
+        const id = '12#3';
+        const prefix = 'my Prefix';
+
+        const uniqueKey = generateUniqueConfigKey(componentName, id, prefix);
+
+        // Ensure the unique key does not contain any special characters or spaces
+        expect(uniqueKey).to.match(/^[a-zA-Z0-9_]+$/);
+    });
+
+    it('should include the browser location without parameters', () => {
+        const componentName = 'MyComponent';
+        const id = '123';
+        const prefix = 'myPrefix';
+
+        const uniqueKey = generateUniqueConfigKey(componentName, id, prefix);
+
+        // Ensure the unique key contains the browser location without parameters
+        const urlWithoutParams = window.location.href.split('?')[0];
+        const sanitizedUrl = urlWithoutParams.replace(/[^\w\s]/gi, '_').replace(/\s+/g, '_');
+        expect(uniqueKey).to.include(sanitizedUrl);
+    });
+
+    
+    
+})

package/test/cases/components/notify/message.mjs

@@ -0,0 +1,39 @@
+
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+
+
+let Message;
+
+describe('Message', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            
+            import("../../../../source/components/notify/message.mjs").then((m) => {
+                Message = m['Message'];
+                done()
+            }).catch(e => done(e))
+        });
+    })
+
+    describe('document.createElement', function () {
+        it('should instance of Message', function () {
+            
+            const control = document.createElement('monster-notify-message');
+            
+            
+                expect(control).is.instanceof(Message);
+            
+            
+        });
+
+    });
+
+
+})

package/test/cases/components/notify/notify.mjs

@@ -0,0 +1,89 @@
+//import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+// const global = getGlobal();
+//
+// let html1 = `
+//     <div id="test1">
+//     </div>
+// `;
+//
+// // language=HTML
+// let html2 = `
+//     <div id="test2">
+//         <monster-notify data-monster-options='{}'></monster-notitfy>
+//     </div>
+// `;
+
+let Notify, fetchReference;
+
+describe('Notify', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("../../../../source/components/notify/notify.mjs").then((m) => {
+                Notify = m['Notify'];
+                done()
+            }).catch(e => done(e))
+        });
+    })
+
+    describe('document.createElement', function () {
+        it('should instance of notify', function () {
+
+            
+                expect(document.createElement('monster-notify')).is.instanceof(Notify);
+            
+
+
+        });
+
+        it('should have messages', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const notify = document.createElement('monster-notify');
+            let i = 0;
+            notify.push("this is message " + i++);
+            notify.push("this is message " + i++);
+            notify.push("this is message " + i++);
+
+            const mutationobserver = new MutationObserver(function (mutations) {
+
+                for (const [, mutation] of mutations.entries()) {
+                    if (mutation.addedNodes[0].tagName === 'MONSTER-NOTIFY') {
+
+                        setTimeout(() => {
+                            mutationobserver.disconnect();
+                            try {
+
+                                const messages = notify.shadowRoot.querySelectorAll('monster-notify-message');
+                                // 3 options (see fetch above)
+                                expect(messages.length).is.equal(3);
+
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            done();
+
+
+                        }, 0)
+                    }
+                }
+
+            });
+
+            mutationobserver.observe(mocks, {childList: true});
+            mocks.appendChild(notify);
+
+        });
+
+    });
+
+
+})

package/test/cases/dom/customcontrol.mjs

@@ -1,7 +1,6 @@
 'use strict';
 
 import chai from "chai"
-import {ATTRIBUTE_OPTIONS} from "../../../source/dom/constants.mjs";
 import {getDocument} from "../../../source/dom/util.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
 import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../util/cleanupdom.mjs";
@@ -30,6 +29,7 @@ describe('DOM', function () {
             jsdomFlag = navigator.userAgent.includes("jsdom");
 
             import("../../../source/dom/customelement.mjs").then((m) => {
+               
                 registerCustomElement = m['registerCustomElement'];
 
 
@@ -46,8 +46,6 @@ describe('DOM', function () {
                             }
                         }
                         registerCustomElement(TestComponent)
-
-
                         done()
                     } catch (e) {
                         done(e);
@@ -55,7 +53,9 @@ describe('DOM', function () {
 
 
                 });
-            });
+            }).catch((e) => {
+                done(e);
+            } );
         });
     })
 
@@ -91,6 +91,7 @@ describe('DOM', function () {
 
                 let d = document.createElement('monster-customcontrol');
                 document.getElementById('test1').appendChild(d);
+                                
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
                 expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-error="Error: html is not set."></monster-customcontrol>')

package/test/cases/math/random.mjs

@@ -29,7 +29,6 @@ describe('Math', function () {
 
     describe('.random()', function () {
 
-
         it('a greater b should throw error ', function () {
             expect(() => random(10, 2)).to.throw(Error);
         });

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.51.5")
+        monsterVersion = new Version("3.52.0")
 
         let m = getMonsterVersion();
 

package/test/cases/net/webconnect/message.mjs

@@ -10,7 +10,6 @@ describe('Message', function () {
             done(new Error('should throw'));
         } catch (e) {
             done();
-            return;
         }
 
     })