Merge pull request #755 from Dinozavvvr/feat-ru

feat(docs). Added RU translation for blocks: rxjs, performance and testing

docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md

@@ -0,0 +1,40 @@
+---
+title: 🟠 Оптимизация обнаружения изменений
+description: Задание 12 посвящено оптимизации количества циклов обнаружения изменений при прокрутке
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+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, вы без сомнения сломаете ваше приложение.

docs/src/content/docs/ru/challenges/performance/37-ngfor-biglist.md

@@ -0,0 +1,37 @@
+---
+title: 🟠 Оптимизация больших списков
+description: Задание 37 посвящено изучению того, как виртуализация оптимизирует рендеринг больших списков
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+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>

docs/src/content/docs/ru/challenges/performance/index.mdx

@@ -0,0 +1,51 @@
+---
+title: Производительность Angular-а
+prev: false
+next: false
+contributors:
+  - Dinozavvvr
+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/"
+/>

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:
+  - Dinozavvvr
+challengeNumber: 11
+command: rxjs-pipe-bug
+sidebar:
+  order: 114
+---
+
+Давайте погрузимся в удивительный мир RxJs.
+
+Этот вызов вдохновлен реальным примером.
+
+## Информация
+
+### История пользователя
+
+Нам нужна кнопка для каждой `Статья`. Когда мы нажимаем на нее, мы удаляем все объекты с этой `Статьей` в нашей базе данных _(Фейковая БД в нашем случае)_. Наконец, мы отображаем **Все [статьи] были удалены** в случае успешного удаления или **Ошибка: удаление некоторых [статей] не удалось** если удаление некоторых объектов не удалось.
+
+### Ограничения:
+
+Мы можем передавать в нашу БД для удаления только один объект за раз. БД ответит true, если данные были успешно удалены, и false в противном случае.
+
+### Утверждение
+
+Команда тестировщиков сообщает об **ошибке**. Интерфейс пользователя всегда показывает **Все [темы] были удалены**, даже если некоторые удаления не удалось.
+
+👉 Найдите ошибку и исправьте ее.

docs/src/content/docs/ru/challenges/rxjs/38-rxjs-catch-error.md

@@ -0,0 +1,35 @@
+---
+title: 🟢 catchError
+description: Задача 38 посвященя изучению завершения Observable.
+author: devesh-chaudhari
+command: rxjs-catch-error
+contributors:
+  - Dinozavvvr
+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.
+
+## Ограничения
+
+Пользователи должны иметь возможность журналировать значение/ошибку каждый раз при нажатии кнопки "Получить".

docs/src/content/docs/ru/challenges/testing/17-router.md

@@ -0,0 +1,27 @@
+---
+title: 🟠 Роутер
+description: Задача 17 посвящена тестрированию Роутера
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+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`, но вы можете добавить больше тестов, если хотите.
+:::

docs/src/content/docs/ru/challenges/testing/18-nested-comp.md

@@ -0,0 +1,31 @@
+---
+title: 🟠 Вложенные компоненты
+description: Задание 18 посвящено тестированию вложенных компонентов
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+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`, но вы можете добавить больше тестов, если хотите.
+:::

docs/src/content/docs/ru/challenges/testing/19-input-output.md

@@ -0,0 +1,29 @@
+---
+title: 🟠 Ввод Вывод
+description: Задача 19 посвящена тестированию Ввода и Вывода
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+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`, но вы можете добавить больше тестов, если хотите.
+:::

docs/src/content/docs/ru/challenges/testing/20-modal.md

@@ -0,0 +1,33 @@
+---
+title: 🟠 Модальное окно
+description: Задача 20 посвящена тестированию Модальных окн
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+challengeNumber: 20
+command: testing-modal
+sidebar:
+  order: 111
+---
+
+## Информация
+
+В этом небольшом приложении у вас есть поле ввода, в котором вы должны ввести имя, и кнопка **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`, но вы можете добавить больше тестов, если хотите.
+:::

docs/src/content/docs/ru/challenges/testing/24-harness-creation.md

