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

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

'use strict';

import {expect} from "chai"
import {ATTRIBUTE_THEME_NAME} from "../../../source/dom/constants.mjs";

import {findDocumentTemplate, Template} from "../../../source/dom/template.mjs";
import {initJSDOM} from "../../util/jsdom.mjs";


describe('Template', function () {

    before(async function () {
        initJSDOM();
    })

    beforeEach(() => {
        let mocks = document.getElementById('mocks');
        mocks.innerHTML = `
            <template id="mytemplate"></template>`;
    })

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

    describe('create HTMLFragment', function () {
        [
            ["<div>first</div><div>second</div>"],
            ["<div>first</div>"],
            ["<div>first</div><p>second</p>"]

        ].forEach(function (data) {

            let a = data.shift()

            it('new Template().getNewDocumentFragmentAsString() should return string', function () {
                let template = document.createElement('template');
                template.innerHTML = a;
                let t = new Template(template);


                var container = document.createElement('div');
                container.appendChild(t.createDocumentFragment());
                expect(container.innerHTML).to.be.equal(a);
            });
        });
    });

    describe('create instance', function () {
        it('new Template() should return document object', function () {
            let d = new Template(document.createElement('template'));
            expect(d).to.be.instanceOf(Template);
        });
    });

    describe('.getTemplateElement()', function () {
        it('new Template().getTemplateElement() should return HTMLTemplateElement object', function () {
            let d = new Template(document.createElement('template'));
            expect(d.getTemplateElement()).to.be.instanceOf(HTMLTemplateElement);
        });
    });

    describe('.findDocumentTemplate()', function () {
        it('should throw Template not found', function () {
            const div = document.createElement('div');
            expect(() => {
                findDocumentTemplate("noway", div)
            }).to.throws(Error);
        })
    });

    describe('.findDocumentTemplate()', function () {
        describe('Template', function () {
            it('should find template over ownerDocument', function () {
                const div = document.createElement('div');
                div.remove();
                const a = document.documentElement.outerHTML;
                
                let t = findDocumentTemplate("mytemplate", div);
                expect(t).is.instanceof(Template);

            })
        });

        describe('Thmened Template', function () {
            let memAttributeValue;

            beforeEach(() => {
                let mocks = document.getElementById('mocks');
                mocks.innerHTML = `
                    <template id="mytemplate"><p>1</p></template>
                    <template id="mytemplate-monster"><p>2</p></template>
                    <template id="mytemplate-testtheme"><p>4</p></template>
                    <template id="myprefix-mytemplate-monster"><p>3</p></template>
                `;

                let html = document.querySelector('html');
                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
                    memAttributeValue = html.getAttribute(ATTRIBUTE_THEME_NAME)
                }

            })

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

                let html = document.querySelector('html');

                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
                    html.removeAttribute(ATTRIBUTE_THEME_NAME);
                }

                if (memAttributeValue) {
                    html.setAttribute(ATTRIBUTE_THEME_NAME, memAttributeValue)
                }

            })


            it('should find template over ownerDocument', function () {
                let html = document.querySelector('html');
                const div = document.createElement('div');
                div.setAttribute('data-monster-template-prefix', 'myprefix')
                div.remove();
                let t1 = findDocumentTemplate("mytemplate", div);
                expect(t1).is.instanceof(Template);
                expect(t1.createDocumentFragment().textContent).is.equal("3");

                div.removeAttribute('data-monster-template-prefix')
                let t2 = findDocumentTemplate("mytemplate", div);
                expect(t2).is.instanceof(Template);
                expect(t2.createDocumentFragment().textContent).is.equal("2");

                html.setAttribute(ATTRIBUTE_THEME_NAME,'testtheme');
                let a= html.outerHTML;
                let t3 = findDocumentTemplate("mytemplate", div);
                expect(t3).is.instanceof(Template);
                expect(t3.createDocumentFragment().textContent).is.equal("4");


            })
        });


    });
});