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

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

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";

let expect = chai.expect;
chai.use(chaiDom);

const global = getGlobal();

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

let html2 = `
    <div id="test2">
    <monster-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-button>
    </div>
`;

let Button;

describe('Button', function () {

    before(function (done) {
        initJSDOM().then(() => {

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

        });
    })

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

        });

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

    });

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

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

        it('should have no options', function (done) {

            let mocks = document.getElementById('mocks');
            const button = document.createElement('monster-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();
            }, 100)


        });
    });


});