siesta-lite/tests/nested-components.t.js

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

StartTest(async function (t) {
    const template  = document.createElement('template');
    const style     = document.createElement('style');
    style.innerHTML = `
        todo-app {
            position:absolute;
            width : 200px;
            height : 200px;
        }
        
        todo-app div {
        }
    `;

    t.global.document.head.appendChild(style);
    let level = 1;

    template.innerHTML =
        `<div style="padding: 30px; box-shadow: 1px 1px 10px #666; height:80%;width:80%">
              <button>Level</button>
        </div>`;

    class TodoApp extends HTMLElement {
        constructor() {
            super();

            this.level = level;
            this.attachShadow({ 'mode' : 'open' });
            this.shadowRoot.appendChild(template.content.cloneNode(true));

            const button = this.shadowRoot.querySelector('button');

            button.innerHTML = `Level ${level}`;

            button.addEventListener('click', e => {
                e.target.innerHTML = `Clicked level ${this.level}`;
            });

            level++;
        }
    }

    window.customElements.define('todo-app', TodoApp);

    t.beforeEach(() => {
        level                   = 1;
        document.body.innerHTML = ''
    })

    t.it('Should support clicking nested web components', async t => {
        const app       = document.createElement('todo-app');
        const appNested = document.createElement('todo-app');

        document.body.appendChild(app);
        app.shadowRoot.appendChild(appNested);

        await t.click('todo-app -> button');
        await t.click('todo-app -> todo-app -> button');

        t.contentLike('todo-app -> button', 'Clicked level 1', '1st level works!');
        t.contentLike('todo-app -> todo-app -> button', 'Clicked level 2', '2nd level works!');
    })

    t.it('Should support crazy nested web components', async t => {
        const app  = document.createElement('todo-app');
        const app2 = document.createElement('todo-app');
        const app3 = document.createElement('todo-app');
        const app4 = document.createElement('todo-app');

        document.body.appendChild(app);
        app.shadowRoot.appendChild(app2);
        app2.shadowRoot.appendChild(app3);
        app3.shadowRoot.appendChild(app4);

        await t.click('todo-app -> button');
        await t.click('todo-app -> todo-app -> button');
        await t.click('todo-app -> todo-app -> todo-app -> button');
        await t.click('todo-app -> todo-app -> todo-app -> todo-app ->button');

        t.selectorExists('todo-app -> button:textEquals(Clicked level 1)', '1st level works!');
        t.selectorExists('todo-app -> todo-app -> button:textEquals(Clicked level 2)', 'Nested works!');
        t.selectorExists('todo-app -> todo-app -> todo-app -> button:textEquals(Clicked level 3)', 'Nested works!');
        t.selectorExists('todo-app -> todo-app -> todo-app -> todo-app -> button:textEquals(Clicked level 4)', 'Nested works!');
    })

    t.it('Should support clicking nested web components', async t => {
        document.body.innerHTML = '<button>foo</button>'

        t.is(t.query('foo-bar -> button').length, 0);
    })
});