относимся к ним как к чёрному ящику - тестируем "интерфейс" и мокаем side эффекты, немного поразмыслив пришёл к выводу: компоненты можно тестировать так же как функции:
На вход поставляем props/события(клик по кнопке и тп), на выходе получаем $emit/вывод информации в дерево. Единственное что меня смущает - если изменится реализация (допустим мы сделали тест: нажимаем на кнопку - происходит $emit события, однако через время бизнес решил что в этом компоненте для клика будет использоваться не кнопка, а... допустим просто текст), то тест упадёт. Или есть варианты создать менее связанные тесты, или такая ситуация и должна происходить?
Да, всё так и есть. Компонент тоже чёрный ящик, тестируем через его интерфейс. Снаружи у нас пропсы, слоты, обработчик событий, атрибуты, инжекты, контекст и внешние ресурсы. Взаимодействие через обновление реактивных входов, события в DOM, методы и дочерние компоненты. Результат - эмиты и взаимодействие с другими компонентами, садй эффекты. Если вместо кнопки теперь кликают на какой-то текст, то по смыслу компонент остался тем же. Надо просто находить этот текст также, как находилась кнопка ранее
Благодарю, а сайд эффекты мокать и проверять что они были вызваны? Допустим есть компонент, у которого есть функция getChartData которая вызывается при клике на кнопку. Эта функция делает запрос на сервер и отображает какую-либо информацию. Чтобы нам протестировать этот компонент нам нужно создать 2 теста, в обоих замокать метод getChartData, в первом мы проверим что замоканный метод был вызван, а в втором что данный были отображены в DOM дереве, тем самым мы покроем этот компонент тестами?
Обсуждают сегодня