Это вторая часть Кросс-фреймворковой библиотеки веб-компонентов 📚 с использованием 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)