mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 21:03:03 -05:00
Added RU translation for blocks: rxjs, performance and testing
This commit is contained in:
DinarShagaliev
@@ -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, вы без сомнения сломаете ваше приложение.
|
||||
@@ -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>
|
||||
52
docs/src/content/docs/ru/challenges/performance/index.mdx
Normal file
52
docs/src/content/docs/ru/challenges/performance/index.mdx
Normal file
@@ -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>, как показано ниже.
|
||||
|
||||
|
||||
|
||||
Теперь вы можете профилировать свое приложение, нажав кнопку записи. Вы можете играть с вашим приложением и видеть, когда срабатывает обнаружение изменений и какие компоненты перерисовываются.
|
||||
|
||||
:::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/"
|
||||
/>
|
||||
@@ -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 в противном случае.
|
||||
|
||||
### Утверждение
|
||||
|
||||
Команда тестировщиков сообщает об **ошибке**. Интерфейс пользователя всегда показывает **Все [темы] были удалены**, даже если некоторые удаления не удалось.
|
||||
|
||||
👉 Найдите ошибку и исправьте ее.
|
||||
@@ -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.
|
||||
|
||||
## Ограничения
|
||||
|
||||
Пользователи должны иметь возможность журналировать значение/ошибку каждый раз при нажатии кнопки "Получить".
|
||||
27
docs/src/content/docs/ru/challenges/testing/17-router.md
Normal file
27
docs/src/content/docs/ru/challenges/testing/17-router.md
Normal file
@@ -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`, но вы можете добавить больше тестов, если хотите.
|
||||
:::
|
||||
@@ -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`, но вы можете добавить больше тестов, если хотите.
|
||||
:::
|
||||
@@ -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`, но вы можете добавить больше тестов, если хотите.
|
||||
:::
|
||||
36
docs/src/content/docs/ru/challenges/testing/20-modal.md
Normal file
36
docs/src/content/docs/ru/challenges/testing/20-modal.md
Normal file
@@ -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`, но вы можете добавить больше тестов, если хотите.
|
||||
:::
|
||||
@@ -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).
|
||||
|
||||
Удачи !!! 💪
|
||||
@@ -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`, но не стесняйтесь добавлять больше тестов, если хотите.
|
||||
:::
|
||||
Reference in New Issue
Block a user