Это вторая часть Кросс-фреймворковой библиотеки веб-компонентов 📚 с использованием Lit (Часть I) и Кросс-фреймворкной библиотеки веб-компонентов 📚 с использованием Lit (Часть III)

Тестирование

После того, как мы завершим наш карточный компонент, пришло время его протестировать. Я использовал тестовый пакет от Open Web Components, а документацию вы можете найти здесь в связке с jasmine и karma.

Мы начинаем описывать, какой компонент будет тестироваться, и определять, что мы будем имитировать, как свойства компонента:

После этого, перед запуском теста, мы загружаем фикстуру, которая будет передавать компонент Card с нашей пользовательской конфигурацией, и проверяем, определен ли элемент, проверяя instanceOf:

Если все хорошо настроено, запускаем тест, и у нас должен быть один успешный тест:

Давайте немного подробнее рассмотрим этот компонент:

https://gist.github.com/fstbraz/2ce4793be22c170c12d47d1530840f0a

Это должно увеличить охват до более чем 80%.

Карточный компонент

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

Начнем с создания нового компонента на том же уровне, что и card.ts:

После того, как мы определим внешний @property, он в основном получит массив из CardConfig объектов:

Теперь мы можем визуализировать контейнер карт и использовать директиву repeat для создания различных экземпляров карты на основе конфигурации, которую мы передали в @property:

Для завершения нам нужно только добавить стили компонентов и общие:

И теперь у вас должен быть компонент, который будет отображаться следующим образом:

В следующей части мы расскажем о распространении библиотеки через пакет узла с использованием реестра npm и о том, как использовать компоненты в различных средах фреймворков/библиотек.

Вы можете найти предыдущий шаг здесь 👉 Кросс-фреймворковая библиотека веб-компонентов 📚 с использованием Lit (Часть I)

Вы можете найти следующий шаг здесь 👉 Кросс-фреймворковая библиотека веб-компонентов 📚 с использованием Lit (Часть III)