@schukai/monster/test/cases/components/form/reload.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('Reload', function () {

    // jsdom-testing-mocks need jest
    let Reload, 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/reload.mjs").then((m) => {
                Reload = m['Reload'];
                done()
            }).catch(e => done(e))


        });
    })

    describe('new Reload', 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-reload></monster-reload>
                    </div>
                `;
            });

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

            })

            describe('create from template', function () {
                it('should contains monster-reload', function () {
                    expect(document.getElementById('test2')).contain.html('<monster-reload');
                });
            });

        });

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

    });

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

        let mocks;
        beforeEach(() => {
            mocks = document.getElementById('mocks');
        })

        afterEach(() => {
            mocks.innerHTML = "";
        })

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

            const reload = document.createElement('monster-reload');
            mocks.appendChild(reload);

            setTimeout(() => {
                try {

                    expect(document.getElementById('mocks')).contain.html('<monster-reload');
                } 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 reload = document.createElement('monster-reload');
            reload.setAttribute('data-monster-url', 'http://localhost/')

            reload.addEventListener('monster-fetched', (event) => {
                try {
                    const element = document.querySelector('monster-reload');
                    expect(element).contain.html('hello world');
                    done();
                } catch (e) {
                    done(e);
                }
            })

            mocks.appendChild(reload);
            mockintersectionobserver.getInstance().enterNode();

        });
    });


});