@schukai/monster 1.29.0 → 1.30.0

package/test/cases/dom/customelement.js

@@ -17,14 +17,12 @@ let html1 = `
 `;
 
 
-
 describe('DOM', function () {
 
     let CustomElement, registerCustomElement, TestComponent, document, TestComponent2;
 
     describe('CustomElement()', function () {
 
-
         before(function (done) {
             initJSDOM().then(() => {
 
@@ -53,6 +51,7 @@ describe('DOM', function () {
                             get defaults() {
 
                                 return Object.assign({}, super.defaults, {
+                                    demotest: undefined,
                                     templates: {
                                         main: '<h1></h1><article><p>test</p><div id="container"></div></article>'
                                     },
@@ -85,6 +84,28 @@ describe('DOM', function () {
             mocks.innerHTML = "";
         })
 
+        describe('CustomElement() with Config', function () {
+            it('should read config from tag', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                
+                <script id="config1" type="application/json">
+                {
+                    "demotest":1425
+                }
+                </script>
+                
+                <monster-testclass2 id="thisisatest" data-monster-options-selector="#config1">
+                </monster-testclass2>
+                `;
+
+                let monster = document.getElementById('thisisatest');
+                expect(monster.getOption('demotest')).is.eql(1425);
+                
+            });
+        });
+
         describe('create', function () {
             it('should return custom-element object', function () {
                 let d = new TestComponent();
@@ -209,6 +230,219 @@ describe('DOM', function () {
             })
         })
 
+        /**
+         * @link https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/113
+         */
+        describe('Assign CSSStyle as Array with wrong type', function () {
+
+            const htmlTAG = 'monster-testclass-x1';
+
+            let mocks, TestComponentX1;
+            beforeEach(() => {
+
+                mocks = document.getElementById('mocks');
+                mocks.innerHTML = html1;
+
+
+                TestComponentX1 = class extends CustomElement {
+                    static getTag() {
+                        return htmlTAG
+                    }
+
+                    static getCSSStyleSheet() {
+                        return [true];
+                    }
+
+                    /**
+                     * @return {Object}
+                     */
+                    get defaults() {
+
+                        return Object.assign({}, super.defaults, {
+                            templates: {
+                                main: '<h1>test</h1>'
+                            },
+                        })
+                    }
+
+                }
+
+                registerCustomElement(TestComponentX1)
+
+
+            })
+
+            it(htmlTAG + " should throw Exception", function (done) {
+                let d = document.createElement(htmlTAG);
+
+                let div = document.getElementById('test1');
+                div.append(d);
+
+
+                expect(div).contain.html('data-monster-error="TypeError: value is not an instance of CSSStyleSheet"');
+                done();
+
+            })
+
+
+        })
+
+
+        /**
+         * @link https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/113
+         */
+        describe('Assign CSSStyle as Array and CSSStylesheet', function () {
+
+            const htmlTAG = 'monster-testclass-x113-2';
+
+            let mocks, TestComponentX113X2;
+            beforeEach(() => {
+
+                mocks = document.getElementById('mocks');
+                mocks.innerHTML = html1;
+
+                TestComponentX113X2 = class extends CustomElement {
+                    static getTag() {
+                        return htmlTAG
+                    }
+
+                    /**
+                     * @return {Object}
+                     */
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            templates: {main: '<h1>test</h1>'},
+                        })
+                    }
+
+
+                    static getCSSStyleSheet() {
+
+                        const s = (new CSSStyleSheet())
+                        s.insertRule('a { color : red}');
+
+                        return [s];
+                    }
+                }
+
+                registerCustomElement(TestComponentX113X2)
+
+
+            })
+
+            it(htmlTAG + " should throw Exception 2", function (done) {
+                let d = document.createElement(htmlTAG);
+
+                let div = document.getElementById('test1');
+                div.append(d);
+
+                expect(d.shadowRoot.innerHTML).is.eq('<h1>test</h1>');
+                done();
+
+            })
+        })
+
+        /**
+         * @link https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/113
+         */
+        describe('Assign CSSStyle as Array and CSS as string', function () {
+
+            const htmlTAG = 'monster-testclass-x113-21';
+
+            let mocks, TestComponentX113X22;
+            beforeEach(() => {
+
+                mocks = document.getElementById('mocks');
+                mocks.innerHTML = html1;
+
+                TestComponentX113X22 = class extends CustomElement {
+                    static getTag() {
+                        return htmlTAG
+                    }
+
+                    /**
+                     * @return {Object}
+                     */
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            templates: {main: '<h1>test</h1>'},
+                        })
+                    }
+
+
+                    static getCSSStyleSheet() {
+                        return 'a { color:red }';
+                    }
+                }
+
+                registerCustomElement(TestComponentX113X22)
+
+
+            })
+
+            it(htmlTAG + " should eq <style>a { color:red }</style><h1>test</h1>", function (done) {
+                let d = document.createElement(htmlTAG);
+
+                let div = document.getElementById('test1');
+                div.append(d);
+
+
+                expect(d.shadowRoot.innerHTML).is.eq('<style>a { color:red }</style><h1>test</h1>');
+                done();
+
+            })
+        })
+        /**
+         * @link https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/113
+         */
+        describe('Assign CSSStyle as Array and CSS as string', function () {
+
+            const htmlTAG = 'monster-testclass-x113-22';
+
+            let mocks, TestComponentX113X223;
+            beforeEach(() => {
+
+                mocks = document.getElementById('mocks');
+                mocks.innerHTML = html1;
+
+                TestComponentX113X223 = class extends CustomElement {
+                    static getTag() {
+                        return htmlTAG
+                    }
+
+                    /**
+                     * @return {Object}
+                     */
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            templates: {main: '<h1>test</h1>'},
+                        })
+                    }
+
+
+                    static getCSSStyleSheet() {
+                        return ['a { color:red }'];
+                    }
+                }
+
+                registerCustomElement(TestComponentX113X223)
+
+
+            })
+
+            it(htmlTAG + " should eq <style>a { color:red }</style><h1>test</h1>", function (done) {
+                let d = document.createElement(htmlTAG);
+
+                let div = document.getElementById('test1');
+                div.append(d);
+
+
+                expect(d.shadowRoot.innerHTML).is.eq('<style>a { color:red }</style><h1>test</h1>');
+                done();
+
+            })
+        })
+
         describe('hasNode()', function () {
 
             let mocks;
@@ -217,7 +451,6 @@ describe('DOM', function () {
                 mocks = document.getElementById('mocks');
                 mocks.innerHTML = html1;
 
-
             })
 
             it("hasNode monster-testclass should return ...", function () {

package/test/cases/dom/resource/link.js

@@ -12,15 +12,10 @@ let expect = chai.expect;
 
 chai.use(chaiDom);
 
-let html1 = `
-
-`;
 
 
 describe('Link', function () {
 
-    let mutationobserver, addedNodes=[];
-
     before(function (done) {
         initJSDOM().then(() => {
             done()
@@ -36,6 +31,8 @@ describe('Link', function () {
     })
 
     describe('Link()', function () {
+        this.timeout(5000);
+
         it('connect().available()', function (done) {
 
             const link = new Link({
@@ -51,6 +48,7 @@ describe('Link', function () {
     });
 
     describe('External Link', () => {
+        this.timeout(5000);
 
         let id = new ID('link').toString();
         let link, url = 'https://monsterjs.org/assets/empty.css?' + id;

package/test/cases/dom/updater.js

@@ -664,7 +664,7 @@ describe('DOM', function () {
 
     describe('manuel update', function () {
         let id, mocks;
-        
+
         beforeEach(() => {
             mocks = document.getElementById('mocks');
             id = new ID('monster').toString();
@@ -677,10 +677,10 @@ describe('DOM', function () {
 
         it('should get value', function () {
 
-            document.getElementById(id).value="hello";
+            document.getElementById(id).value = "hello";
             const updater = new Updater(mocks);
             const subject = updater.getSubject();
-            
+
             expect(subject).to.not.have.property('myvalue');
             updater.retrieve();
             expect(subject).to.have.property('myvalue');
@@ -688,4 +688,77 @@ describe('DOM', function () {
 
 
     });
+
+
+    /**
+     * https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/112
+     */
+    describe('Updater() 20220107', function () {
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            // language=HTML
+            mocks.innerHTML = `
+
+                <div id="container">
+                    <div data-monster-replace="path:content"></div>
+                </div>
+
+
+            `;
+        })
+
+        describe('Bugfix #112', function () {
+
+            it('should add ', function (done) {
+                let containerElement = document.getElementById('container');
+                let newElement = document.createElement('div');
+                newElement.innerHTML = 'yeah! <b>Test</b>!';
+
+                const containerHTML = containerElement.innerHTML;
+                const newHTML = newElement.innerHTML;
+
+                let d = new Updater(
+                    containerElement,
+                    {
+                        content: newElement
+                    }
+                );
+                setTimeout(() => {
+                    d.run().then(() => {
+                        try {
+                            expect(containerElement).contain.html('<div>yeah! <b>Test</b>!</div>');
+                        } catch (e) {
+                            return done(e);
+                        }
+
+
+                        done()
+                    })
+                }, 100)
+
+                // d.setCallback('myformatter', function (a) {
+                //     return a + 'yes!'
+                // })
+                //
+                // setTimeout(() => {
+                //     d.run().then(() => {
+                //
+                //         expect(typeof d).is.equal('object');
+                //         expect(element).contain.html('<div data-monster-replace="path:text | tolower">hallo</div>');
+                //         expect(element).contain.html('<div data-monster-replace="path:text | call:myformatter">HALLOyes!</div>');
+                //         expect(element).contain.html('<div data-monster-replace="static:hello\\ ">hello </div>');
+                //
+                //         return done();
+                //     }).catch(
+                //         e => {
+                //             done(new Error(e))
+                //         })
+                // }, 100)
+
+            });
+        });
+    });
+
+
 });

package/test/cases/monster.js

@@ -9,7 +9,7 @@ describe('Monster', function () {
         let monsterVersion
 
     /**#@+ dont touch, replaced by make with package.json version */
-    monsterVersion = new Version('1.29.0')
+    monsterVersion = new Version('1.30.0')
     /**#@-*/
 
         let m = Monster.getVersion();

package/test/util/jsdom.js

@@ -63,6 +63,7 @@ function initJSDOM(options) {
                     'DocumentFragment',
                     'DOMParser',
                     'CSSStyleSheet',
+                    'HTMLScriptElement',
                     'MutationObserver',
                     'HTMLTemplateElement',
                     'XMLSerializer',

package/test/web/monster-dev.html

@@ -10,13 +10,13 @@
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
 
-    <script src="https://monsterjs.org/dist/1.29.0/dist/monster.dev.js"></script>
+    <script src="https://monsterjs.org/dist/1.30.0/dist/monster.dev.js"></script>
 
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 1.29.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mi 29. Dez 20:04:41 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.30.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Sa 5. Feb 23:21:23 CET 2022</div>
 </div>
 </body>
 </html>

package/test/web/monster.html

@@ -14,8 +14,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 1.29.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mi 29. Dez 20:04:41 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.30.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Sa 5. Feb 23:21:23 CET 2022</div>
 </div>
 </body>
 </html>

package/test/web/test.html

@@ -8,12 +8,13 @@
    <script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
+   <script src="https://cdn.jsdelivr.net/npm/element-internals-polyfill@0.1.52/dist/index.min.js"></script>
 
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 1.29.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mi 29. Dez 20:04:41 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.30.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Sa 5. Feb 23:21:23 CET 2022</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>