@schukai/monster 1.26.0 → 1.28.1

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/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.0')
+    monsterVersion = new Version('1.28.1')
     /**#@-*/
 
         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/web/monster-dev.html

@@ -10,13 +10,13 @@
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
 
-    <script src="https://monsterjs.org/dist/1.26.0/dist/monster.dev.js"></script>
+    <script src="https://monsterjs.org/dist/1.28.1/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.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 10:00:50 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.28.1</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update So 12. Dez 17:02:34 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.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 10:00:50 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.28.1</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update So 12. Dez 17:02:34 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.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 10:00:50 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.28.1</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update So 12. Dez 17:02:34 CET 2021</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>