@schukai/monster 1.26.1 → 1.29.0

package/test/cases/dom/template.js

@@ -1,16 +1,11 @@
 'use strict';
 
 import {expect} from "chai"
+import {ATTRIBUTE_THEME_NAME} from "../../../source/dom/constants.js";
 
 import {findDocumentTemplate, Template} from "../../../source/dom/template.js";
 import {initJSDOM} from "../../util/jsdom.js";
 
-const html1 = `
-
-<template id="mytemplate"></template>
-
-`;
-
 
 describe('Template', function () {
 
@@ -20,7 +15,8 @@ describe('Template', function () {
 
     beforeEach(() => {
         let mocks = document.getElementById('mocks');
-        mocks.innerHTML = html1;
+        mocks.innerHTML = `
+            <template id="mytemplate"></template>`;
     })
 
     afterEach(() => {
@@ -75,14 +71,76 @@ describe('Template', function () {
     });
 
     describe('.findDocumentTemplate()', function () {
-        it('should throw Template not found', function () {
-            const div = document.createElement('div');
-            div.remove();
-            let t = findDocumentTemplate("mytemplate", div);
-            expect(t).is.instanceof(Template);
+        describe('Template', function () {
+            it('should find template over ownerDocument', function () {
+                const div = document.createElement('div');
+                div.remove();
+                let t = findDocumentTemplate("mytemplate", div);
+                expect(t).is.instanceof(Template);
+
+            })
+        });
 
-        })
-    });
+        describe('Thmened Template', function () {
+            let memAttributeValue;
+
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <template id="mytemplate"><p>1</p></template>
+                    <template id="mytemplate-monster"><p>2</p></template>
+                    <template id="mytemplate-testtheme"><p>4</p></template>
+                    <template id="myprefix-mytemplate-monster"><p>3</p></template>
+                `;
+
+                let html = document.querySelector('html');
+                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
+                    memAttributeValue = html.getAttribute(ATTRIBUTE_THEME_NAME)
+                }
+
+            })
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
 
+                let html = document.querySelector('html');
 
+                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
+                    html.removeAttribute(ATTRIBUTE_THEME_NAME);
+                }
+
+                if (memAttributeValue) {
+                    html.setAttribute(ATTRIBUTE_THEME_NAME, memAttributeValue)
+                }
+
+            })
+
+
+            it('should find template over ownerDocument', function () {
+                let html = document.querySelector('html');
+                const div = document.createElement('div');
+                div.setAttribute('data-monster-template-prefix', 'myprefix')
+                div.remove();
+                let t1 = findDocumentTemplate("mytemplate", div);
+                expect(t1).is.instanceof(Template);
+                expect(t1.createDocumentFragment().textContent).is.equal("3");
+
+                div.removeAttribute('data-monster-template-prefix')
+                let t2 = findDocumentTemplate("mytemplate", div);
+                expect(t2).is.instanceof(Template);
+                expect(t2.createDocumentFragment().textContent).is.equal("2");
+
+                html.setAttribute(ATTRIBUTE_THEME_NAME,'testtheme');
+                let a= html.outerHTML;
+                let t3 = findDocumentTemplate("mytemplate", div);
+                expect(t3).is.instanceof(Template);
+                expect(t3.createDocumentFragment().textContent).is.equal("4");
+
+
+            })
+        });
+
+
+    });
 });

package/test/cases/dom/updater.js

@@ -12,99 +12,100 @@ let expect = chai.expect;
 
 chai.use(chaiDom);
 
-let html1 = `<template id="current">
-    <li data-monster-replace="path:current | tojson"></li>
-</template>
-<div id="test1">
-    <ul data-monster-insert="current path:a.b">
-    </ul>
-</div>
-<div id="test2">
-    <ul data-monster-insert="current path:a.b | doit">
-    </ul>
-</div>
-<div id="test3">
-    <div data-monster-attributes="class path:a.b">
-        <input data-monster-attributes="value path:a.c" id="input1">
-        <input data-monster-attributes="checked path:a.checkbox" type="checkbox" name="checkbox" id="checkbox">
-        <input data-monster-attributes="value path:a.text" type="text" name="text" id="text">
-        <input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio">
-        <input type="radio" name="radio" value="r2" id="r2">
-        <input type="radio" name="radio" value="rx" id="rx">
-
-        <select data-monster-attributes="value path:a.select" name="select" id="select">
-            <option value="other-value">value1</option>
-            <option>value2</option>
-        </select>
-
-        <select data-monster-attributes="value path:a.multiselect" name="multiselect" multiple id="multiselect">
-            <option>value1</option>
-            <option>value2</option>
-            <option>value3</option>
-            <option>value4</option>
-            <option value="other-value5">value5</option>
-        </select>
-
-        <textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea"></textarea>
-
+let html1 = `
+    <template id="current">
+        <li data-monster-replace="path:current | tojson"></li>
+    </template>
+    <div id="test1">
+        <ul data-monster-insert="current path:a.b">
+        </ul>
+    </div>
+    <div id="test2">
+        <ul data-monster-insert="current path:a.b | doit">
+        </ul>
+    </div>
+    <div id="test3">
+        <div data-monster-attributes="class path:a.b">
+            <input data-monster-attributes="value path:a.c" id="input1">
+            <input data-monster-attributes="checked path:a.checkbox" type="checkbox" name="checkbox" id="checkbox">
+            <input data-monster-attributes="value path:a.text" type="text" name="text" id="text">
+            <input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio">
+            <input type="radio" name="radio" value="r2" id="r2">
+            <input type="radio" name="radio" value="rx" id="rx">
+
+            <select data-monster-attributes="value path:a.select" name="select" id="select">
+                <option value="other-value">value1</option>
+                <option>value2</option>
+            </select>
+
+            <select data-monster-attributes="value path:a.multiselect" name="multiselect" multiple id="multiselect">
+                <option>value1</option>
+                <option>value2</option>
+                <option>value3</option>
+                <option>value4</option>
+                <option value="other-value5">value5</option>
+            </select>
+
+            <textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea"></textarea>
+
+        </div>
     </div>
-</div>
 
 `;
 
 let html2 = `
     <div id="test1">
-        <div data-monster-replace="path:text | tolower"> </div>
-        <div data-monster-replace="path:text | call:myformatter"> </div>
+        <div data-monster-replace="path:text | tolower"></div>
+        <div data-monster-replace="path:text | call:myformatter"></div>
         <div data-monster-replace="static:hello\\ "></div>
     </div>
 `;
 
 let html3 = `
 
-<template id="myinnerid">
-    <span data-monster-replace="path:myinnerid | tojson"></span>
-</template>
+    <template id="myinnerid">
+        <span data-monster-replace="path:myinnerid | tojson"></span>
+    </template>
 
-<template id="myid">
-   <p data-monster-insert="myinnerid path:a.b"></p>
-</template>
+    <template id="myid">
+        <p data-monster-insert="myinnerid path:a.b"></p>
+    </template>
 
-<div id="test1">
-    <div data-monster-insert="myid path:a.b"></div>
-</div>
+    <div id="test1">
+        <div data-monster-insert="myid path:a.b"></div>
+    </div>
 
 `;
 
 let html4 = `
-<div>
-    <form id="form1">
-        <input type="checkbox" value="checked" name="checkbox" data-monster-bind="path:state">
-        <input type="text" name="text">
-        <input type="radio" name="radio" value="r1" id="r1" data-monster-bind="path:radio">
-        <input type="radio" name="radio" value="r2" id="r2" data-monster-bind="path:radio">
-        <input type="radio" name="radio" value="rx" id="rx" data-comment="not called because no bind attribute">
-        <input type="button" name="button">
-
-        <select name="select1" id="select1" data-monster-bind="path:select">
-            <option>value1</option>
-            <option>value2</option>
-        </select>
-
-        <select name="select2" multiple id="select2" data-monster-bind="path:multiselect">
-            <option>value1</option>
-            <option>value2</option>
-            <option>value3</option>
-            <option>value4</option>
-            <option>value5</option>
-        </select>
-
-        <textarea name="textarea" id="textarea" data-monster-bind="path:textarea">
+    <div>
+        <form id="form1">
+            <input type="checkbox" value="checked" name="checkbox" data-monster-bind="path:state">
+            <input type="text" name="text">
+            <input type="radio" name="radio" value="r1" id="r1" data-monster-bind="path:radio">
+            <input type="radio" name="radio" value="r2" id="r2" data-monster-bind="path:radio">
+            <input type="radio" name="radio" value="rx" id="rx" data-comment="not called because no bind attribute">
+            <input type="button" name="button">
+
+            <select name="select1" id="select1" data-monster-bind="path:select">
+                <option>value1</option>
+                <option>value2</option>
+            </select>
+
+            <select name="select2" multiple id="select2" data-monster-bind="path:multiselect">
+                <option>value1</option>
+                <option>value2</option>
+                <option>value3</option>
+                <option>value4</option>
+                <option>value5</option>
+            </select>
+
+            <textarea name="textarea" id="textarea" data-monster-bind="path:textarea">
             
         </textarea>
 
-    </form>
-</div>
+        </form>
+    </div>
 
 `;
 
@@ -515,7 +516,7 @@ describe('DOM', function () {
                         })
                 }, 100)
 
-            }); 
+            });
         });
     });
 
