@schukai/monster/test/cases/components/form/confirm-button.mjs

Monster is a simple library for creating fast, robust and lightweight websites.

import {DataUrl} from "../../../../source/types/dataurl.mjs";

import {getGlobal} from "../../../../source/types/global.mjs";
import * as 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, options, html2, ConfirmButton;

describe('ConfirmButton', function () {

    before(function (done) {

        import("element-internals-polyfill").catch(e => done(e));    
        
        if(!global.ResizeObserver) {
            global.ResizeObserver = ResizeObserverMock;
        }

        options = new DataUrl(btoa(JSON.stringify({
            popper: {
                placement: "top"
            },
        })), 'application/json', true).toString()

        html2 = `
    <div id="test2">
    <monster-confirm-button
                        tabindex="0"
                        data-monster-bind="path:values.checkbox"
                        data-monster-options="` + options + `"></monster-confirm-button>
    </div>
`;

        html1 = `
    <div id="test1">
    </div>
`


        initJSDOM().then(() => {

            import("../../../../source/components/form/confirm-button.mjs").then((m) => {
                ConfirmButton = m['ConfirmButton'];
                done()
            }).catch(e => done(e))


        });
    })

    describe('new ConfirmButton', 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-confirm-button', function () {
                    expect(document.getElementById('test2')).contain.html('<monster-confirm-button');
                });
            });

        });

        describe('document.createElement', function () {
            it('should instance of button', function () {
                expect(document.createElement('monster-confirm-button')).is.instanceof(ConfirmButton);
            });
        });

    });

    describe('document.createElement()', function () {

        afterEach(() => {
            let mocks = document.getElementById('mocks');
            mocks.innerHTML = "";
        })

        it('should have childs', function (done) {

            let mocks = document.getElementById('mocks');
            const button = document.createElement('monster-confirm-button');
            mocks.appendChild(button);

            setTimeout(() => {
                try {
                    const content = button.shadowRoot.querySelector('monster-button');
                    expect(content.hasChildNodes()).to.be.true;
                } catch (e) {
                    return done(e);
                }

                done();
            }, 0)


        });
    });


});