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`, но вы можете добавить больше тестов, если хотите.
+:::