🟠 Вложенные компоненты

Информация

У нас есть небольшое приложение, которое отправляет заголовок, введенный в поле ввода, на фейковый бэкэнд. Если заголовок введен правильно, вы можете отправить запрос, в противном случае вы получите ошибку, и запрос не будет отправлен. Приложение создано с использованием вложенных компонентов. ChildComponent - это контейнер, который включает в себя четыре компонента: ResultComponent, ButtonComponent, InputComponent и ErrorComponent. Однако, поскольку мы тестируем наш компонент как черный ящик, архитектура наших компонентов ничего не меняет. Вы можете создавать свои тесты, изменять структуру компонентов, и ваши тесты должны по-прежнему проходить. Вот цель интеграционных тестов. Никогда не тестируйте внутренние детали реализации!!!.

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

Файл с именем child.component.spec.ts позволит вам тестировать ваше приложение с использованием библиотеки Testing Library. Чтобы запустить наборы тестов, вы должны выполнить команду npx nx test testing-nested. Вы также можете установить Jest Runner, чтобы выполнять тесты, щелкая на кнопку Run над каждым блоком describe или it.

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

Задание

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

Заметка

Я создал несколько блоков it, но вы можете добавить больше тестов, если хотите.