модульное тестирование нативных пользовательских элементов веб-компонента v1 с помощью тени dom

Question

Я создал собственный пользовательский элемент как веб-компонент с чистым JS / HTML / CSS, следуя инструкции здесь .

Теперь мне интересно, как я могу написать модульные тесты для такого компонента. Существует отличный тестер веб-компонентов библиотеки, но я считаю, что он предназначен только для компонентов, созданных из полимера.

Поскольку мой компонент не является полимерным веб-компонентом, а является нативным, может кто-нибудь указать мне правильное направление для модульного тестирования.

Answer 1

Вы можете использовать веб-компонент-тестер Polymer для ванильных компонентов. В этом блоге есть несколько примеров: https://bendyworks.com/blog/native-web-components.

Вы можете протестировать свой компонент примерно так:

  <my-vanilla-component></my-vanilla-component>
  <script>
    suite('<my-vanilla-component>', function() {
      let component = document.querySelector('my-vanilla-component');
      test('renders div', () => {
        assert.isOk(component.shadowRoot.querySelector('div'));
      });
    });
  </script>