@schukai/monster/test/cases/dom/util.mjs

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

import {
    getDocument, getWindow, getDocumentFragmentFromString
} from "../../../source/dom/util.mjs";

import {getContainingDocument} from "../../../source/dom/util.mjs";

import {initJSDOM} from "../../util/jsdom.mjs";

import {expect} from "chai"


describe('DOM', function () {
    before(async function () {
        initJSDOM();
    })
    describe('getDocument()', function () {
        it('should return document object', function () {
            let d = getDocument();
            expect(typeof d).is.equal('object');
        });
    });

    describe('getWindow()', function () {
        it('should return document object', function () {
            let d = getWindow();
            expect(typeof d).is.equal('object');
        });
    });

    describe('getDocumentFragmentFromString()', function () {


        [
            ['<div></div>'],
            ['<div><div>2</div></div>'],
            ['<div><div>2</div>', '<div><div>2</div></div>'], // test invalid html
        ].forEach(function (data) {

            let a = data.shift()
            let b = data.shift()

            if (!b) b = a;

            it('should return documentFragment object ' + a, function () {
                let fragment = getDocumentFragmentFromString(a);
                expect(fragment).to.be.instanceOf(DocumentFragment);

                var div = document.createElement('div');
                div.appendChild(fragment.cloneNode(true));
                expect(div.innerHTML).to.be.equal(b);
            });

        });

    });


    describe('getContainingDocument', () => {
        let  jsDomDocument;

         beforeEach(() => {
             jsDomDocument = getDocument();
         });
        //
        // afterEach(() => {
        //     dom.window.close();
        // });

        it('should throw an error when called with an invalid argument', () => {
            expect(() => getContainingDocument(null)).to.throw('Invalid argument. Expected an HTMLElement.');
        });

        it('should return the correct containing document for an element in the main document', () => {
            const element = jsDomDocument.createElement('div');
            const containingDocument = getContainingDocument(element);

            expect(containingDocument).to.null;
        });

        it('should return the correct containing document for an element inside a shadow root', () => {
            const host = jsDomDocument.createElement('div');
            const shadowRoot = host.attachShadow({ mode: 'open' });
            const element = jsDomDocument.createElement('span');
            shadowRoot.appendChild(element);

            const containingDocument = getContainingDocument(element);
            expect(containingDocument).to.not.null;
        });

        it('should return the correct containing document for an element inside a nested shadow root', () => {
            const outerHost = jsDomDocument.createElement('div');
            const outerShadowRoot = outerHost.attachShadow({ mode: 'open' });

            const innerHost = jsDomDocument.createElement('div');
            outerShadowRoot.appendChild(innerHost);

            const innerShadowRoot = innerHost.attachShadow({ mode: 'open' });

            const element = jsDomDocument.createElement('span');
            innerShadowRoot.appendChild(element);

            const containingDocument = getContainingDocument(element);
            expect(containingDocument).to.not.null;
        });

        it('should return null when the element is not attached to any document', () => {
            const detachedElement = jsDomDocument.createElement('div');
            detachedElement.remove();

            const containingDocument = getContainingDocument(detachedElement);
            expect(containingDocument).to.be.null;
        });
    });    
    
});