@schukai/monster 1.24.0 → 1.27.0

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));
+
+
+        });
+
+
+    });
+
+
+});

package/test/cases/dom/resourcemanager.js

@@ -0,0 +1,118 @@
+'use strict';
+
+import {expect} from "chai"
+
+import {ResourceManager} from "../../../source/dom/resourcemanager.js";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../util/cleanupdom.js";
+import {initJSDOM} from "../../util/jsdom.js";
+
+describe('ResourceManager', function () {
+
+    let fetchReference, returnStatus;
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            done()
+        }).catch(e => done(e));
+    });
+
+    afterEach(() => {
+        global['fetch'] = fetchReference;
+        cleanupDOMFromTesting();
+    })
+
+    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
+                });
+            })
+
+        };
+
+    })
+
+    describe('new', function () {
+        it('new ResourceManager() should return ResourceManager object', function () {
+            let d = new ResourceManager();
+            expect(d).to.be.instanceOf(ResourceManager);
+        });
+    });
+
+    describe('load resources', function () {
+
+        let manager;
+
+        beforeEach(() => {
+            manager = new ResourceManager();
+        })
+
+        it('add script should instance of ResourceManager', function () {
+            expect(manager.addScript('/example.js')).to.be.instanceOf(ResourceManager);
+        });
+
+        it('add style should instance of ResourceManager', function () {
+            expect(manager.addStylesheet('/style.js')).to.be.instanceOf(ResourceManager);
+        });
+
+        it('add data should instance of ResourceManager', function () {
+            expect(manager.addData('/data.json')).to.be.instanceOf(ResourceManager);
+        });
+
+        describe('connect resources', function () {
+            it('add script and connect should instance of ResourceManager', function () {
+                expect(manager.addScript('/example.js').connect()).to.be.instanceOf(ResourceManager);
+            });
+
+            it('add style and connect should instance of ResourceManager', function () {
+                expect(manager.addStylesheet('/style.js').connect()).to.be.instanceOf(ResourceManager);
+            });
+
+            it('add data and connect  should instance of ResourceManager', function () {
+                expect(manager.addData('/data.json').connect()).to.be.instanceOf(ResourceManager);
+            });
+        })
+
+
+        describe('check availability resources', function () {
+            it('add script and check availability should return Promise', function () {
+                expect(manager.addScript('/example.js').available()).to.be.instanceOf(Promise);
+            });
+
+            it('add style and check availability should should return Promise', function () {
+                expect(manager.addStylesheet('/style.js').available()).to.be.instanceOf(Promise);
+            });
+
+            it('add data and check availability  should should return Promise', function () {
+                expect(manager.addData('/data.json').available()).to.be.instanceOf(Promise);
+            });
+        })
+
+        describe('check availability example.json', function () {
+            it('add data and check content', function (done) {
+                manager.addData('https://example.com/example.json').connect().available().then(r => {
+                    expect(document.querySelector('html').outerHTML).contains('>{"a":"test"}</script></head>');
+                    done();
+                }).catch(e => done(e));
+            });
+
+        })
+
+    });
+
+
+});