@schukai/monster 1.23.0 → 1.26.1

package/test/cases/dom/customelement.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import chai from "chai"
-import {PROPERTY_KEY_INTERNALDATA} from "../../../source/constants.js";
+import {internalSymbol} from "../../../source/constants.js";
 import {ATTRIBUTE_OPTIONS} from "../../../source/dom/constants.js";
 import {getDocument} from "../../../source/dom/util.js";
 import {chaiDom} from "../../util/chai-dom.js";
@@ -16,13 +16,12 @@ let html1 = `
     </div>
 `;
 
-const internalDataSymbol = Symbol.for(PROPERTY_KEY_INTERNALDATA);
+
 
 describe('DOM', function () {
 
     let CustomElement, registerCustomElement, TestComponent, document, TestComponent2;
 
-
     describe('CustomElement()', function () {
 
 
@@ -98,7 +97,8 @@ 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 data-monster-objectlink="Symbol(monsterUpdater)"></monster-testclass>');
+                // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
+                expect(document.getElementById('test1')).contain.html('<monster-testclass></monster-testclass>');
             });
         });
 
@@ -113,11 +113,11 @@ describe('DOM', function () {
                         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><div id="container"></div></article>');
                         expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(monsterUpdater)"></monster-testclass2>');
-                        return  done();
+                        return done();
                     } catch (e) {
                         done(e);
                     }
-                   
+
                 }, 10);
 
             });
