@schukai/monster/test/cases/dom/resource/link/stylesheet.mjs

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

'use strict';

import * as chai from 'chai';
import {Stylesheet} from "../../../../../source/dom/resource/link/stylesheet.mjs";
import {DataUrl} from "../../../../../source/types/dataurl.mjs";
import {ID} from "../../../../../source/types/id.mjs";
import {chaiDom} from "../../../../util/chai-dom.mjs";
import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../../../util/cleanupdom.mjs";
import {initJSDOM} from "../../../../util/jsdom.mjs";

let expect = chai.expect;

chai.use(chaiDom);

let html1 = `

`;


describe('Stylesheet', function () {

    before(function (done) {
        initJSDOM({
            runScripts: "dangerously",
            resources: "usable"
        }).then(() => {
            done()
        }).catch(e => done(e));
    });

    beforeEach(() => {
        initMutationObserverForTesting()
    })

    afterEach(() => {
        cleanupDOMFromTesting();
    })

    describe('Stylesheet()', function () {
        it('connect().available()', function (done) {

            const stylesheet = new Stylesheet({
                href: new DataUrl('', 'text/css').toString(),
            });

            stylesheet.connect().available().then(() => {
                const id = stylesheet.getOption('id')
                done()
            }).catch(e => done(e));

        })
    });

    describe('External Stylesheet', () => {

        let id = new ID('Stylesheet').toString();
        let stylesheet, url = new DataUrl('body{color:red;}', 'text/css').toString();

        beforeEach(() => {

            stylesheet = new Stylesheet({
                href: url,
                id: id,
            });

        });

        const triggerLoad = () => {
            const link = document.getElementById(id);
            if (link) {
                link.dispatchEvent(new window.Event("load"));
            }
        };

        it('append and remove Stylesheet ', (done) => {

            expect(stylesheet.isConnected()).to.be.false;

            stylesheet.connect();
            triggerLoad();
            stylesheet.available().then(() => {
                expect(stylesheet.isConnected()).to.be.true;
                expect(document.querySelector('[href="' + url + '"]')).to.exist;

                document.getElementById(id).remove();
                expect(stylesheet.isConnected()).to.be.false;
                expect(document.querySelector('[href="' + url + '"]')).not.to.exist;

                stylesheet.connect();
                triggerLoad();
                stylesheet.available().then(() => {
                    expect(stylesheet.isConnected()).to.be.true;
                    expect(document.querySelector('[href="' + url + '"]')).to.exist;

                    document.getElementById(id).remove();
                    expect(document.querySelector('[href="' + url + '"]')).not.to.exist;
                    expect(stylesheet.isConnected()).to.be.false;

                    done()
                }).catch(e => done(e));


            }).catch(e => done(e));


        });


    });


});