fix: changed contributor and fixed relative path problem in performance/index.mdx

2026-02-10 12:53:03 -05:00 · 2024-04-12 15:24:11 +03:00
parent 35aa4ee1b9
commit 23099c3f66
14 changed files with 6594 additions and 661 deletions
--- a/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md
+++ b/docs/src/content/docs/ru/challenges/performance/12-scroll-cd.md
@@ -3,7 +3,7 @@ title: 🟠 Оптимизация обнаружения изменений
 description: Задание 12 посвящено оптимизации количества циклов обнаружения изменений при прокрутке
 author: thomas-laforge
 contributors:
-  - tomalaforge
+  - Dinozavvvr
 challengeNumber: 12
 command: performance-scroll-cd
 sidebar:
--- a/docs/src/content/docs/ru/challenges/performance/37-ngfor-biglist.md
+++ b/docs/src/content/docs/ru/challenges/performance/37-ngfor-biglist.md
@@ -3,8 +3,7 @@ title: 🟠 Оптимизация больших списков
 description: Задание 37 посвящено изучению того, как виртуализация оптимизирует рендеринг больших списков
 author: thomas-laforge
 contributors:
-  - tomalaforge
-  - jdegand
+  - Dinozavvvr
 challengeNumber: 37
 command: performance-ngfor-biglist
 sidebar:
--- a/docs/src/content/docs/ru/challenges/performance/index.mdx
+++ b/docs/src/content/docs/ru/challenges/performance/index.mdx
@@ -3,8 +3,7 @@ title: Производительность Angular-а
 prev: false
 next: false
 contributors:
-  - tomalaforge
-  - tomer953
+  - Dinozavvvr
 description: Узнайте, как использовать расширение Angular DevTools для Chrome.
 noCommentSection: true
 sidebar:
@@ -23,7 +22,7 @@ import { LinkCard } from '@astrojs/starlight/components';

 При запуске приложения Angular вы можете проверить страницу, нажав <b>F12</b>, что откроет <b>Инструменты разработчика Chrome</b>. Затем перейдите на вкладку <b>Angular</b>. Оттуда вы можете выбрать вкладку <b>Profiler</b>, как показано ниже.

-![вкладка профилировщика](../../../../assets/performance/profiler-tab.png 'Вкладка профилировщика')
+![вкладка профилировщика](../../../../../assets/performance/profiler-tab.png 'Вкладка профилировщика')

 Теперь вы можете профилировать свое приложение, нажав кнопку записи. Вы можете играть с вашим приложением и видеть, когда срабатывает обнаружение изменений и какие компоненты перерисовываются.