@@ -128,20 +128,20 @@ describe('DOM', 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;
+                const o = element[internalSymbol].realSubject;
+                expect(Object.is(element[internalSymbol].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[internalSymbol].realSubject.options.delegatesFocus).to.be.true;
+                expect(element[internalSymbol].subject.options.delegatesFocus).to.be.true;
                 expect(element.getOption('delegatesFocus')).to.be.true;
-                expect(Object.is(element[internalDataSymbol].realSubject, o)).to.be.true;
+                expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
 
                 element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
-                expect(Object.is(element[internalDataSymbol].realSubject, o)).to.be.true;
+                expect(Object.is(element[internalSymbol].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;
+                expect(element[internalSymbol].realSubject.options.delegatesFocus).to.be.false;
+                expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
 
             })
 
@@ -239,8 +239,6 @@ describe('DOM', function () {
 
                 let n1 = document.createElement('p');
 
-                console.log(document.body.innerHTML)
-
                 expect(d.hasNode(n1)).to.be.false;
                 expect(d.hasNode(t)).to.be.true;
                 expect(d.hasNode(p)).to.be.true;

package/test/cases/dom/focusmanager.js

@@ -0,0 +1,111 @@
+'use strict';
+
+import {expect} from "chai";
+import {FocusManager} from "../../../source/dom/focusmanager.js";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../util/cleanupdom.js";
+import {initJSDOM} from "../../util/jsdom.js";
+
+describe('FocusManager', function () {
+    before(function (done) {
+        initJSDOM().then(() => {
+            done()
+        });
+    });
+
+    beforeEach(() => {
+        initMutationObserverForTesting()
+    })
+
+    afterEach(() => {
+        cleanupDOMFromTesting();
+        document.getElementById('mocks').innerHTML = ''
+    })
+
+    describe('new', function () {
+
+        it('should instance of FocusManager', function () {
+            expect(new FocusManager()).is.instanceof(FocusManager);
+        })
+
+    })
+
+    describe('store and restore', function () {
+        let manager;
+
+        beforeEach(() => {
+            manager = new FocusManager();
+            document.getElementById('mocks').innerHTML = `
+            <input class="testit" id="tx1">
+            <input class="testit" id="tx2">
+            <input class="testit" id="tx3" disabled>
+            <input class="testit" id="tx4">
+            <p class="testit" tabindex="2" id="tx5">hello</p>
+            <input class="testit" id="tx6" aria-hidden="true">
+            <button class="testit" id="tx7"></button>
+            `;
+
+            for (const [, element] of Object.entries(document.querySelectorAll('.testit'))) {
+                element.getBoundingClientRect = () => ({
+                    width: 200,
+                    height: 200,
+                    top: 0,
+                    left: 0,
+                    right: 200,
+                    bottom: 200,
+                });
+            }
+
+
+        })
+
+        it('run ist', function () {
+
+            manager.focus(document.getElementById('tx1'));
+            manager.storeFocus();
+
+            const e1 = manager.getActive();
+            expect(e1.getAttribute('id'), 'error1').to.be.equal('tx1');
+
+            manager.focus(document.getElementById('tx2'));
+
+            manager.storeFocus();
+            expect(manager.getActive().getAttribute('id'), 'error2').to.be.equal('tx2');
+            manager.focusNext();
+            expect(manager.getActive().getAttribute('id'), 'error3').to.be.equal('tx4');
+            manager.focusNext();
+            expect(manager.getActive().getAttribute('id'), 'error4').to.be.equal('tx5');
+            manager.restoreFocus();
+            expect(manager.getActive().getAttribute('id'), 'error5').to.be.equal('tx2');
+            manager.restoreFocus();
+            expect(manager.getActive().getAttribute('id'), 'error6').to.be.equal('tx1');
+            manager.restoreFocus();
+            expect(manager.getActive().getAttribute('id'), 'error7').to.be.equal('tx1');
+        })
+
+
+    })
+
+    describe('returntype', function () {
+
+        let focusmanager;
+
+        beforeEach(() => {
+            focusmanager = new FocusManager();
+        })
+
+        it('check returns', function () {
+
+            expect(focusmanager.getFocusable()).is.instanceof(Array);
+            expect(focusmanager.getActive()).is.instanceof(HTMLElement);
+            expect(focusmanager.focusNext()).is.instanceof(FocusManager);
+            expect(focusmanager.focusPrev()).is.instanceof(FocusManager);
+            expect(focusmanager.storeFocus()).is.instanceof(FocusManager);
+            expect(focusmanager.focus(document.body)).is.instanceof(FocusManager);
+            expect(focusmanager.restoreFocus()).is.instanceof(FocusManager);
+
+        })
+
+    })
+
+
+});

package/test/cases/dom/locale.js

@@ -2,10 +2,7 @@
 
 import {expect} from "chai"
 
-import {
-    getLocaleOfDocument
-} from "../../../source/dom/locale.js";
-import {Template} from "../../../source/dom/template.js";
+import {getLocaleOfDocument} from "../../../source/dom/locale.js";
 import {initJSDOM} from "../../util/jsdom.js";
 
 describe('Attributes', function () {

package/test/cases/dom/resource/data.js

@@ -0,0 +1,129 @@
+'use strict';
+
+import chai from "chai"
+import {Data} from "../../../../source/dom/resource/data.js";
+import {DataUrl} from "../../../../source/types/dataurl.js";
+import {ID} from "../../../../source/types/id.js";
+import {chaiDom} from "../../../util/chai-dom.js";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../../util/cleanupdom.js";
+import {initJSDOM} from "../../../util/jsdom.js";
+
+let expect = chai.expect;
+
+chai.use(chaiDom);
+
+let html1 = `
+
+`;
+
+
+describe('Data', function () {
+
+    let fetchReference, returnStatus, mutationobserver, addedNodes = [];
+
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            done()
+        });
+    });
+
+    beforeEach(() => {
+
+        initMutationObserverForTesting()
+
+        returnStatus = 200;
+        fetchReference = global['fetch'];
+        global['fetch'] = function (url, options) {
+
+            if (!url) throw new Error('missing url')
+
+            return new Promise((resolve, reject) => {
+                resolve({
+                    text: function () {
+                        return JSON.stringify({
+                            a: "test"
+                        })
+                    },
+                    status: returnStatus
+                });
+            })
+
+        };
+
+
+    })
+
+    afterEach(() => {
+        global['fetch'] = fetchReference;
+        cleanupDOMFromTesting();
+    })
+
+    describe('Data()', function () {
+        it('setEventTypes()', function (done) {
+
+            const data = new Data({
+                src: new DataUrl('', 'text/javascript').toString()
+            });
+
+            data.connect().available().then(() => {
+                done()
+            }).catch(e => done(e));
+
+        })
+    });
+
+    describe('External Data', () => {
+
+        let id = new ID('data').toString();
+        let server, data, url = 'https://monsterjs.org/assets/empty.js?' + id;
+
+        beforeEach(() => {
+
+            data = new Data({
+                src: url,
+                id: id
+            });
+
+        });
+
+        it('data is not connected', () => {
+            expect(data.isConnected()).to.be.false;
+        })
+
+        it('connect and check availability', (done) => {
+
+            data.connect().available().then(() => {
+                expect(data.isConnected(), 'isConnected 1').to.be.true;
+                expect(document.querySelector('[type="application/json"]'), 'exists 1').to.exist;
+
+                const e = document.getElementById(id).parentElement;
+
+
+                document.getElementById(id).remove();
+
+                expect(data.isConnected(), 'isConnected 2').to.be.false;
+                expect(document.querySelector('[type="application/json"]'), 'exists 2').not.to.exist;
+
+                data.connect().available().then(() => {
+                    expect(data.isConnected(), 'isConnected 3').to.be.true;
+                    expect(document.querySelector('[type="application/json"]'), 'exists 3').to.exist;
+
+                    document.getElementById(id).remove();
+                    expect(document.querySelector('[type="application/json"]'), 'exists 4').not.to.exist;
+                    expect(data.isConnected(), 'isConnected 4').to.be.false;
+
+                    done()
+                }).catch(e => done(e));
+
+
+            }).catch(e => done(e));
+
+
+        });
+
+
+    });
+
+
+});

package/test/cases/dom/resource/link/stylesheet.js

@@ -0,0 +1,101 @@
+'use strict';
+
+import chai from "chai"
+import {Stylesheet} from "../../../../../source/dom/resource/link/stylesheet.js";
+import {DataUrl} from "../../../../../source/types/dataurl.js";
+import {ID} from "../../../../../source/types/id.js";
+import {chaiDom} from "../../../../util/chai-dom.js";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../../../util/cleanupdom.js";
+import {initJSDOM} from "../../../../util/jsdom.js";
+
+let expect = chai.expect;
+
+chai.use(chaiDom);
+
+let html1 = `
+
+`;
+
+
+describe('Stylesheet', function () {
+
+    before(function (done) {
+        initJSDOM({
+            runScripts: "dangerously",
+            resources: "usable"
+        }).then(() => {
+            done()
+        }).catch(e => done(e));
+    });
+
+    beforeEach(() => {
+        initMutationObserverForTesting()
+    })
+
+    afterEach(() => {
+        cleanupDOMFromTesting();
+    })
+
+    describe('Stylesheet()', function () {
+        it('connect().available()', function (done) {
+
+            const stylesheet = new Stylesheet({
+                href: new DataUrl('', 'text/css').toString(),
+            });
+
+            stylesheet.connect().available().then(() => {
+                const id = stylesheet.getOption('id')
+                done()
+            }).catch(e => done(e));
+
+        })
+    });
+
+    describe('External Stylesheet', () => {
+
+        let id = new ID('Stylesheet').toString();
+        let stylesheet, url = 'https://monsterjs.org/assets/empty.css?' + id;
+
+        beforeEach(() => {
+
+            stylesheet = new Stylesheet({
+                href: url,
+                id: id,
+            });
+
+        });
+
+        it('append and remove Stylesheet ', (done) => {
+
+            expect(stylesheet.isConnected()).to.be.false;
+
+            stylesheet.connect().available().then(() => {
+                expect(stylesheet.isConnected()).to.be.true;
+                expect(document.querySelector('[href="' + url + '"]')).to.exist;
+
+                document.getElementById(id).remove();
+                expect(stylesheet.isConnected()).to.be.false;
+                expect(document.querySelector('[href="' + url + '"]')).not.to.exist;
+
+                stylesheet.connect().available().then(() => {
+                    expect(stylesheet.isConnected()).to.be.true;
+                    expect(document.querySelector('[href="' + url + '"]')).to.exist;
+
+                    document.getElementById(id).remove();
+                    expect(document.querySelector('[href="' + url + '"]')).not.to.exist;
+                    expect(stylesheet.isConnected()).to.be.false;
+
+                    done()
+                }).catch(e => done(e));
+
+
+            }).catch(e => done(e));
+
+
+        });
+
+
+    });
+
+
+});

package/test/cases/dom/resource/link.js

@@ -0,0 +1,101 @@
+'use strict';
+
+import chai from "chai"
+import {Link} from "../../../../source/dom/resource/link.js";
+import {DataUrl} from "../../../../source/types/dataurl.js";
+import {ID} from "../../../../source/types/id.js";
+import {chaiDom} from "../../../util/chai-dom.js";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../../util/cleanupdom.js";
+import {initJSDOM} from "../../../util/jsdom.js";
+
+let expect = chai.expect;
+
+chai.use(chaiDom);
+
+let html1 = `
+
+`;
+
+
+describe('Link', function () {
+
+    let mutationobserver, addedNodes=[];
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            done()
+        });
+    });
+
+    beforeEach(() => {
+        initMutationObserverForTesting()
+    })
+
+    afterEach(() => {
+        cleanupDOMFromTesting();
+    })
+
+    describe('Link()', function () {
+        it('connect().available()', function (done) {
+
+            const link = new Link({
+                href: new DataUrl('', 'text/css').toString(),
+                rel: 'stylesheet'
+            });
+
+            link.connect().available().then(() => {
+                done()
+            }).catch(e => done(e));
+
+        })
+    });
+
+    describe('External Link', () => {
+
+        let id = new ID('link').toString();
+        let link, url = 'https://monsterjs.org/assets/empty.css?' + id;
+
+        beforeEach(() => {
+
+            link = new Link({
+                href: url,
+                id: id,
+                rel: 'stylesheet'
+            });
+
+        });
+
+        it('append and remove Link ', (done) => {
+
+            expect(link.isConnected()).to.be.false;
+
+            link.connect().available().then(() => {
+                expect(link.isConnected()).to.be.true;
+                expect(document.querySelector('[href="' + url + '"]')).to.exist;
+
+                document.getElementById(id).remove();
+                expect(link.isConnected()).to.be.false;
+                expect(document.querySelector('[href="' + url + '"]')).not.to.exist;
+
+                link.connect().available().then(() => {
+                    expect(link.isConnected()).to.be.true;
+                    expect(document.querySelector('[href="' + url + '"]')).to.exist;
+
+                    document.getElementById(id).remove();
+                    expect(document.querySelector('[href="' + url + '"]')).not.to.exist;
+                    expect(link.isConnected()).to.be.false;
+
+                    done()
+                }).catch(e => done(e));
+
+
+            }).catch(e => done(e));
+
+
+        });
+
+
+    });
+
+
+});

