From 35aa4ee1b99642c67547da550b4002586f958752 Mon Sep 17 00:00:00 2001
From: DinarShagaliev <dinar.shagaliev2002@gmail.com>
Date: Tue, 9 Apr 2024 19:28:11 +0300
Subject: [PATCH] Added RU translation for blocks: rxjs, performance and
 testing

---
 .../ru/challenges/performance/12-scroll-cd.md | 40 ++++++++++++++
 .../performance/37-ngfor-biglist.md           | 38 ++++++++++++++
 .../docs/ru/challenges/performance/index.mdx  | 52 +++++++++++++++++++
 .../rxjs/11-bug-chaining-operator.md          | 31 +++++++++++
 .../ru/challenges/rxjs/38-rxjs-catch-error.md | 36 +++++++++++++
 .../docs/ru/challenges/testing/17-router.md   | 27 ++++++++++
 .../ru/challenges/testing/18-nested-comp.md   | 31 +++++++++++
 .../ru/challenges/testing/19-input-output.md  | 32 ++++++++++++
 .../docs/ru/challenges/testing/20-modal.md    | 36 +++++++++++++
 .../challenges/testing/24-harness-creation.md | 48 +++++++++++++++++
 .../challenges/testing/29-real-application.md | 37 +++++++++++++
 11 files changed, 408 insertions(+)
 create mode 100644 docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md
 create mode 100644 docs/src/content/docs/ru/challenges/performance/37-ngfor-biglist.md
 create mode 100644 docs/src/content/docs/ru/challenges/performance/index.mdx
 create mode 100644 docs/src/content/docs/ru/challenges/rxjs/11-bug-chaining-operator.md
 create mode 100644 docs/src/content/docs/ru/challenges/rxjs/38-rxjs-catch-error.md
 create mode 100644 docs/src/content/docs/ru/challenges/testing/17-router.md
 create mode 100644 docs/src/content/docs/ru/challenges/testing/18-nested-comp.md
 create mode 100644 docs/src/content/docs/ru/challenges/testing/19-input-output.md
 create mode 100644 docs/src/content/docs/ru/challenges/testing/20-modal.md
 create mode 100644 docs/src/content/docs/ru/challenges/testing/24-harness-creation.md
 create mode 100644 docs/src/content/docs/ru/challenges/testing/29-real-application.md

