TypeScript и тестирование кастомных элементов
Тред из второго дня моей недели в @jsunderhood.
Тред о кастомных элементах на TypeScript и тестировании.
— jsunderhood (@jsunderhood) November 10, 2020
Для начала о TypeScript. Прежде всего, кастомный элемент стоит добавить в интерфейс HTMLElementTagNameMap. Это сделает его тип доступным в методах querySelector и document.createElement.https://t.co/HSC06KuyTN pic.twitter.com/7DF1GApYUp
— jsunderhood (@jsunderhood) November 10, 2020
Если вы используете React, нужно также добавить определение кастомного элемента в специальный интерфейс JSX.IntrinsicElements. Это позволяет описать поддерживаемые свойства и их типы.https://t.co/oDhTj4HjgF pic.twitter.com/JZZ99I6bhW
— jsunderhood (@jsunderhood) November 10, 2020
Еще можно типизировать кастомные события, которые используются элементом, для вывода типа event.detail в addEventListener. На днях James Garbutt опубликовал статью о том, как это сделать.https://t.co/qXKyneIwDJ
— jsunderhood (@jsunderhood) November 10, 2020
Поскольку кастомные элементы используют нативные классы, общая логика в них обычно выделяется в миксины. По сути миксин — это функция, принимающая класс и возвращающая новый класс.https://t.co/J320ndJb67 pic.twitter.com/w5HsDBOqOE
— jsunderhood (@jsunderhood) November 10, 2020
Подробнее о том, как работают миксины в TypeScript, можно почитать в статье Николая Платонова. Кроме преимуществ, у этого паттерна есть недостатки и некоторые ограничения.https://t.co/5oWNou4m9i
— jsunderhood (@jsunderhood) November 10, 2020
Перейдем к тестированию. Кастомные элементы можно тестировать с помощью Jest с тех пор, как была добавлена их поддержка в jsdom 16.2 благодаря усилиям Pierre-Marie Dartus из Salesforce.
— jsunderhood (@jsunderhood) November 10, 2020
Пример конфига Jest с использованием TypeScript для тестирования проекта на lit-element можно найти в темплейте Hoverboard от GDG.https://t.co/gtzSPr3hiT
— jsunderhood (@jsunderhood) November 10, 2020
В Vaadin мы тестируем наши веб-компоненты в реальных браузерах. Это помогает обнаружить баги, которые воспроизводятся, например, только на iOS или появляются в свежей версии Chrome / Firefox.
— jsunderhood (@jsunderhood) November 10, 2020
Раньше в экосистеме Polymer был свой тест-раннер: web-component-tester. Необходимость в нем была обусловлена использованием HTML Imports, позже появилась и поддержка ES-модулей.
— jsunderhood (@jsunderhood) November 10, 2020
Сейчас мы переходим на Web Test Runner, который разрабатывает Lars den Bakker из ING. Он быстрый, поддерживает ES-модули, позволяет запускать тесты в Puppeteer, Playwright и не только.https://t.co/oRrJBBaDHx
— jsunderhood (@jsunderhood) November 10, 2020
Почему переходим не на Jest? Во-первых, нам часто приходится дебажить edge cases в конкретном браузере. Кроме того, насколько я понимаю, Jest из коробки не поддерживает ES-модули.https://t.co/dethZjL7dj
— jsunderhood (@jsunderhood) November 10, 2020
Также в Web Test Runner есть и экспериментальная поддержка тестирования скриншотами. До сих пор мы использовали Gemini, который уже не поддерживается и довольно медленный.
— jsunderhood (@jsunderhood) November 10, 2020
Для тестирования компонентов на TypeScript в Web Test Runner есть плагин на базе esbuild. Компиляция в esbuild занимает доли секунды и на длительность выполнения тестов почти не влияет.https://t.co/cCCv7HlMuR
— jsunderhood (@jsunderhood) November 10, 2020
Пример конфигурации Web Test Runner и собственно тесты для кастомных элементов можно найти в моих проектах vanilla-colorful и vanilla-hamburger, о которых я рассказал в предыдущем треде.
— jsunderhood (@jsunderhood) November 10, 2020