@schukai/monster 3.51.4 → 3.52.0

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

@@ -0,0 +1,229 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+let html2 = `
+    <div id="test2">
+    <monster-select
+                        tabindex="0"
+                        data-monster-bind="path:values.checkbox"
+                        data-monster-options='{
+  "url": "mock-data.json",
+  "mapping": {
+    "selector": "*",
+    "valueTemplate": "\${first_name} \${last_name}",
+    "labelTemplate": "id"
+  },
+      "type":"checkbox"
+
+}'></monster-select>
+    </div>
+`;
+
+let Select, fetchReference;
+
+describe('Select', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("element-internals-polyfill").catch(e => done(e));
+
+            fetchReference = global['fetch'];
+
+            import("../../../../source/components/form/select.mjs").then((m) => {
+                Select = m['Select'];
+                done()
+            }).catch(e => done(e))
+
+
+        });
+    })
+
+    describe('With fetch', function () {
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            global['fetch'] = function (url, options) {
+
+                let headers = new Map;
+                headers.set('content-type', 'application/json');
+
+                return new Promise((resolve, reject) => {
+                    resolve({
+                        headers: headers,
+                        text: function () {
+                            return new Promise((resolve2, reject2) => {
+
+                                let json = JSON.parse(`[
+                                          {
+                                            "id": 1,
+                                            "first_name": "Alexia",
+                                            "last_name": "Oughtright",
+                                            "email": "aoughtright0@exblog.jp",
+                                            "gender": "Agender",
+                                            "country": "mn" 
+                                          },
+                                          {
+                                            "id": 2,
+                                            "first_name": "Beth",
+                                            "last_name": "Boddington",
+                                            "email": "bboddington1@statcounter.com",
+                                            "gender": "Non-binary",
+                                            "country": "sy"
+                                          },
+                                          {
+                                            "id": 3,
+                                            "first_name": "Shelli",
+                                            "last_name": "A'Barrow",
+                                            "email": "sabarrow2@google.co.uk",
+                                            "gender": "Polygender",
+                                            "country": "no"
+                                          } ]`);
+
+                                resolve2(JSON.stringify(json))
+
+
+                            })
+
+
+                        }
+                    });
+                })
+
+            };
+
+
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+            global['fetch'] = fetchReference;
+        })
+
+        describe('create from template', function () {
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = html2;
+            });
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
+                global['fetch'] = fetchReference;
+            })
+
+            describe('create from template', function () {
+                it('should contains monster-select', function () {
+                    expect(document.getElementById('test2')).contain.html('<monster-select');
+                });
+            });
+
+        });
+
+        describe('document.createElement', function () {
+            it('should instance of select', function () {
+                const select = document.createElement('monster-select');
+                expect(select).is.instanceof(Select);
+            });
+
+            it('should has options', function (done) {
+
+                let mocks = document.getElementById('mocks');
+                const select = document.createElement('monster-select');
+                select.setOption('url', 'https://example.com')
+                select.setOption('mapping.selector', '*')
+                select.setOption('mapping.labelTemplate', '${id}')
+                select.setOption('mapping.valueTemplate', '${id}')
+
+                const mutationobserver = new MutationObserver(function (mutations) {
+
+                    for (const [, mutation] of mutations.entries()) {
+                        if (mutation.addedNodes[0].tagName === 'MONSTER-SELECT') {
+
+                            setTimeout(() => {
+                                mutationobserver.disconnect();
+                                try {
+
+                                    const options = select.shadowRoot.querySelectorAll('[data-monster-role=option]');
+                                    // 3 options (see fetch above)
+                                    expect(options.length).is.equal(3);
+
+                                    const optionHtml = select.shadowRoot.querySelector('[data-monster-role=options]');
+                                    expect(optionHtml).contain.html('data-monster-insert-reference="options-0"');
+                                    expect(optionHtml).contain.html('data-monster-insert-reference="options-1"');
+                                    expect(optionHtml).contain.html('data-monster-insert-reference="options-2"');
+                                    expect(optionHtml).contain.not.html('data-monster-insert-reference="options-3"');
+
+                                } catch (e) {
+                                    return done(e);
+                                }
+
+                                done();
+
+
+                            }, 0)
+                        }
+                    }
+
+                });
+
+                mutationobserver.observe(mocks, {childList: true});
+                mocks.appendChild(select);
+
+            });
+
+        });
+
+    });
+
+    describe('document.createElement()', function () {
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('should has no options', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const options = select.shadowRoot.querySelector('[data-monster-role=options]');
+
+                    expect(options).is.instanceof(HTMLDivElement);
+
+                    const a = options.parentNode.outerHTML;
+                    const b = options.childNodes.length;
+                    expect(options.hasChildNodes()).to.be.false;
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+
+
+        });
+
+    });
+
+
+});

package/test/cases/components/form/state-button.mjs