@@ -0,0 +1,46 @@
+---
+title: 🟠 Создание harness класса
+description: Задача 24 посвящено созданию компонента тестового стенда.
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+challengeNumber: 24
+command: testing-create-harness
+sidebar:
+  order: 112
+---
+
+## Информация
+
+Цель этой задачи - реализовать harness класс для `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).
+
+Удачи !!! 💪

docs/src/content/docs/ru/challenges/testing/29-real-application.md

@@ -0,0 +1,35 @@
+---
+title: 🔴 Приложение из реальной жизни
+description: Задача 29 посвящена тестированию приложения из реальной жизни
+author: thomas-laforge
+contributors:
+  - Dinozavvvr
+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`, но не стесняйтесь добавлять больше тестов, если хотите.
+:::

docs/src/content/docs/ru/challenges/testing/index.mdx

@@ -0,0 +1,73 @@
+---
+title: Тестирование
+prev: false
+next: false
+contributors:
+  - Dinozavvvr
+description: Введение в задачи по тестированию.
+noCommentSection: true
+sidebar:
+  order: 1
+---
+
+import { LinkCard } from '@astrojs/starlight/components';
+
+Тестирование - это важный этап в создании масштабируемых, поддерживаемых и надежных приложений.
+Тестирование никогда не должно быть упущено, даже в случае сжатых сроков или сильного давления со стороны команды продукта.
+В наши дни существует множество замечательных инструментов, которые облегчают тестирование вашего кода и обеспечивают отличный опыт разработчика.
+
+В этой серии упражнений по тестированию мы изучим и освоим [Testing Library](https://testing-library.com/docs/) и [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/angular/overview), которые упрощают манипуляции с DOM для тестирования любого компонента Angular.
+
+Преимущества использования <b>Testing Library</b> или <b>Cypress Component Testing</b> заключаются в том, что вы тестируете свой компонент как черный ящик. Вы будете взаимодействовать только с тем, что пользователь может делать на интерфейсе. Однако отличие от полноценных тестов заключается в том, что бэкэнд замокан, что делает тесты быстрее и более поддерживаемыми.
+Цель состоит в том, чтобы мокать как можно меньше, чтобы тестировать ваш компонент на более высоком уровне, чем при модульном тестировании, что облегчит рефакторинг.
+В реальном приложении интеграционные тесты - это тесты, которые вы будете писать больше всего. Изучение того, как их писать, сделает ваше приложение более надежным и поддерживаемым.
+
+Перед вами серия из 8 задач, которые вы можете решить в любом порядке.
+
+<LinkCard
+  title="🟢 Harness"
+  description="Узнайте, как тестировать с использованием компонентов Angular CDK harness"
+  href="/challenges/testing/23-harness/"
+/>
+
+<LinkCard
+  title="🟢 Checkbox"
+  description="Узнайте, как отлаживать ваши тесты с помощью Testing Library на простом приложении с флажками"
+  href="/challenges/testing/28-checkbox/"
+/>
+
+<LinkCard
+  title="🟠 Router"
+  description="Узнайте, как тестировать компоненты маршрутизатора"
+  href="/challenges/testing/17-router/"
+/>
+
+<LinkCard
+  title="🟠 Nested Components"
+  description="Узнайте, как тестировать вложенные компоненты"
+  href="/challenges/testing/18-nested-comp/"
+/>
+
+<LinkCard
+  title="🟠 Input Output"
+  description="Узнайте, как тестировать вводы и выводы"
+  href="/challenges/testing/19-input-output/"
+/>
+
+<LinkCard
+  title="🟠 Modal"
+  description="Узнайте, как тестировать модальный компонент"
+  href="/challenges/testing/20-modal/"
+/>
+
+<LinkCard
+  title="🟠 Harness Creation"
+  description="Узнайте, как создать собственные харнесы для ваших компонентов"
+  href="/challenges/testing/24-harness-creation/"
+/>
+
+<LinkCard
+  title="🔴 Реальное приложение"
+  description="Узнайте, как написать серию тестов для реальных приложений"
+  href="/challenges/testing/29-real-application/"
+/>