@schukai/monster 1.14.0 → 1.15.3

package/test/cases/data/extend.js

@@ -7,6 +7,23 @@ describe('extend', function () {
 
     [
         [
+            '{"a":{"b":["1","2","3"]}}',
+            {
+                a: {
+                    b: [
+                        "1",
+                        "2",
+                        "3"
+                    ]
+                }
+            },
+            {
+                a: {
+                    b: []
+                }
+            },
+        ],        [
+            '{"a":{"b":1,"d":1}}',
             {
                 a: {
                     b: 1
@@ -17,43 +34,79 @@ describe('extend', function () {
                     d: 1
                 }
             },
-            undefined,
-            '{"a":{"b":1,"d":1}}'
         ],
 
         [
+            '{"a":{"b":1,"d":{"x":["car"],"f":true,"g":[]}}}',
+            {},
             {
                 a: {
                     b: 1,
-                    d:["car"]
+                    d: {x: ["car"]}
                 }
             },
             {
                 a: {
                     d: {
-                        f:true,
+                        f: true,
                         g: []
                     }
                 }
             },
-            undefined,
-            '{"a":{"b":1,"d":{"0":"car","f":true,"g":[]}}}'
         ]
-        
+
     ].forEach(function (data) {
 
-        let a = data.shift()
-        let b = data.shift()
-        let c = data.shift()
         let d = data.shift()
+        let a = data
 
-
-        it('.extend(' + JSON.stringify(a) + ', ' + JSON.stringify(b) + ', ' + JSON.stringify(c) + ') should result in ' + d, function () {
-            let x = extend(a, b, c);
+        it('.extend(' + JSON.stringify(a) + ') should result in ' + d, function () {
+            let x = extend.apply(this, a);
             expect(JSON.stringify(x)).is.equal(d);
         });
 
 
     });
 
+
+    [
+
+
+        [
+            {},
+            {
+                a: {
+                    b: 1,
+                    d: ["car"]
+                }
+            },
+            {
+                a: {
+                    d: {
+                        f: true,
+                        g: []
+                    }
+                }
+            },
+        ],
+        [
+            {
+                a: {}
+            },
+            {
+                a: []
+            }
+        ]
+
+    ].forEach(function (data) {
+
+        let a = data
+
+        it('.extend(' + JSON.stringify(a) + ') should throw Error ', function () {
+            expect(() => extend.apply(this, a)).to.throw(Error);
+        });
+
+
+    });
+
 })

package/test/cases/dom/customcontrol.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import {ATTRIBUTE_OPTIONS} from "../../../source/dom/constants.js";
 import {getDocument} from "../../../source/dom/util.js";
 import {ID} from "../../../source/types/id.js";
 import {initJSDOM} from "../../util/jsdom.js";
@@ -79,11 +80,24 @@ describe('DOM', function () {
                 let d = document.createElement('monster-customcontrol');
                 document.getElementById('test1').appendChild(d);
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
-                expect(document.getElementById('test1')).contain.html('<monster-customcontrol></monster-customcontrol>');
+                expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-objectlink="Symbol(monsterUpdater)"></monster-customcontrol>');
             });
         });
 
+        describe('Options change', function () {
 
+            it('delegatesFocus should change from true to false', function () {
+                let element = document.createElement('monster-customcontrol')
+
+                expect(element.getOption('delegatesFocus')).to.be.true;
+                element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
+                expect(element.getOption('delegatesFocus')).to.be.false;
+
+            })
+
+
+        })
+        
         describe('Test ElementInternals', function () {
 
             let form;
@@ -198,7 +212,7 @@ describe('DOM', function () {
                 if (jsdomFlag) {
                     expect(() => d.willValidate).to.throw(Error);
                 } else {
-                    
+
                 }
 
             });
@@ -236,7 +250,7 @@ describe('DOM', function () {
                 if (jsdomFlag) {
                     expect(() => d.setValidity()).to.throw(Error);
                 } else {
-                    expect(d.setValidity({'valueMissing':true},"my message")).to.be.undefined;
+                    expect(d.setValidity({'valueMissing': true}, "my message")).to.be.undefined;
                 }
 
             });

package/test/cases/dom/customelement.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import {PROPERTY_KEY_INTERNALDATA} from "../../../source/constants.js";
+import {ATTRIBUTE_OPTIONS} from "../../../source/dom/constants.js";
 import {getDocument} from "../../../source/dom/util.js";
 import {initJSDOM} from "../../util/jsdom.js";
 import chai from "chai"
@@ -14,6 +16,8 @@ let html1 = `
     </div>
 `;
 
+const internalDataSymbol = Symbol.for(PROPERTY_KEY_INTERNALDATA);
+
 describe('DOM', function () {
 
     let CustomElement, registerCustomElement, TestComponent, document, TestComponent2;
@@ -80,7 +84,7 @@ describe('DOM', function () {
         afterEach(() => {
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = "";
-        })        
+        })
 
         describe('create', function () {
             it('should return custom-element object', function () {
@@ -94,7 +98,7 @@ describe('DOM', function () {
                 let d = document.createElement('monster-testclass');
                 document.getElementById('test1').appendChild(d);
                 expect(document.getElementsByTagName('monster-testclass').length).is.equal(1);
-                expect(document.getElementById('test1')).contain.html('<monster-testclass></monster-testclass>');
+                expect(document.getElementById('test1')).contain.html('<monster-testclass data-monster-objectlink="Symbol(monsterUpdater)"></monster-testclass>');
             });
         });
 
@@ -102,22 +106,76 @@ describe('DOM', function () {
             it('document should contain monster-testclass2', function (done) {
                 let d = document.createElement('monster-testclass2');
                 document.getElementById('test1').appendChild(d);
-                
+
                 // insert DOM run in extra process via setTimeout!
-                setTimeout(function(){
+                setTimeout(function () {
                     try {
                         expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
                         expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p></article>');
                         expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(monsterUpdater)"></monster-testclass2>');
-                    } catch(e) {
+                    } catch (e) {
                         done(e);
                     }
                     done();
-                },100);
-                
+                }, 100);
+
             });
         });
 
+        describe('Options change', function () {
+
+            it('delegatesFocus should change from true to false', function () {
+                let element = document.createElement('monster-testclass')
+
+                const o = element[internalDataSymbol].realSubject;
+                expect(Object.is(element[internalDataSymbol].realSubject, o)).to.be.true;
+
+                expect(element[internalDataSymbol].realSubject.options.delegatesFocus).to.be.true;
+                expect(element[internalDataSymbol].subject.options.delegatesFocus).to.be.true;
+                expect(element.getOption('delegatesFocus')).to.be.true;
+                expect(Object.is(element[internalDataSymbol].realSubject, o)).to.be.true;
+
+                element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
+                expect(Object.is(element[internalDataSymbol].realSubject, o)).to.be.true;
+
+                expect(element.getOption('delegatesFocus')).to.be.false;
+                expect(element[internalDataSymbol].realSubject.options.delegatesFocus).to.be.false;
+                expect(Object.is(element[internalDataSymbol].realSubject, o)).to.be.true;
+
+            })
+
+
+        })
+
+        describe('setOptions()', function () {
+            [
+                ['shadowMode', 'x1'],
+                ['templates.main', 'x2'], // is explicitly set to undefined
+                ['delegatesFocus', 'x4'],
+            ].forEach(function (data) {
+
+
+                let key = data.shift()
+                let newValue = data.shift()
+
+                let text = key + ' should return ' + newValue;
+                if (newValue !== undefined) {
+                    text = key + ' was not set, therefore default ' + newValue;
+                }
+
+
+                it(text, function () {
+
+                    let d = document.createElement('monster-testclass');
+                    expect(d.getOption(key)).to.be.not.equal(newValue);
+                    let x = d.setOption(key, newValue);
+                    expect(d.getOption(key)).to.be.equal(newValue);
+                })
+
+
+            })
+        });
+
         describe('getOptions()', function () {
 
             [

package/test/cases/dom/template.js

@@ -2,13 +2,32 @@
 
 import {expect} from "chai"
 
-import {Template} from "../../../source/dom/template.js";
+import {findDocumentTemplate, Template} from "../../../source/dom/template.js";
 import {initJSDOM} from "../../util/jsdom.js";
 
+const html1 = `
+
+<template id="mytemplate"></template>
+
+`;
+
+
 describe('Template', function () {
+
     before(async function () {
         initJSDOM();
     })
+
+    beforeEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = html1;
+    })
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+    })
+
     describe('create HTMLFragment', function () {
         [
             ["<div>first</div><div>second</div>"],
@@ -46,4 +65,24 @@ describe('Template', function () {
         });
     });
 
+    describe('.findDocumentTemplate()', function () {
+        it('should throw Template not found', function () {
+            const div = document.createElement('div');
+            expect(() => {
+                findDocumentTemplate("noway", div)
+            }).to.throws(Error);
+        })
+    });
+
+    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);
+
+        })
+    });
+
+
 });

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

package/test/cases/types/proxyobserver.js

@@ -12,6 +12,15 @@ describe('ProxyObserver', function () {
             expect(o).is.instanceOf(ProxyObserver);
         });
     });
+    
+    describe('proxy objects', function () {
+        it('Proxy objects should not be recommitted', function () {
+            let o = new ProxyObserver({a:{b:true}});
+            o.getSubject().a.b=o.getSubject();
+            o.getSubject().a.b.a.b=false;
+            //expect(o.getSubject()===p.getSubject()).to.be.true;
+        });
+    });
 
     describe('notify observer', function () {
         it('should inform observer', function (done) {

package/test/web/monster-dev.html

@@ -10,13 +10,13 @@
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
 
-    <script src="https://monsterjs.org/dist/1.14.0/dist/monster.dev.js"></script>
+    <script src="https://monsterjs.org/dist/1.15.3/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.14.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update So 12. Sep 15:50:58 CEST 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.15.3</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 20. Sep 17:06:29 CEST 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.14.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update So 12. Sep 15:50:58 CEST 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.15.3</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 20. Sep 17:06:29 CEST 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.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.map,Array.prototype.reduce,ArrayBuffer,console,DataView,document,DocumentFragment,Element,Event,globalThis,HTMLDocument,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.trim,Symbol,Symbol.for,Symbol.iterator,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.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.map,Array.prototype.reduce,ArrayBuffer,DataView,document,Document,DocumentFragment,Element,Event,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.trim,Symbol,Symbol.for,Symbol.iterator,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.14.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update So 12. Sep 15:50:58 CEST 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.15.3</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 20. Sep 17:06:29 CEST 2021</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>