@@ -638,14 +639,13 @@ describe('DOM', function () {
         });
     });
 
-
     describe('Get Attribute Pipe', function () {
         let id, mocks;
         beforeEach(() => {
             mocks = document.getElementById('mocks');
             id = new ID('monster');
             mocks.innerHTML = ` <div id="` + id + `"
-                             data-monster-replace="path:a | if:value:\\ "></div>`
+            data-monster-replace="path:a | if:value:\\ "></div>`
         })
 
         afterEach(() => {
@@ -661,4 +661,31 @@ describe('DOM', function () {
         });
     });
 
+
+    describe('manuel update', function () {
+        let id, mocks;
+        
+        beforeEach(() => {
+            mocks = document.getElementById('mocks');
+            id = new ID('monster').toString();
+            mocks.innerHTML = `<input id="` + id + `"data-monster-bind="path:myvalue">`
+        })
+
+        afterEach(() => {
+            mocks.innerHTML = "";
+        })
+
+        it('should get value', function () {
+
+            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');
+        });
+
+
+    });
 });

package/test/cases/math/random.js

@@ -1,8 +1,11 @@
 /** nodejs doesnt support window.crypt */
 import {expect} from "chai"
+import {getGlobal} from "../../../source/types/global.js";
 import * as Crypto from "@peculiar/webcrypto";
 import {Monster, random} from "../../../source/math/random.js";
 
+const global = getGlobal();
+
 if (!global['crypto']) {
     global['crypto'] = new Crypto.Crypto();
 }

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.26.1')
+    monsterVersion = new Version('1.29.0')
     /**#@-*/
 
         let m = Monster.getVersion();

package/test/cases/types/node.js

@@ -102,7 +102,7 @@ describe('NodeList', function () {
             result.push(n.value + ":" + n.level);
         }
 
-        
+
         expect(result).to.deep.equal([
             'root:0',
             'n1:1',
@@ -192,5 +192,61 @@ describe('NodeList', function () {
 
     })
 
+    describe('Levels', function () {
+
+        it('n2 should level 2', function () {
+
+            const n0 = new Node('abc');
+
+            const n1 = new Node('def');
+            n0.appendChild(n1)
+
+            const n2 = new Node('ghi');
+            n1.appendChild(n2);
+
+            const n3 = new Node('jkl');
+            n2.appendChild(n3);
+
+            expect(n0.level).to.be.equal(0);
+            expect(n1.level).to.be.equal(1);
+            expect(n2.level).to.be.equal(2);
+            expect(n3.level).to.be.equal(3);
+
+        });
+    });
+
+
+    describe('toString()', function () {
+
+        it('should output empty string', function () {
+            const node = new Node();
+            expect(node.toString()).is.equal('');
+        });
+
+        it('should output string', function () {
+            const n0 = new Node('abc');
+
+            const n1 = new Node('def');
+            n0.appendChild(n1)
+
+            const n11 = new Node('ghi');
+            n0.appendChild(n11)
+
+            const n2 = new Node('jkl');
+            n1.appendChild(n2);
+
+            const n3 = new Node('mno');
+            n1.appendChild(n3);
+
+            const n4 = new Node('pqr');
+            n2.appendChild(n4);
+
+            expect(n2.level).to.be.equal(2)
+
+            console.log(n0.toString());
+            // expect(n0.toString()).is.equal('');
+        });
+    });
+
 
 });

package/test/cases/types/nodelist.js

@@ -33,8 +33,10 @@ describe('NodeList', function () {
 
             expect(nodeList2.size).to.equal(3);
         });
+        
     });
     
+     
     it('create NodeList', function () {
         expect(new NodeList()).is.instanceof(NodeList);
     })
@@ -55,6 +57,11 @@ describe('NodeList', function () {
         const n = new Node;
         expect(new NodeList().add(n).has(n)).to.be.true;
     })
+    
+    it('toString', function () {
+        const n = new Node;
+        expect(new NodeList().add(new Node('a').appendChild(new Node('b'))).toString()).to.be.equal('a\n └b');
+    })
 
     it('throw exception', function () {
         expect(() => new NodeList().add(1)).to.throw(Error);

package/test/cases/types/noderecursiveiterator.js

@@ -2,6 +2,7 @@
 
 import {expect} from "chai"
 import {Node} from "../../../source/types/node.js";
+import {NodeList} from "../../../source/types/nodelist.js";
 import {NodeRecursiveIterator} from "../../../source/types/noderecursiveiterator.js";
 
 describe('NodeRecursiveIterator', function () {
@@ -51,4 +52,24 @@ describe('NodeRecursiveIterator', function () {
 
     });
 
+    it('should iterate nodelist', function () {
+        const nodeList = new NodeList();
+
+        nodeList.add(
+            (new Node('2')).appendChild(new Node('2.1')).appendChild(new Node('2.2')).appendChild(new Node('2.3')).appendChild(new Node('3')).appendChild(new Node('4').appendChild(new Node('4.1')).appendChild(new Node('4.2'))));
+
+        nodeList.add(new Node('x'));
+
+        const iterator = new NodeRecursiveIterator(nodeList);
+
+        const result = [];
+        for (const n of iterator) {
+            expect(n).to.be.an.instanceof(Node);
+            result.push(n.value);
+        }
+        
+        expect(result).to.deep.equal(['2', '2.1', '2.2', '2.3', '3', '4', '4.1', '4.2', 'x']);
+
+    });
+
 });

package/test/cases/util/deadmansswitch.js

@@ -0,0 +1,71 @@
+import {DeadMansSwitch} from "../../../source/util/deadmansswitch.js";
+
+
+describe('DeadMansSwitch', function () {
+
+    describe('run instance', function () {
+
+        it('should run', function (done) {
+
+            const ms1 =  Date.now();
+
+            const deadmansswitch = new DeadMansSwitch(100, () => {
+
+                const ms2 =  Date.now();
+
+                const diff = ms2 - ms1;
+                if (diff < 100) {
+                    done('to short ' + diff);
+                    return;
+                }
+                done();
+            })
+
+
+        });
+    });
+
+    describe('run instance and touch', function () {
+
+        it('should run', function (done) {
+
+            const ms1 = Date.now();
+
+            const deadmansswitch = new DeadMansSwitch(100, () => {
+
+                const ms2 = Date.now();
+
+                const diff = ms2 - ms1;
+
+                if (ms1 > ms2) {
+                    done('timing error');
+                    return;
+                }
+
+                if (diff < 600) {
+                    done('to short ' + diff);
+                    return;
+                }
+                done();
+            })
+
+            //   0 ms: init() -> wait 100 ms 
+            //  50 ms: touch() -> wait 100 ms
+            //          -> wait 100
+            // 100 ms: touch(500) -> wait 500 ms
+            //          -> wait 500
+            // 600 ms: execute callback
+            setTimeout(() => {
+                deadmansswitch.touch()
+
+                setTimeout(() => {
+                    deadmansswitch.touch(500)
+                }, 50)
+
+            }, 50)
+
+
+        });
+    });
+
+});

package/test/web/import.js

@@ -57,6 +57,7 @@ import "../cases/constraint/invalid.js";
 import "../cases/constraint/oroperator.js";
 import "../cases/constraint/andoperator.js";
 import "../cases/constraint/isarray.js";
+import "../cases/util/deadmansswitch.js";
 import "../cases/util/comparator.js";
 import "../cases/util/trimspaces.js";
 import "../cases/util/clone.js";

package/test/web/monster-dev.html

@@ -10,13 +10,13 @@
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
 
-    <script src="https://monsterjs.org/dist/1.26.1/dist/monster.dev.js"></script>
+    <script src="https://monsterjs.org/dist/1.29.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.26.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 12:05:05 CET 2021</div>
+  <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>
 </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.26.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 12:05:05 CET 2021</div>
+  <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>
 </div>
 </body>
 </html>

package/test/web/test.html

@@ -5,15 +5,15 @@
     <title>Mocha Monster</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="mocha.css"/>
-   <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,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.startsWith,String.prototype.trim,Symbol,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
+   <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>
 
 </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.26.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 12:05:05 CET 2021</div>
+  <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>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>