модульное тестирование современного веб-компонента ES6 без babel (командной строки или браузера) - PullRequest
Новая
       41

модульное тестирование современного веб-компонента ES6 без babel (командной строки или браузера)

0 голосов
/ 02 апреля 2020

поэтому я получил этот веб-компонент на основе синтаксиса класса ES6 (пользовательский элемент, если вы хотите так его называть). 

const appFooterTemplate= document.createElement('template');
appFooterTemplate.innerHTML=`
<style>
:host {
    display: block;
}
:host([hidden]) {
    display: none 
}
</style>
    <footer>
        default footer content
    </footer>
`;

class AppFooter extends HTMLElement{

    #company;

    constructor(){
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(appFooterTemplate.content.cloneNode(true));
        this.#company = 'Not Defined';
    }
    static get observedAttributes(){
        return ['company'];
    }
    attributeChangedCallback(name, oldValue, newValue) {
        if(name === 'company'){
            this.company = newValue;
        }
    }

    set company(companyName)
    {
        if (!!companyName){
            this.#company = companyName;
            if(!this.hasAttribute('company')){
                this.setAttribute('company', companyName);
            }
        } 
    }

    connectedCallback() {
        const today = new Date();
        this.shadowRoot.querySelector('footer').innerText = `Copyright ${today.getFullYear()}`;
    }
}

window.customElements.define('app-footer', AppFooter);
export default AppFooter;

Теперь я хотел бы написать модульные тесты, чтобы убедиться, что он работает так, как он должен работать.

Я попробовал знаменитый тестер веб-компонентов, который имеет немного хаки sh установка, использует Bower даже в 2020 году и работает в браузере с немного медленным исполнением. последние 12+ месяцев обслуживание пакета не ведется, и написание тестов для wct несколько похоже на фактическое использование компонента в файле html, его запуск в реальном браузере, а затем тестирование с использованием некоторого сценария jquery.

это тест, который я написал для него, который вроде работает 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Footer Test</title>
    <script type="module" src="../src/components/footer.js"></script>
</head>
<body>
<app-footer></app-footer>
<script>
    suite('app-footer test', function() {
        let component = document.querySelector('app-footer');
        test('renders div', () => {
            assert.isOk(component.shadowRoot.querySelector('footer'));
        });
    });
</script>
</body>
</html>

Я также попробовал плагин jest, mocha, karma, jasmine, puppeteer и cypress with shadow root. В большинстве случаев - импорт не работает, и я должен использовать require - даже когда импорт работает с последним mocha, он говорит ReferenceError: документ не определен.

выдержка из терминального теста mocha 

import AppFooter from '../src/components/footer.js'
import assert from 'assert';

it('footer test', () => {
    assert.equal(AppFooter.company(), 'test');
});

Я знаю, что могу добавить babel, веб-пакет и все инструменты, чтобы он действительно заработал, но перед тем, как я go по этому маршруту, просто хочу подтвердить, что именно так веб-компоненты проходят модульное тестирование еще в 2020 году?

Нет ли простого прямого пути? В конце концов, mocha поддерживает модули ES, а Node JS 13+ также поддерживает модули ES6, и все же нам нужны все эти упаковщики и транспортеры? Что мне не хватает?

...