@schukai/monster/test/cases/components/form/template.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 {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 have 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();

        });
    });


});