@schukai/monster/test/cases/components/form/state-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";
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 have 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)


        });
    });


});