🔴 Приложение из реальной жизни
Информация
Это приложение представляет собой большой вызов, потому что оно тесно напоминает приложение из реальной жизни, с которым вы можете столкнуться в своей повседневной деятельности в качестве разработчика Angular. Что делает его более сложным, так это необходимость обрабатывать асинхронные задачи и создавать соответствующие заглушки.
Приложение - это типичное приложение для списка задач. Вы можете фильтровать заявки, создавать новые, назначать каждую заявку, закрывать другие и переходить к деталям каждой заявки.
В этом вызове вы напишете тесты для ListComponent
, который представляет глобальный вид, и RowComponent
, который представляет конкретную заявку. Кроме того, вам нужно будет написать модульные тесты для TicketStoreService
, используя библиотеку Testing Library. Эта библиотека позволяет эффективно тестировать сервисы.
Особенно сложно будет обрабатывать асинхронные задачи. Важно не вводить явные ожидания(waits) в ваши тесты, так как это приведет к ненужным задержкам. Вместо этого лучше искать элемент, который должен появиться или исчезнуть из DOM. В этом случае тест будет естественным образом ожидать правильного периода времени, так как ожидания уже реализованы в обеих библиотеках. Воспользуйтесь встроенными функциональными возможностями для создания эффективных и надежных тестов.
Вы можете поиграть с этим, запустив: npx nx serve testing-todos-list
.
Чтобы запустить тесты Testing Library, вам нужно выполнить npx nx test testing-todos-list
. Вы также можете установить Jest Runner, чтобы выполнять тесты, нажимая на кнопку Run
над каждым блоком describe
или it
.
Для тестирования с помощью Cypress вы выполните свой тест внутри child.component.cy.ts
и выполните npx nx component-test testing-todos-list
, чтобы запустить ваши тестовые наборы. Вы можете добавить флаг --watch
, чтобы выполнять тесты в режиме наблюдения.
Задание
Цель - протестировать множество поведений приложения, описанных в каждом тестовом файле, с использованием библиотеки Testing и Cypress Component Testing.