@@ -0,0 +1,130 @@
+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 {ResizeObserverMock} from "../../../util/resize-observer.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+let html2 = `
+    <div id="test2">
+    <monster-state-button
+                        tabindex="0"
+                        data-monster-bind="path:values.checkbox"
+                        data-monster-options='{
+  "url": "mock-data.json",
+  "mapping": {
+    "valuePath": "\${first_name} \${last_name}",
+    "keyPath": "id"
+  },
+      "type":"checkbox"
+
+}'></monster-state-button>
+    </div>
+`;
+
+let StateButton;
+
+describe('StateButton', function () {
+
+    after(function () {
+    })
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("element-internals-polyfill").catch(e => done(e));
+
+            if(!global.ResizeObserver) {
+                global.ResizeObserver = ResizeObserverMock;
+            }            
+            
+            import("../../../../source/components/form/state-button.mjs").then((m) => {
+                StateButton = m['StateButton'];
+                done()
+            }).catch(e => done(e))
+
+
+        });
+    })
+
+    describe('new StateButton', 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');
+                mocks.innerHTML = html2;
+            });
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
+
+            })
+
+            describe('create from template', function () {
+                it('should contains monster-state-button', function () {
+                    expect(document.getElementById('test2')).contain.html('<monster-state-button');
+                });
+            });
+
+        });
+
+        describe('document.createElement', function () {
+            it('should instance of state-button', function () {
+                expect(document.createElement('monster-state-button')).is.instanceof(StateButton);
+            });
+        });
+
+    });
+
+    describe('document.createElement()', function () {
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('should has no options', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const button = document.createElement('monster-state-button');
+            mocks.appendChild(button);
+
+            setTimeout(() => {
+                try {
+                    const options = button.shadowRoot.querySelector('button');
+
+                    expect(options).is.instanceof(HTMLButtonElement);
+                    expect(options.hasChildNodes()).to.be.true;
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+
+
+        });
+    });
+
+
+});

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

@@ -0,0 +1,98 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+
+// language=html
+let html1 = `
+    <monster-tabs id="mytabs">
+        <div data-monster-button-label="TAB1">
+            <div>
+                Das ist tab 1
+            </div>
+
+        </div>
+        <div data-monster-button-label="TAB2">
+            Das ist tab 2
+        </div>
+        <div>
+            Das ist tab 3 ohne button
+        </div>
+        <div></div>
+    </monster-tabs>
+`;
+
+let Tabs;
+
+describe('Tabs', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("element-internals-polyfill").catch(e => done(e));
+            
+            let promises = []
+
+            if (!global['crypto']) {
+                promises.push(import("@peculiar/webcrypto").then((m) => {
+                    const Crypto = m['Crypto'];
+                    global['crypto'] = new Crypto();
+                }));
+            }
+
+            promises.push(import("../../../../source/components/form/tabs.mjs").then((m) => {
+                Tabs = m['Tabs'];
+            }))
+
+            Promise.all(promises).then(()=>{
+                done();
+            }).catch(e => done(e))
+
+        });
+    })
+
+    describe('document.createElement()', function () {
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('should has buttons and tabs', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            setTimeout(() => {
+                try {
+                    const tabs = document.getElementById('mytabs')
+                    expect(tabs).is.instanceof(Tabs);
+
+                    setTimeout(() => {
+                        let nav = tabs.shadowRoot.querySelector('nav');
+                        const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
+                        expect(buttons[0]).is.instanceof(HTMLButtonElement);
+                        expect(nav.hasChildNodes()).to.be.true;
+                        expect(buttons.length).to.be.equal(4);
+                        done();
+                    }, 100)
+
+                } catch (e) {
+                    return done(e);
+                }
+
+            }, 0)
+
+
+        });
+
+    });
+
+
+});

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

@@ -0,0 +1,189 @@
+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('Template', function () {
+
+    // jsdom-testing-mocks need jest
+    let Template, 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/template.mjs").then((m) => {
+                Template = m['Template'];
+                done()
+            }).catch(e => done(e))
+
+
+        });
+    })
+
+    describe('new Template', 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-template></monster-template>
+                    </div>
+                `;
+            });
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
+
+            })
+
+            describe('create from template', function () {
+                it('should contains monster-template', function () {
+                    expect(document.getElementById('test2')).contain.html('<monster-template');
+                });
+            });
+
+        });
+
+        describe('document.createElement', function () {
+            it('should instance of template', function () {
+                expect(document.createElement('monster-template')).is.instanceof(Template);
+            });
+        });
+
+    });
+
+    describe('document.createElement()', function () {
+
+        let mocks;
+        beforeEach(() => {
+            mocks = document.getElementById('mocks');
+        })
+
+        afterEach(() => {
+            mocks.innerHTML = "";
+        })
+
+        it('should has no options', function (done) {
+
+            const template = document.createElement('monster-template');
+            mocks.appendChild(template);
+
+            setTimeout(() => {
+                try {
+
+                    expect(document.getElementById('mocks')).contain.html('<monster-template');
+                } 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 template = document.createElement('monster-template');
+            template.setAttribute('data-monster-url', 'http://localhost/')
+            mocks.appendChild(template);
+
+            template.addEventListener('monster-fetched', (event) => {
+                try {
+                    const element = document.querySelector('monster-template');
+                    const shadowRoot = element.shadowRoot;
+
+
+                    expect(shadowRoot).contain.html('hello world');
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+
+
+            })
+
+            mockintersectionobserver.getInstance().enterNode();
+
+        });
+    });
+
+
+});