package/test/cases/dom/resource/script.js

@@ -0,0 +1,115 @@
+'use strict';
+
+import chai from "chai"
+import {Script} from "../../../../source/dom/resource/script.js";
+import {DataUrl} from "../../../../source/types/dataurl.js";
+import {ID} from "../../../../source/types/id.js";
+import {chaiDom} from "../../../util/chai-dom.js";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../../util/cleanupdom.js";
+import {initJSDOM} from "../../../util/jsdom.js";
+
+let expect = chai.expect;
+
+chai.use(chaiDom);
+
+let html1 = `
+
+`;
+
+
+describe('Script', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            done()
+        });
+    });
+
+    beforeEach(() => {
+        initMutationObserverForTesting()
+    })
+
+    afterEach(() => {
+        cleanupDOMFromTesting();
+    })
+
+    describe('Script()', function () {
+        it('setEventTypes()', function (done) {
+
+            const script = new Script({
+                src: new DataUrl('', 'text/javascript').toString(),
+                async: true,
+                crossOrigin: 'anonymous',
+                defer: false,
+                integrity: undefined,
+                nomodule: false,
+                nonce: undefined,
+                referrerpolicy: undefined,
+                type: 'text/javascript'
+            });
+
+            script.connect().available().then(() => {
+
+                const id = script.getOption('id')
+                done()
+            }).catch(e => done(e));
+
+        })
+    });
+
+    describe('External JS', () => {
+
+        let id = new ID('script').toString();
+        let server, script, url = 'https://monsterjs.org/assets/empty.js?' + id;
+
+        beforeEach(() => {
+
+            script = new Script({
+                src: url,
+                async: true,
+                crossOrigin: 'anonymous',
+                defer: false,
+                integrity: undefined,
+                nomodule: false,
+                nonce: undefined,
+                referrerpolicy: undefined,
+                type: 'text/javascript',
+                id: id
+            });
+
+        });
+
+        it('append and remove script ', (done) => {
+
+            expect(script.isConnected()).to.be.false;
+
+            script.connect().available().then(() => {
+                expect(script.isConnected()).to.be.true;
+                expect(document.querySelector('[src="' + url + '"]')).to.exist;
+
+                document.getElementById(id).remove();
+                expect(script.isConnected()).to.be.false;
+                expect(document.querySelector('[src="' + url + '"]')).not.to.exist;
+
+                script.connect().available().then(() => {
+                    expect(script.isConnected()).to.be.true;
+                    expect(document.querySelector('[src="' + url + '"]')).to.exist;
+
+                    document.getElementById(id).remove();
+                    expect(document.querySelector('[src="' + url + '"]')).not.to.exist;
+                    expect(script.isConnected()).to.be.false;
+
+                    done()
+                }).catch(e => done(e));
+
+
+            }).catch(e => done(e));
+
+
+        });
+
+
+    });
+
+
+});