@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(async function () {

        await initJSDOM();
        await import("element-internals-polyfill");

        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>
`

        const m = await import("../../../../source/components/form/confirm-button.mjs");
        ConfirmButton = m['ConfirmButton'];
    })

    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)


        });

        it('should use fixed positioning by default', function (done) {

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

            setTimeout(() => {
                try {
                    button.showDialog();

                    const popper = button.shadowRoot.querySelector('[data-monster-role="popper"]');
                    expect(popper).to.exist;
                    expect(popper.style.position).to.equal('fixed');
                } catch (e) {
                    return done(e);
                }

                done();
            }, 0)


        });

        it('should keep bottom space below the decision buttons', function () {

            const cssText = ConfirmButton.getCSSStyleSheet()
                .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
                .map((rule) => rule.cssText)
                .join("\n");

            expect(cssText).to.contain('div[data-monster-role=decision]');
            expect(cssText).to.contain('padding-bottom: 0.75rem');

        });
    });


});