@schukai/monster 1.12.0 → 1.15.0

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/attributes.js

@@ -8,7 +8,13 @@ import {
     containsAttributeToken,
     replaceAttributeToken,
     clearAttributeTokens,
-    removeAttributeToken, hasObjectLink, addToObjectLink, removeObjectLink, getLinkedObjects, findClosestObjectLink
+    removeAttributeToken,
+    hasObjectLink,
+    addToObjectLink,
+    removeObjectLink,
+    getLinkedObjects,
+    findClosestObjectLink,
+    findClosestByAttribute
 } from "../../../source/dom/attributes.js";
 
 import {initJSDOM} from "../../util/jsdom.js";
@@ -26,6 +32,18 @@ let html2 = `<div id="test1">
     </div>
 </div>
 `;
+let html3 = `<div data-monster-role="test1">
+    <div data-monster-role="sub1" id="a1">
+        <div data-monster-role="sub2" id="a2">
+            <div data-monster-role="sub3" id="a3">
+                <div data-monster-role="sub4" id="a4">
+                    <div data-monster-role="sub5" id="a5"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+`;
 
 describe('Attributes', function () {
     before(function (done) {
@@ -99,6 +117,43 @@ describe('Attributes', function () {
 
     });
 
+    describe('Attributes', function () {
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html3;
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        describe('find closest Attributes', function () {
+
+            [
+                ['a5', 'data-monster-role', undefined, 'sub5'],
+                ['a5', 'data-monster-role', 'sub3', 'sub3'],
+                ['a5', 'data-monster-role', 'sub1', 'sub1'],
+                ['a4', 'data-monster-role', 'sub1', 'sub1'],
+                ['a3', 'data-monster-role', 'sub1', 'sub1'],
+                ['a2', 'data-monster-role', undefined, 'sub2'],
+                ['a5', 'data-monster-role', 'sub5', 'sub5']
+            ].forEach(function (data) {
+
+                let a = data.shift()
+                let b = data.shift()
+                let c = data.shift()
+                let d = data.shift()
+
+                it('findClosestByAttribute(' + a + ', ' + b + ',' + c + ') should return ' + d, function () {
+                    expect(findClosestByAttribute(document.getElementById(a), b, c).getAttribute('data-monster-role')).to.be.equal(d);
+                })
+
+
+            });
+        });
+    });
+
     describe('Attributes', function () {
 
         beforeEach(() => {

package/test/cases/dom/customcontrol.js

@@ -0,0 +1,264 @@
+'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";
+import chai from "chai"
+import {chaiDom} from "../../util/chai-dom.js";
+
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+describe('DOM', function () {
+
+    let CustomControl, registerCustomElement, TestComponent, document, jsdomFlag;
+
+    describe('CustomControl()', function () {
+
+        before(function (done) {
+            initJSDOM().then(() => {
+
+                // jsdom does not support ElementInternals
+                jsdomFlag = navigator.userAgent.includes("jsdom");
+
+                import("../../../source/dom/customelement.js").then((m) => {
+                    registerCustomElement = m['registerCustomElement'];
+
+
+                    import("../../../source/dom/customcontrol.js").then((m) => {
+
+                        document = getDocument();
+
+                        try {
+                            CustomControl = m['CustomControl'];
+
+                            TestComponent = class extends CustomControl {
+                                static getTag() {
+                                    return "monster-customcontrol"
+                                }
+                            }
+                            registerCustomElement(TestComponent)
+
+
+                            done()
+                        } catch (e) {
+                            done(e);
+                        }
+
+
+                    });
+                });
+            });
+        })
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        describe('create', function () {
+            it('should return custom-element object', function () {
+                let d = new TestComponent();
+                expect(typeof d).is.equal('object');
+            });
+        });
+
+        describe('connect empty element', function () {
+            it('document should contain monster-customcontrol', 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>');
+            });
+        });
+
+        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;
+
+            beforeEach(() => {
+                form = document.createElement('form');
+            })
+
+            it('formAssociated', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                expect(d.constructor.formAssociated).to.be.true;
+
+            });
+            it('form', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                if (jsdomFlag) {
+                    expect(() => d.form).to.throw(Error);
+                } else {
+                    expect(d.form).to.be.instanceof(HTMLFormElement)
+                }
+
+
+            });
+
+            it('value getter', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                expect(() => d.value).to.throw(Error);
+
+            });
+
+            it('value setter', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                expect(() => d.value = 4).to.throw(Error);
+
+            });
+
+
+            it('setFormValue', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                if (jsdomFlag) {
+                    expect(() => d.setFormValue()).to.throw(Error);
+                } else {
+
+                }
+
+            });
+
+
+            it('name getter', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                expect(d.name).to.be.null;
+
+            });
+
+            it('type getter', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                expect(d.type).to.be.equal('monster-customcontrol');
+
+            });
+
+            it('validity getter', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+                if (jsdomFlag) {
+                    expect(() => d.validity).to.throw(Error);
+                } else {
+
+                }
+
+            });
+
+            it('validationMessage getter', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                if (jsdomFlag) {
+                    expect(() => d.validity).to.throw(Error);
+                } else {
+
+                }
+
+            });
+
+            it('willValidate getter', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                if (jsdomFlag) {
+                    expect(() => d.willValidate).to.throw(Error);
+                } else {
+
+                }
+
+            });
+            it('checkValidity()', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                if (jsdomFlag) {
+                    expect(() => d.checkValidity()).to.throw(Error);
+                } else {
+
+                }
+
+            });
+
+            it('reportValidity()', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+
+                if (jsdomFlag) {
+                    expect(() => d.reportValidity()).to.throw(Error);
+                } else {
+
+                }
+
+            });
+
+
+            it('setValidity()', function () {
+
+                let d = document.createElement('monster-customcontrol');
+                form.appendChild(d);
+                if (jsdomFlag) {
+                    expect(() => d.setValidity()).to.throw(Error);
+                } else {
+                    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,70 +16,75 @@ let html1 = `
     </div>
 `;
 
+const internalDataSymbol = Symbol.for(PROPERTY_KEY_INTERNALDATA);
+
 describe('DOM', function () {
 
     let CustomElement, registerCustomElement, TestComponent, document, TestComponent2;
 
-    before(function (done) {
-        initJSDOM().then(() => {
 
-            import("../../../source/dom/customelement.js").then((m) => {
+    describe('CustomElement()', function () {
 
-                try {
-                    CustomElement = m['CustomElement'];
-                    registerCustomElement = m['registerCustomElement'];
-                    TestComponent = class extends CustomElement {
-                        static getTag() {
-                            return "monster-testclass"
-                        }
-                    }
-                    registerCustomElement(TestComponent)
 
-                    TestComponent2 = class extends CustomElement {
-                        static getTag() {
-                            return "monster-testclass2"
-                        }
+        before(function (done) {
+            initJSDOM().then(() => {
+
+                import("../../../source/dom/customelement.js").then((m) => {
 
-                        /**
-                         *
-                         * @return {Object}
-                         */
-                        get defaults() {
-
-                            return Object.assign({}, super.defaults, {
-                                templates: {
-                                    main: '<h1></h1><article><p>test</p></article>'
-                                },
-                            })
+                    try {
+                        CustomElement = m['CustomElement'];
+                        registerCustomElement = m['registerCustomElement'];
+                        TestComponent = class extends CustomElement {
+                            static getTag() {
+                                return "monster-testclass"
+                            }
                         }
 
-                    }
+                        registerCustomElement(TestComponent)
 
-                    registerCustomElement(TestComponent2)
+                        TestComponent2 = class extends CustomElement {
+                            static getTag() {
+                                return "monster-testclass2"
+                            }
 
-                    document = getDocument();
-                    done()
-                } catch (e) {
-                    done(e);
-                }
+                            /**
+                             *
+                             * @return {Object}
+                             */
+                            get defaults() {
 
+                                return Object.assign({}, super.defaults, {
+                                    templates: {
+                                        main: '<h1></h1><article><p>test</p></article>'
+                                    },
+                                })
+                            }
 
-            });
+                        }
 
-        });
-    })
+                        registerCustomElement(TestComponent2)
 
-    beforeEach(() => {
-        let mocks = document.getElementById('mocks');
-        mocks.innerHTML = html1;
-    })
+                        document = getDocument();
+                        done()
+                    } catch (e) {
+                        done(e);
+                    }
 
-    afterEach(() => {
-        let mocks = document.getElementById('mocks');
-        mocks.innerHTML = "";
-    })
 
-    describe('CustomElement()', function () {
+                });
+
+            });
+        })
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
 
         describe('create', function () {
             it('should return custom-element object', function () {
@@ -99,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 () {
 
             [