diff --git a/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md b/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md
new file mode 100644
index 0000000..5a5a0c7
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md
@@ -0,0 +1,40 @@
+---
+title: 🟠 Оптимизация обнаружения изменений
+description: Задание 12 посвящено оптимизации количества циклов обнаружения изменений при прокрутке
+author: thomas-laforge
+contributors:
+  - tomalaforge
+challengeNumber: 12
+command: performance-scroll-cd
+sidebar:
+  order: 107
+---
+
+## Информация
+
+В Angular есть библиотека под названием <b>Zone.js</b>, которая выполняет множество магии, чтобы упростить жизнь разработчика. Zone.js монкипатчит все события DOM, чтобы перепроверить и перерисовать представление, когда что-то изменилось внутри приложения. Разработчику не нужно вручную запускать обнаружение изменений.
+
+Однако иногда Zone.js вызывает гораздо больше обнаружения изменений, чем это необходимо. Например, когда вы прослушиваете событие прокрутки, каждое событие прокрутки вызывает новый цикл обнаружения изменений.
+
+В этом испытании нам нужно обновлять представление только в определенной позиции прокрутки, чтобы показать или скрыть кнопку. Все остальные циклы избыточны.
+
+Чтобы лучше понять проблему, выполните профилирование вашего приложения с помощью Angular Dev Tools.
+
+:::note
+Если вы не знаете, как это сделать, сначала прочтите [введение в производительность](/challenges/performance/).
+:::
+
+Вы можете узнать больше деталей о загрязнении зон и способах его решения [здесь](https://angular.io/guide/change-detection-zone-pollution).
+
+В следующем видео более подробно объясняется проблема этого приложения.
+
+<video controls src="https://user-images.githubusercontent.com/30832608/209819211-58d9ddcf-e1ad-4a78-8a7a-2be9d729e3f1.mov">
+</video>
+
+## Утверждение
+
+Ваша цель в этом испытании - избежать всех избыточных циклов обнаружения изменений и запускать обнаружение изменений только при необходимости.
+
+## Ограничение:
+
+Вы не можете глобально отключить Zone.js. Если этот код является частью большого проекта и вы отключите Zone.js, вы без сомнения сломаете ваше приложение.
diff --git a/docs/src/content/docs/ru/challenges/performance/37-ngfor-biglist.md b/docs/src/content/docs/ru/challenges/performance/37-ngfor-biglist.md
new file mode 100644
index 0000000..43c7b4f
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/performance/37-ngfor-biglist.md
@@ -0,0 +1,38 @@
+---
+title: 🟠 Оптимизация больших списков
+description: Задание 37 посвящено изучению того, как виртуализация оптимизирует рендеринг больших списков
+author: thomas-laforge
+contributors:
+  - tomalaforge
+  - jdegand
+challengeNumber: 37
+command: performance-ngfor-biglist
+sidebar:
+  order: 117
+---
+
+## Информация
+
+В этом приложении мы будем отображать список из 100 000 человек, нажав на кнопку **loadList**. Если вы откроете панель разработчика Chrome, нажав **F12**, перейдите на вкладку <b>Source</b> и разверните элемент, чтобы увидеть список, вы заметите, что все 100 000 элементов отображаются в DOM, хотя мы можем видеть только около 20 элементов в видимой области. Этот процесс занимает много времени, поэтому приложение очень медленно отображает список.
+
+Мы можем использовать <b>Angular DevTool</b>, чтобы профилировать наше приложение и понять, что происходит внутри нашего приложения. Я покажу вам, как это сделать в следующем видео.
+
+<video controls src="https://github.com/tomalaforge/angular-challenges/assets/30832608/713403fa-2eda-49d5-a7c9-acdef8aacd34">
+</video>
+
+:::note
+Если вы не знаете, как это сделать, сначала прочтите [введение в производительность](/challenges/performance/) и вернитесь после этого.
+:::
+
+## Утверждение
+
+Цель этого испытания - реализовать лучшую альтернативу для отображения больших списков элементов.
+
+## Подсказки:
+
+<details>
+  <summary>Подсказка 1</summary>
+
+Если вы не уверены, с чего начать, я рекомендую прочитать [документацию Angular CDK о виртуализации](https://material.angular.io/cdk/scrolling/overview).
+
+</details>
diff --git a/docs/src/content/docs/ru/challenges/performance/index.mdx b/docs/src/content/docs/ru/challenges/performance/index.mdx
new file mode 100644
index 0000000..cbda247
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/performance/index.mdx
@@ -0,0 +1,52 @@
+---
+title: Производительность Angular-а
+prev: false
+next: false
+contributors:
+  - tomalaforge
+  - tomer953
+description: Узнайте, как использовать расширение Angular DevTools для Chrome.
+noCommentSection: true
+sidebar:
+  order: 1
+---
+
+import { LinkCard } from '@astrojs/starlight/components';
+
+В этой серии испытаний по производительности вы узнаете, как оптимизировать и улучшить производительность вашего приложения Angular.
+
+Прежде чем приступить к решению какого-либо испытания, я приглашаю вас скачать [расширение Angular DevTools для Chrome](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh), если вы еще этого не сделали.
+
+Это расширение позволяет профилировать ваше приложение и обнаруживать проблемы производительности, что очень полезно для понимания мест, где могут возникать проблемы с производительностью.
+
+## Как его использовать
+
+При запуске приложения Angular вы можете проверить страницу, нажав <b>F12</b>, что откроет <b>Инструменты разработчика Chrome</b>. Затем перейдите на вкладку <b>Angular</b>. Оттуда вы можете выбрать вкладку <b>Profiler</b>, как показано ниже.
+
+![вкладка профилировщика](../../../../assets/performance/profiler-tab.png 'Вкладка профилировщика')
+
+Теперь вы можете профилировать свое приложение, нажав кнопку записи. Вы можете играть с вашим приложением и видеть, когда срабатывает обнаружение изменений и какие компоненты перерисовываются.
+
+:::tip[Узнайте больше]
+Вы можете узнать больше на [странице документации](https://angular.io/guide/devtools).
+:::
+
+Теперь, когда вы знаете, как использовать <b>Angular DevTool</b>, вы можете выбрать испытание, профилировать его и решить его.
+
+<LinkCard
+  title="🟢 Default vs OnPush"
+  description="Узнайте разницу между стратегиями обнаружения изменений по умолчанию и OnPush."
+  href="/challenges/performance/34-default-onpush/"
+/>
+
+<LinkCard
+  title="🟢 Мемоизация"
+  description="Узнайте силу чистых каналов."
+  href="/challenges/performance/35-memoize/"
+/>
+
+<LinkCard
+  title="🟠 Оптимизация обнаружения изменений"
+  description="Узнайте, как убрать загрязнение зон."
+  href="/challenges/performance/12-scroll-cd/"
+/>
diff --git a/docs/src/content/docs/ru/challenges/rxjs/11-bug-chaining-operator.md b/docs/src/content/docs/ru/challenges/rxjs/11-bug-chaining-operator.md
new file mode 100644
index 0000000..93ec45d
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/rxjs/11-bug-chaining-operator.md
@@ -0,0 +1,31 @@
+---
+title: 🟠 Ошибка в операторе высшего порядка RxJS
+description: Задача 11 посвящена устранению ошибки в RxJS из-за операторов высшего порядка
+author: thomas-laforge
+contributors:
+  - tomalaforge
+challengeNumber: 11
+command: rxjs-pipe-bug
+sidebar:
+  order: 114
+---
+
+Давайте погрузимся в удивительный мир RxJs.
+
+Этот вызов вдохновлен реальным примером.
+
+## Информация
+
+### История пользователя
+
+Нам нужна кнопка для каждой `Темы`. Когда мы нажимаем на нее, мы удаляем все объекты с этой `Темой` в нашей базе данных _(Фейковая БД в нашем случае)_. Наконец, мы отображаем **Все [темы] были удалены** в случае успешного удаления или **Ошибка: удаление некоторых [тем] не удалось** если удаление некоторых объектов не удалось.
+
+### Ограничения:
+
+Мы можем передавать в нашу БД для удаления только один объект за раз. БД ответит true, если данные были успешно удалены, и false в противном случае.
+
+### Утверждение
+
+Команда тестировщиков сообщает об **ошибке**. Интерфейс пользователя всегда показывает **Все [темы] были удалены**, даже если некоторые удаления не удалось.
+
+👉 Найдите ошибку и исправьте ее.
diff --git a/docs/src/content/docs/ru/challenges/rxjs/38-rxjs-catch-error.md b/docs/src/content/docs/ru/challenges/rxjs/38-rxjs-catch-error.md
new file mode 100644
index 0000000..3799170
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/rxjs/38-rxjs-catch-error.md
@@ -0,0 +1,36 @@
+---
+title: 🟢 catchError
+description: Задача 38 посвященя изучению завершения Observable.
+author: devesh-chaudhari
+command: rxjs-catch-error
+contributors:
+  - DeveshChau
+  - tomalaforge
+challengeNumber: 38
+sidebar:
+  order: 14
+---
+
+## Информация
+
+### Как использовать приложение
+
+Наше приложение представляет собой форму с полем ввода текста и кнопкой "Получить". При нажатии на кнопку "Получить" данные извлекаются из [бесплатного API](https://jsonplaceholder.typicode.com/).
+
+Корректные значения для успешного ответа ограничены следующим: posts, comments, albums, photos, todos и users. Любые другие значения приведут к ошибке.
+
+### Ошибка
+
+В нашем приложении обнаружена ошибка. Пользователи могут успешно получать данные только до тех пор, пока не будет отправлен недопустимый запрос. После получения ответа об ошибке пользователи не могут отправлять дополнительные запросы.
+
+### Изучение
+
+Это приложение предоставляет возможность понять правильное размещение оператора [`catchError`](https://rxjs.dev/api/operators/catchError). Если он размещен неправильно, вся подписка будет завершена, что предотвратит отправку дополнительных запросов. Цель состоит в том, чтобы сохранить общую подписку, правильно обрабатывая уведомления об ошибках от внутренних Observable.
+
+## Утверждение
+
+Цель - использовать оператор catchError для управления ошибками внутри вашего потока Rxjs.
+
+## Ограничения
+
+Пользователи должны иметь возможность журналировать значение/ошибку каждый раз при нажатии кнопки "Получить".
diff --git a/docs/src/content/docs/ru/challenges/testing/17-router.md b/docs/src/content/docs/ru/challenges/testing/17-router.md
new file mode 100644
index 0000000..5dc0934
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/testing/17-router.md
@@ -0,0 +1,27 @@
+---
+title: 🟠 Роутер
+description: Задача 17 посвящена тестрированию Роутера
+author: thomas-laforge
+contributors:
+  - tomalaforge
+challengeNumber: 17
+command: testing-router-outlet
+sidebar:
+  order: 108
+---
+
+## Информация
+
+У нас есть функциональное приложение, которое позволяет просматривать доступные книги для выдачи в библиотеке. Если книга, которую вы ищете, доступна, вы будете перенаправлены на соответствующую книгу(и), в противном случае вы попадете на страницу ошибки.
+
+Файл с именем `app.component.spec.ts` позволит вам тестировать ваше приложение с использованием библиотеки Testing Library. Чтобы запустить наборы тестов, вы должны выполнить команду `npx nx test testing-router-outlet`. Вы также можете установить [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner), чтобы выполнять тесты, щелкая на кнопку `Run` над каждым блоком `describe` или `it`.
+
+Для тестирования с использованием Cypress вы будете выполнять свои тесты внутри файла `app.component.cy.ts` и запускать команду `npx nx component-test testing-router-outlet` для выполнения наборов тестов. Вы можете добавить флаг `--watch`, чтобы выполнять ваши тесты в режиме наблюдения.
+
+# Задание
+
+Цель - протестировать несколько поведений приложения, описанных в каждом тестовом файле, с использованием библиотеки Testing Library и Cypress Component Testing.
+
+:::note
+Я создал несколько блоков `it`, но вы можете добавить больше тестов, если хотите.
+:::
diff --git a/docs/src/content/docs/ru/challenges/testing/18-nested-comp.md b/docs/src/content/docs/ru/challenges/testing/18-nested-comp.md
new file mode 100644
index 0000000..6922875
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/testing/18-nested-comp.md
@@ -0,0 +1,31 @@
+---
+title: 🟠 Вложенные компоненты
+description: Задание 18 посвящено тестированию вложенных компонентов
+author: thomas-laforge
+contributors:
+  - tomalaforge
+challengeNumber: 18
+command: testing-nested
+sidebar:
+  order: 109
+---
+
+## Информация
+
+У нас есть небольшое приложение, которое отправляет заголовок, введенный в поле ввода, на фейковый бэкэнд.
+Если заголовок введен правильно, вы можете отправить запрос, в противном случае вы получите ошибку, и запрос не будет отправлен.
+Приложение создано с использованием <b>вложенных компонентов</b>. `ChildComponent` - это контейнер, который включает в себя четыре компонента: `ResultComponent`, `ButtonComponent`, `InputComponent` и `ErrorComponent`. Однако, поскольку мы тестируем наш компонент как черный ящик, архитектура наших компонентов ничего не меняет. Вы можете создавать свои тесты, изменять структуру компонентов, и ваши тесты должны по-прежнему проходить. Вот цель интеграционных тестов. <b>Никогда не тестируйте внутренние детали реализации!!!</b>.
+
+Вы можете поиграть с ним, запустив: `npx nx serve testing-nested`.
+
+Файл с именем `child.component.spec.ts` позволит вам тестировать ваше приложение с использованием библиотеки Testing Library. Чтобы запустить наборы тестов, вы должны выполнить команду `npx nx test testing-nested`. Вы также можете установить [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner), чтобы выполнять тесты, щелкая на кнопку `Run` над каждым блоком `describe` или `it`.
+
+Для тестирования с использованием Cypress вы будете выполнять свои тесты внутри файла `child.component.cy.ts` и запускать команду `npx nx component-test testing-nested` для выполнения наборов тестов. Вы можете добавить флаг `--watch`, чтобы выполнять ваши тесты в режиме наблюдения.
+
+# Задание
+
+Цель - протестировать несколько поведений приложения, описанных в каждом тестовом файле, с использованием библиотеки Testing Library и Cypress Component Testing.
+
+:::note
+Я создал несколько блоков `it`, но вы можете добавить больше тестов, если хотите.
+:::
diff --git a/docs/src/content/docs/ru/challenges/testing/19-input-output.md b/docs/src/content/docs/ru/challenges/testing/19-input-output.md
new file mode 100644
index 0000000..a8cffa7
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/testing/19-input-output.md
@@ -0,0 +1,32 @@
+---
+title: 🟠 Ввод Вывод
+description: Задача 19 посвящена тестированию Ввода и Вывода
+author: thomas-laforge
+contributors:
+  - tomalaforge
+  - tomer953
+  - svenson95
+  - jdegand
+challengeNumber: 19
+command: testing-input-output
+sidebar:
+  order: 110
+---
+
+## Информация
+
+У нас есть небольшое приложение-счетчик, которое увеличивает или уменьшает число. `CounterComponent` принимает начальное значение в качестве `@Input` и отправляет результат счетчика как `@Output`, когда мы нажимаем на кнопку **Send**. Поскольку мы тестируем наш компонент как черный ящик, у нас есть доступ только к нашим входным данным и мы слушаем выходные значения. <b>Не следует полагаться на внутренние детали реализации!!!</b>
+
+Вы можете поиграть с ним, запустив: `npx nx serve testing-input-output`.
+
+Файл с именем `counter.component.spec.ts` позволит вам протестировать ваше приложение с использованием библиотеки Testing Library. Чтобы запустить наборы тестов, вы должны выполнить команду `npx nx test testing-input-output`. Вы также можете установить [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner), чтобы выполнять тесты, щелкая на кнопку `Run` над каждым блоком `describe` или `it`.
+
+Для тестирования с использованием Cypress вы будете выполнять свои тесты внутри файла `child.component.cy.ts` и запускать команду `npx nx component-test testing-input-output` для выполнения наборов тестов. Вы можете добавить флаг `--watch`, чтобы выполнять ваши тесты в режиме наблюдения.
+
+# Задание
+
+Цель - протестировать несколько поведений приложения, описанных в каждом тестовом файле, с использованием библиотеки Testing Library и Cypress Component Testing.
+
+:::note
+Я создал несколько блоков `it`, но вы можете добавить больше тестов, если хотите.
+:::
diff --git a/docs/src/content/docs/ru/challenges/testing/20-modal.md b/docs/src/content/docs/ru/challenges/testing/20-modal.md
new file mode 100644
index 0000000..897aa66
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/testing/20-modal.md
@@ -0,0 +1,36 @@
+---
+title: 🟠 Модальное окно
+description: Задача 20 посвящена тестированию Модальных окн
+author: thomas-laforge
+contributors:
+  - tomalaforge
+  - tomer953
+  - svenson95
+  - jdegand
+challengeNumber: 20
+command: testing-modal
+sidebar:
+  order: 111
+---
+
+## Information
+
+В этом небольшом приложении у вас есть поле ввода, в котором вы должны ввести имя, и кнопка **Confirm** для отправки формы.
+Если вы вводите имя, появится модальное окно подтверждения; в противном случае будет отображено модальное окно с ошибкой.
+В модальном окне подтверждения, если пользователь нажимает кнопку **Confirm**, появится сообщение с подтверждением отправки формы. Если пользователь нажимает **Cancel**, будет отображено сообщение об ошибке.
+
+Цель этого вызова - протестировать диалоги внутри вашего приложения. Для этого мы будем тестировать всё приложение, как это делает end-to-end тест. Это означает, что мы будем тестировать `AppComponent` как черный ящик и реагировать на события на странице. <b>Не следует тестировать внутренние детали</b>. Разница между e2e тестом и интеграционным тестом заключается в том, что мы будем подделывать все вызовы API. _(Все http-запросы фальсифицированы внутри этого приложения и отличаются от тех что присутствуют в реальном корпоративном приложении.)_
+
+Вы можете поиграть с этим, запустив: `npx nx serve testing-modal`.
+
+Файл с именем `app.component.spec.ts` позволит вам тестировать ваше приложение с использованием библиотеки Testing Library. Чтобы запустить наборы тестов, вы должны выполнить команду `npx nx test testing-modal`. Вы также можете установить [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner), чтобы выполнять тесты, щелкая на кнопку `Run` над каждым блоком `describe` или `it`.
+
+Для тестирования с использованием Cypress вы будете выполнять свои тесты внутри файла `app.component.cy.ts` и запускать команду `npx nx component-test testing-modal` для выполнения наборов тестов. Вы можете добавить флаг `--watch`, чтобы выполнять ваши тесты в режиме наблюдения.
+
+# Задание
+
+Цель - протестировать несколько поведений приложения, описанных в каждом тестовом файле, с использованием библиотеки Testing Library и Cypress Component Testing.
+
+:::note
+Я создал несколько блоков `it`, но вы можете добавить больше тестов, если хотите.
+:::
diff --git a/docs/src/content/docs/ru/challenges/testing/24-harness-creation.md b/docs/src/content/docs/ru/challenges/testing/24-harness-creation.md
new file mode 100644
index 0000000..8865ccb
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/testing/24-harness-creation.md
@@ -0,0 +1,48 @@
+---
+title: 🟠 Создание тестового стенда
+description: Задание 24 посвящено созданию компонента тестового стенда.
+author: thomas-laforge
+contributors:
+  - tomalaforge
+  - tomer953
+  - jdegand
+challengeNumber: 24
+command: testing-create-harness
+sidebar:
+  order: 112
+---
+
+## Информация
+
+Цель этого вызова - создать тестовый стенд для `slider.component.ts`. Файл стенда, `slider.harness.ts`, уже создан.
+
+Необходимо реализовать следующее API:
+
+```ts
+  async clickPlus(): Promise<void> ;
+
+  async clickMinus(): Promise<void>;
+
+  async getValue(): Promise<number> ;
+
+  async getMinValue(): Promise<number>;
+
+  async disabled(): Promise<boolean>;
+
+  async setValue(value: number): Promise<void>;
+```
+
+Кроме того, вы должны создать `HarnessPredicate` с предикатом по умолчанию и свойством `minValue`.
+
+```ts
+  static with<T extends MySliderHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: SliderHarnessFilters = {}
+  ): HarnessPredicate<T>;
+```
+
+Наконец, вам нужно создать набор тестов для app.component. Некоторые тесты по умолчанию уже написаны, но не стесняйтесь добавлять столько тестов, сколько вам нужно, и создавать столько методов стенда, сколько вам потребуется.
+
+> Документация Angular Material доступна [здесь](https://material.angular.io/cdk/test-harnesses/overview).
+
+Удачи !!! 💪
diff --git a/docs/src/content/docs/ru/challenges/testing/29-real-application.md b/docs/src/content/docs/ru/challenges/testing/29-real-application.md
new file mode 100644
index 0000000..046e8b1
--- /dev/null
+++ b/docs/src/content/docs/ru/challenges/testing/29-real-application.md
@@ -0,0 +1,37 @@
+---
+title: 🔴 Приложение из реальной жизни
+description: Задача 29 посвящена тестированию приложения из реальной жизни
+author: thomas-laforge
+contributors:
+  - tomalaforge
+  - tomer953
+  - svenson95
+challengeNumber: 29
+command: testing-todos-list
+sidebar:
+  order: 205
+---
+
+## Информация
+
+Это приложение представляет собой большой вызов, потому что оно тесно напоминает приложение из реальной жизни, с которым вы можете столкнуться в своей повседневной деятельности в качестве разработчика Angular. Что делает его более сложным, так это необходимость обрабатывать асинхронные задачи и создавать соответствующие заглушки.
+
+Приложение - это типичное приложение для списка задач. Вы можете фильтровать заявки, создавать новые, назначать каждую заявку, закрывать другие и переходить к деталям каждой заявки.
+
+В этом вызове вы напишете тесты для `ListComponent`, который представляет глобальный вид, и `RowComponent`, который представляет конкретную заявку. Кроме того, вам нужно будет написать модульные тесты для `TicketStoreService`, используя библиотеку Testing Library. _Эта библиотека позволяет эффективно тестировать сервисы._
+
+Особенно сложно будет обрабатывать асинхронные задачи. Важно не вводить явные <b>ожидания(waits)</b> в ваши тесты, так как это приведет к ненужным задержкам. Вместо этого лучше искать элемент, который должен появиться или исчезнуть из DOM. В этом случае тест будет естественным образом ожидать правильного периода времени, так как ожидания уже реализованы в обеих библиотеках. Воспользуйтесь встроенными функциональными возможностями для создания эффективных и надежных тестов.
+
+Вы можете поиграть с этим, запустив: `npx nx serve testing-todos-list`.
+
+Чтобы запустить тесты Testing Library, вам нужно выполнить `npx nx test testing-todos-list`. Вы также можете установить [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner), чтобы выполнять тесты, нажимая на кнопку `Run` над каждым блоком `describe` или `it`.
+
+Для тестирования с помощью Cypress вы выполните свой тест внутри `child.component.cy.ts` и выполните `npx nx component-test testing-todos-list`, чтобы запустить ваши тестовые наборы. Вы можете добавить флаг `--watch`, чтобы выполнять тесты в режиме наблюдения.
+
+# Задание
+
+Цель - протестировать множество поведений приложения, описанных в каждом тестовом файле, с использованием библиотеки Testing и Cypress Component Testing.
+
+:::note
+Я создал несколько блоков `it`, но не стесняйтесь добавлять больше тестов, если хотите.
+:::