@@ -31,7 +30,7 @@ import { LinkCard } from '@astrojs/starlight/components';
 Вы можете узнать больше на [странице документации](https://angular.io/guide/devtools).
 :::

-Теперь, когда вы знаете, как использовать <b>Angular DevTool</b>, вы можете выбрать испытание, профилировать его и решить его.
+Теперь, когда вы знаете, как использовать <b>Angular DevTool</b>, вы можете выбрать испытание и решить его с использованием профилирования.

 <LinkCard
  title="🟢 Default vs OnPush"
--- 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
@@ -3,7 +3,7 @@ title: 🟠 Ошибка в операторе высшего порядка RxJ
 description: Задача 11 посвящена устранению ошибки в RxJS из-за операторов высшего порядка
 author: thomas-laforge
 contributors:
-  - tomalaforge
+  - Dinozavvvr
 challengeNumber: 11
 command: rxjs-pipe-bug
 sidebar:
@@ -18,7 +18,7 @@ sidebar:

 ### История пользователя

-Нам нужна кнопка для каждой `Темы`. Когда мы нажимаем на нее, мы удаляем все объекты с этой `Темой` в нашей базе данных _(Фейковая БД в нашем случае)_. Наконец, мы отображаем **Все [темы] были удалены** в случае успешного удаления или **Ошибка: удаление некоторых [тем] не удалось** если удаление некоторых объектов не удалось.
+Нам нужна кнопка для каждой `Статья`. Когда мы нажимаем на нее, мы удаляем все объекты с этой `Статьей` в нашей базе данных _(Фейковая БД в нашем случае)_. Наконец, мы отображаем **Все [статьи] были удалены** в случае успешного удаления или **Ошибка: удаление некоторых [статей] не удалось** если удаление некоторых объектов не удалось.

 ### Ограничения:

--- 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
@@ -4,8 +4,7 @@ description: Задача 38 посвященя изучению заверше
 author: devesh-chaudhari
 command: rxjs-catch-error
 contributors:
-  - DeveshChau
-  - tomalaforge
+  - Dinozavvvr
 challengeNumber: 38
 sidebar:
  order: 14
--- a/docs/src/content/docs/ru/challenges/testing/17-router.md
+++ b/docs/src/content/docs/ru/challenges/testing/17-router.md
@@ -3,7 +3,7 @@ title: 🟠 Роутер
 description: Задача 17 посвящена тестрированию Роутера
 author: thomas-laforge
 contributors:
-  - tomalaforge
+  - Dinozavvvr
 challengeNumber: 17
 command: testing-router-outlet
 sidebar:
--- a/docs/src/content/docs/ru/challenges/testing/18-nested-comp.md
+++ b/docs/src/content/docs/ru/challenges/testing/18-nested-comp.md
@@ -3,7 +3,7 @@ title: 🟠 Вложенные компоненты
 description: Задание 18 посвящено тестированию вложенных компонентов
 author: thomas-laforge
 contributors:
-  - tomalaforge
+  - Dinozavvvr
 challengeNumber: 18
 command: testing-nested
 sidebar:
--- a/docs/src/content/docs/ru/challenges/testing/19-input-output.md
+++ b/docs/src/content/docs/ru/challenges/testing/19-input-output.md
@@ -3,10 +3,7 @@ title: 🟠 Ввод Вывод
 description: Задача 19 посвящена тестированию Ввода и Вывода
 author: thomas-laforge
 contributors:
-  - tomalaforge
-  - tomer953
-  - svenson95
-  - jdegand
+  - Dinozavvvr
 challengeNumber: 19
 command: testing-input-output
 sidebar:
--- a/docs/src/content/docs/ru/challenges/testing/20-modal.md
+++ b/docs/src/content/docs/ru/challenges/testing/20-modal.md
@@ -3,23 +3,20 @@ title: 🟠 Модальное окно
 description: Задача 20 посвящена тестированию Модальных окн
 author: thomas-laforge
 contributors:
-  - tomalaforge
-  - tomer953
-  - svenson95
-  - jdegand
+  - Dinozavvvr
 challengeNumber: 20
 command: testing-modal
 sidebar:
  order: 111
 ---

-## Information
+## Информация

 В этом небольшом приложении у вас есть поле ввода, в котором вы должны ввести имя, и кнопка **Confirm** для отправки формы.
 Если вы вводите имя, появится модальное окно подтверждения; в противном случае будет отображено модальное окно с ошибкой.
 В модальном окне подтверждения, если пользователь нажимает кнопку **Confirm**, появится сообщение с подтверждением отправки формы. Если пользователь нажимает **Cancel**, будет отображено сообщение об ошибке.

-Цель этого вызова - протестировать диалоги внутри вашего приложения. Для этого мы будем тестировать всё приложение, как это делает end-to-end тест. Это означает, что мы будем тестировать `AppComponent` как черный ящик и реагировать на события на странице. <b>Не следует тестировать внутренние детали</b>. Разница между e2e тестом и интеграционным тестом заключается в том, что мы будем подделывать все вызовы API. _(Все http-запросы фальсифицированы внутри этого приложения и отличаются от тех что присутствуют в реальном корпоративном приложении.)_
+Цель этой задачи - протестировать модальные окна внутри вашего приложения. Для этого мы будем тестировать всё приложение, как это делает end-to-end тест. Это означает, что мы будем тестировать `AppComponent` как черный ящик и реагировать на события на странице. <b>Не следует тестировать внутренние детали</b>. Разница между e2e тестом и интеграционным тестом заключается в том, что мы будем подделывать все вызовы API. _(Все http-запросы фальсифицированы внутри этого приложения и отличаются от тех что присутствуют в реальном корпоративном приложении.)_

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

--- a/docs/src/content/docs/ru/challenges/testing/24-harness-creation.md
+++ b/docs/src/content/docs/ru/challenges/testing/24-harness-creation.md
@@ -1,11 +1,9 @@
 ---
-title: 🟠 Создание тестового стенда
-description: Задание 24 посвящено созданию компонента тестового стенда.
+title: 🟠 Создание harness класса
+description: Задача 24 посвящено созданию компонента тестового стенда.
 author: thomas-laforge
 contributors:
-  - tomalaforge
-  - tomer953
-  - jdegand
+  - Dinozavvvr
 challengeNumber: 24
 command: testing-create-harness
 sidebar:
@@ -14,7 +12,7 @@ sidebar:

 ## Информация

-Цель этого вызова - создать тестовый стенд для `slider.component.ts`. Файл стенда, `slider.harness.ts`, уже создан.
+Цель этой задачи - реализовать harness класс для `slider.component.ts`. Файл стенда, `slider.harness.ts`, уже создан.

 Необходимо реализовать следующее API:

@@ -41,7 +39,7 @@ sidebar:
  ): HarnessPredicate<T>;
 ```

-Наконец, вам нужно создать набор тестов для app.component. Некоторые тесты по умолчанию уже написаны, но не стесняйтесь добавлять столько тестов, сколько вам нужно, и создавать столько методов стенда, сколько вам потребуется.
+Наконец, вам нужно создать набор тестов для `app.component`. Некоторые тесты по умолчанию уже написаны, но не стесняйтесь добавлять столько тестов, сколько вам нужно, и создавать столько методов, сколько вам потребуется.

 > Документация Angular Material доступна [здесь](https://material.angular.io/cdk/test-harnesses/overview).

--- a/docs/src/content/docs/ru/challenges/testing/29-real-application.md
+++ b/docs/src/content/docs/ru/challenges/testing/29-real-application.md
@@ -3,9 +3,7 @@ title: 🔴 Приложение из реальной жизни
 description: Задача 29 посвящена тестированию приложения из реальной жизни
 author: thomas-laforge
 contributors:
-  - tomalaforge
-  - tomer953
-  - svenson95
+  - Dinozavvvr
 challengeNumber: 29
 command: testing-todos-list
 sidebar:
--- a/docs/src/content/docs/ru/challenges/testing/index.mdx
+++ b/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/"
+/>