@schukai/monster 1.29.2 → 1.31.0

package/test/cases/dom/customelement.js

@@ -51,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>'
                                     },
@@ -83,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();
@@ -210,7 +233,9 @@ describe('DOM', function () {
         /**
          * @link https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/113
          */
-        describe('Assign CSSStyle as Array', function () {
+        describe('Assign CSSStyle as Array with wrong type', function () {
+
+            const htmlTAG = 'monster-testclass-x1';
 
             let mocks, TestComponentX1;
             beforeEach(() => {
@@ -221,7 +246,7 @@ describe('DOM', function () {
 
                 TestComponentX1 = class extends CustomElement {
                     static getTag() {
-                        return "monster-testclass-x1"
+                        return htmlTAG
                     }
 
                     static getCSSStyleSheet() {
@@ -247,13 +272,13 @@ describe('DOM', function () {
 
             })
 
-            it("monster-testclassX1 should throw Exception", function (done) {
-                let d = document.createElement('monster-testclass-x1');
+            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();
 
@@ -262,6 +287,162 @@ describe('DOM', function () {
 
         })
 
+
+        /**
+         * @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;

package/test/cases/dom/ready.js

@@ -0,0 +1,42 @@
+'use strict';
+
+
+import {initJSDOM} from "../../util/jsdom.js";
+
+let windowReady;
+let domReady;
+
+describe('Ready', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("../../../source/dom/ready.js").then((m) => {
+                domReady = m['domReady'];
+                windowReady = m['windowReady'];
+                done()
+            });
+
+        });
+
+
+    })
+
+    describe('domReady', function () {
+
+        it('resolve promise', function (done) {
+            domReady.then(done).catch(e => done(e));
+        });
+
+    });
+
+    describe('windowReady', function () {
+
+        it('resolve promise', function (done) {
+            windowReady.then(done).catch(e => done(e));
+        });
+
+    });
+
+
+});

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/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.2')
+    monsterVersion = new Version('1.31.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/import.js

@@ -13,6 +13,7 @@ import "../cases/dom/updater.js";
 import "../cases/dom/attributes.js";
 import "../cases/dom/template.js";
 import "../cases/dom/util.js";
+import "../cases/dom/ready.js";
 import "../cases/dom/resourcemanager.js";
 import "../cases/dom/locale.js";
 import "../cases/dom/customcontrol.js";

package/test/web/monster-dev.html

@@ -10,13 +10,13 @@
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
 
-    <script src="https://monsterjs.org/dist/1.29.2/dist/monster.dev.js"></script>
+    <script src="https://monsterjs.org/dist/1.31.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.2</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Sa 22. Jan 09:08:33 CET 2022</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.31.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 7. Feb 15:11:34 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.2</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Sa 22. Jan 09:08:33 CET 2022</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.31.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 7. Feb 15:11:34 CET 2022</div>
 </div>
 </body>
 </html>

package/test/web/test.html

@@ -13,8 +13,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.2</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Sa 22. Jan 09:08:33 CET 2022</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.31.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 7. Feb 15:11:34 CET 2022</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>