29-real-life-application.md

title	🔴 Приложение из реальной жизни
description	Задача 29 посвящена тестированию приложения из реальной жизни
author	thomas-laforge
contributors	Dinozavvvr
challengeNumber	29
command	testing-real-life-application
sidebar	order 205

Информация

Это приложение представляет собой большой вызов, потому что оно тесно напоминает приложение из реальной жизни, с которым вы можете столкнуться в своей повседневной деятельности в качестве разработчика Angular. Что делает его более сложным, так это необходимость обрабатывать асинхронные задачи и создавать соответствующие заглушки.

Приложение - это типичное приложение для списка задач. Вы можете фильтровать заявки, создавать новые, назначать каждую заявку, закрывать другие и переходить к деталям каждой заявки.

В этом вызове вы напишете тесты для ListComponent, который представляет глобальный вид, и RowComponent, который представляет конкретную заявку. Кроме того, вам нужно будет написать модульные тесты для TicketStoreService, используя библиотеку Testing Library. Эта библиотека позволяет эффективно тестировать сервисы.

Особенно сложно будет обрабатывать асинхронные задачи. Важно не вводить явные ожидания(waits) в ваши тесты, так как это приведет к ненужным задержкам. Вместо этого лучше искать элемент, который должен появиться или исчезнуть из DOM. В этом случае тест будет естественным образом ожидать правильного периода времени, так как ожидания уже реализованы в обеих библиотеках. Воспользуйтесь встроенными функциональными возможностями для создания эффективных и надежных тестов.

Вы можете поиграть с этим, запустив: npx nx serve testing-real-life-application.

Чтобы запустить тесты Testing Library, вам нужно выполнить npx nx test testing-real-life-application. Вы также можете установить Jest Runner, чтобы выполнять тесты, нажимая на кнопку Run над каждым блоком describe или it.

Для тестирования с помощью Cypress вы выполните свой тест внутри child.component.cy.ts и выполните npx nx component-test testing-real-life-application, чтобы запустить ваши тестовые наборы. Вы можете добавить флаг --watch, чтобы выполнять тесты в режиме наблюдения.

Задание

Цель - протестировать множество поведений приложения, описанных в каждом тестовом файле, с использованием библиотеки Testing и Cypress Component Testing.

:::note Я создал несколько блоков it, но не стесняйтесь добавлять больше тестов, если хотите. :::