@schukai/monster 3.51.5 → 3.52.0

package/test/cases/components/form/form.mjs

@@ -0,0 +1,317 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+import {Datasource} from "../../../../source/data/datasource.mjs";
+import {Processing} from "../../../../source/util/processing.mjs";
+
+import {storageObjectSymbol} from "../../../../source/data/datasource/storage.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let html1 = `
+    <div id="test1">
+    <monster-form id="form1"></monster-form>
+    </div>
+`;
+let html2 = `
+    <div id="test2">
+        <monster-form id="form2"
+                      data-monster-datasource="localstorage"
+                      data-monster-datasource-arguments='"test-key"'>
+            <div>
+                <div>
+                    <input name="control1"
+                           id="control1"
+                           data-monster-bind="path:a">
+                </div>
+            </div>
+            <div>
+                <input name="control2"
+                       data-monster-bind="path:b">
+            </div>
+
+        </monster-form>
+    </div>
+`;
+let html3 = `
+    <div id="test3">
+        <monster-form id="form3">
+            <div>
+                <div>
+                    <input name="control1"
+                           id="control1"
+                           data-monster-attributes="value path:a"
+                           data-monster-bind="path:a">
+                </div>
+            </div>
+            <div>
+                <input name="control2"
+                       data-monster-attributes="value path:b"
+                       data-monster-bind="path:b">
+            </div>
+            <button id="button1" data-monster-datasource-handler="write">Button</button>
+
+        </monster-form>
+    </div>
+`;
+
+describe('Form', function () {
+
+    let form;
+
+    before(function (done) {
+
+        import("element-internals-polyfill").catch(e => done(e));
+        
+        initJSDOM().then((x) => {
+            import("../../../../source/components/form/form.mjs").then((m) => {
+                form = m['Form'];
+                done()
+            }).catch(e => done(e))
+        });
+    })
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+        localStorage.removeItem('test-key')
+    })
+
+
+    describe("register own datasources", function () {
+
+        const sym = Symbol.for('@schukai/monster/data/datasource/@@data');
+
+        let test3Datasource = class extends Datasource {
+            constructor() {
+                super();
+            }
+
+            read() {
+                this[sym].setSubject({a: "test3", b: "test3"})
+                return Promise.resolve();
+            }
+
+            get() {
+                const self = this;
+                return self[sym].getRealSubject();
+            }
+
+        }
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html3;
+
+            // register own datasource, after the form is loaded
+            // because in the wild, the form is parsed before the datasource is registered
+            form.registerDatasource('test3', test3Datasource);
+
+
+        });
+
+        it("should be able to register own datasources", function (done) {
+            let m = form.getDatasources('test3')
+            expect(m.get('test3')).is.a.equal(test3Datasource);
+
+            const testDatasource = new test3Datasource();
+
+            const formElement = document.getElementById('form3');
+            formElement.setOption("datasource", testDatasource);
+            formElement.refresh().then(() => {
+                const v = formElement.getValues()
+                expect(v).is.deep.equal({a: "test3", b: "test3"})
+                done();
+            }).catch(e => done(e))
+
+
+        })
+
+
+    })
+
+    describe("register and unregister datasources", function () {
+        const TestDatasource = class extends Datasource {
+            constructor() {
+                super();
+            }
+        }
+
+        it("should register new datasource", function () {
+
+            form.registerDatasource('test', TestDatasource);
+            let m = form.getDatasources('test')
+            expect(m.get('test')).is.a.equal(TestDatasource);
+
+            form.unregisterDatasource('test');
+            m = form.getDatasources('test')
+
+            expect(m.get('test')).to.be.undefined;
+        })
+
+    })
+
+
+    describe("example4-doc", function () {
+
+            it("should init button with click event", function (done) {
+
+                class MockDatasource extends Datasource {
+
+                    constructor() {
+                        super();
+                    }
+
+                    read() {
+                        return Promise.resolve({});
+                    }
+
+                    write(data) {
+                        // done();
+                    }
+
+                    [storageObjectSymbol]() {
+                        return localStorage;
+                    }
+
+                }
+
+                const form4 = document.createElement('monster-form');
+                const datasource4 = new MockDatasource();
+                expect(datasource4 instanceof Datasource).is.true;
+                form4.setOption('datasource', datasource4)
+
+                const input4 = document.createElement('input')
+                input4.setAttribute('name', 'field');
+                input4.setAttribute('data-monster-attributes', 'value path:headers.Host');
+                input4.setAttribute('data-monster-bind', 'path:headers.Host');
+                form4.appendChild(input4);
+
+                const button4 = document.createElement('monster-state-button');
+                button4.setOption('labels.button', 'click!')
+                button4.setAttribute('data-monster-datasource-handler', 'write')
+                button4.setOption('actions.click', () => {
+                    
+                })
+
+                form4.appendChild(button4);
+
+                document.getElementById('mocks').appendChild(form4);
+
+                new Processing().add(() => {
+                        button4.click();
+                    }
+                ).run().then(() => {
+                    done();
+                }).catch(e => done(e))
+
+
+            })
+
+
+        }
+    )
+
+    describe('document.createElement()', function () {
+
+        it('should contain objectlink', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const formControl = document.createElement('monster-form');
+            mocks.appendChild(formControl);
+
+            setTimeout(() => {
+                try {
+                    expect(document.getElementById('mocks')).contain.html('<monster-form data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-form>')
+                    done();
+                } catch (e) {
+                    return done(e);
+                }
+
+
+            }, 0)
+
+
+        });
+
+    });
+
+    describe('HTML-Templates', function () {
+
+        describe('create from template html1', function () {
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = html1;
+                localStorage.setItem('test-key', '{}')
+            });
+
+            it('should contains monster-form', function () {
+                expect(document.getElementById('test1')).contain.html('<monster-form');
+            });
+
+
+        });
+
+        describe('create from template html2', function () {
+
+            beforeEach((done) => {
+                localStorage.setItem('test-key', JSON.stringify({
+                    a: true,
+                    b: 7,
+                    c: [1, 5, 6],
+                    d: {
+                        e: true
+                    }
+                }))
+                let mocks = document.getElementById('mocks');
+
+                try {
+                    mocks.innerHTML = html2;
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+
+            });
+
+            it('should contains monster-form', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = html2;
+
+                expect(document.getElementById('test2')).contain.html('<monster-form');
+            });
+
+            it('should click', function (done) {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = html2;
+
+                expect(document.getElementById('test2')).contain.html('<monster-form');
+
+                setTimeout(() => {
+
+                    const form = document.getElementById('form2');
+                    if (!form.shadowRoot) {
+                        return done(new Error('no shadowRoot'))
+                    }
+                    const control1 = form.shadowRoot.querySelector('slot').assignedElements()[0].querySelector('input')
+                    control1.click();
+
+
+                    done();
+                }, 1)
+
+            });
+
+
+        });
+
+
+    })
+
+})

package/test/cases/components/form/reload.mjs

@@ -0,0 +1,188 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {setupIntersectionObserverMock} from "../../../util/intersection-mock.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+let mockintersectionobserver;
+
+let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+describe('Reload', function () {
+
+    // jsdom-testing-mocks need jest
+    let Reload, viewport, mockViewport;
+
+    after(function () {
+        mockintersectionobserver.restore();
+    })
+
+    before(function (done) {
+
+        
+        
+        initJSDOM().then(() => {
+
+            import("element-internals-polyfill").catch(e => done(e));
+            
+            mockintersectionobserver = setupIntersectionObserverMock();
+
+            import("../../../../source/components/form/reload.mjs").then((m) => {
+                Reload = m['Reload'];
+                done()
+            }).catch(e => done(e))
+
+
+        });
+    })
+
+    describe('new Reload', function () {
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        describe('create from template', function () {
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                // language=HTML
+                mocks.innerHTML = `
+                    <div id="test2">
+                        <monster-reload></monster-reload>
+                    </div>
+                `;
+            });
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
+
+            })
+
+            describe('create from template', function () {
+                it('should contains monster-reload', function () {
+                    expect(document.getElementById('test2')).contain.html('<monster-reload');
+                });
+            });
+
+        });
+
+        describe('document.createElement', function () {
+            it('should instance of reload', function () {
+                expect(document.createElement('monster-reload')).is.instanceof(Reload);
+            });
+        });
+
+    });
+
+    describe('document.createElement()', function () {
+
+        let mocks;
+        beforeEach(() => {
+            mocks = document.getElementById('mocks');
+        })
+
+        afterEach(() => {
+            mocks.innerHTML = "";
+        })
+
+        it('should has no options', function (done) {
+
+            const reload = document.createElement('monster-reload');
+            mocks.appendChild(reload);
+
+            setTimeout(() => {
+                try {
+
+                    expect(document.getElementById('mocks')).contain.html('<monster-reload');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+
+
+        });
+    });
+
+
+    describe('load content', function () {
+
+        let mocks, fetchReference, intersectionObserver;
+        beforeEach((done) => {
+            mocks = document.getElementById('mocks');
+            // language=HTML
+            mocks.innerHTML = `
+                <div id="this-content">
+
+                </div>
+            `;
+
+            fetchReference = global['fetch'];
+
+            global['fetch'] = function (url, options) {
+
+                let headers = new Map;
+                headers.set('content-type', 'text/html');
+
+                return new Promise((resolve, reject) => {
+                    resolve({
+                        ok:true,
+                        status:200,
+                        headers: headers,
+                        text: function () {
+                            return new Promise((resolve2, reject2) => {
+                                resolve2('hello world!')
+                            })
+                        }
+                    });
+                })
+
+            };
+            done();
+        })
+
+        afterEach(() => {
+            mocks.innerHTML = "";
+            global['fetch'] = fetchReference;
+        })
+
+        it('should load content from url', function (done) {
+
+            const reload = document.createElement('monster-reload');
+            reload.setAttribute('data-monster-url', 'http://localhost/')
+
+            reload.addEventListener('monster-fetched', (event) => {
+                try {
+                    const element = document.querySelector('monster-reload');
+                    expect(element).contain.html('hello world');
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+            })
+
+            mocks.appendChild(reload);
+            mockintersectionobserver.getInstance().enterNode();
+
+        });
+    });
+
+
+});