@schukai/monster/test/cases/components/layout/tabs.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 {initJSDOM} from "../../../util/jsdom.mjs";

let expect = chai.expect;
chai.use(chaiDom);

const global = getGlobal();


// language=html
let html1 = `
    <monster-tabs id="mytabs">
        <div data-monster-button-label="TAB1">
            <div>
                Das ist tab 1
            </div>

        </div>
        <div data-monster-button-label="TAB2">
            Das ist tab 2
        </div>
        <div>
            Das ist tab 3 ohne button
        </div>
        <div></div>
    </monster-tabs>
`;

let Tabs;

describe('Tabs', function () {

    before(function (done) {
        initJSDOM().then(() => {

            import("element-internals-polyfill").catch(e => done(e));
            
            let promises = []

            if (!global['crypto']) {
                promises.push(import("@peculiar/webcrypto").then((m) => {
                    const Crypto = m['Crypto'];
                    global['crypto'] = new Crypto();
                }));
            }

            promises.push(import("../../../../source/components/layout/tabs.mjs").then((m) => {
                Tabs = m['Tabs'];
            }))

            Promise.all(promises).then(()=>{
                done();
            }).catch(e => done(e))

        });
    })

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

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

        it('should have buttons and tabs', function (done) {

            let mocks = document.getElementById('mocks');
            mocks.innerHTML = html1;

            setTimeout(() => {
                try {
                    const tabs = document.getElementById('mytabs')
                    expect(tabs).is.instanceof(Tabs);

                    setTimeout(() => {
                        let nav = tabs.shadowRoot.querySelector('nav');
                        const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
                        expect(buttons[0]).is.instanceof(HTMLButtonElement);
                        expect(nav.hasChildNodes()).to.be.true;
                        expect(buttons.length).to.be.equal(4);
                        done();
                    }, 100)

                } catch (e) {
                    return done(e);
                }

            }, 0)


        });

		it('should shorten label from content when no explicit label is provided', function (done) {

            let mocks = document.getElementById('mocks');
            mocks.innerHTML = html1;

			setTimeout(() => {
				try {
					const tabs = document.getElementById('mytabs');
					expect(tabs).is.instanceof(Tabs);

					setTimeout(() => {
						const thirdTab = tabs.children[2];
						expect(thirdTab).to.not.equal(undefined);
						const reference = thirdTab.getAttribute('id');
						expect(reference).to.not.equal(null);
						const button = tabs.shadowRoot.querySelector(
							`button[part=button][data-monster-tab-reference="${reference}"]`,
						);
						expect(button).to.not.equal(null);
						const labelSpan = button.querySelector('span[data-monster-replace]');
						expect(labelSpan).to.not.equal(null);
						expect(labelSpan.textContent.trim()).to.equal('Das ist tab…');
						done();
					}, 100);
				} catch (e) {
					return done(e);
                }
            }, 0);
        });

    });


});