Я много раз слышу эту историю:
- Стоит ли мне протестировать приложение Angular?
- Да, стоит.
- Почему?
- Потому что это ускоряет разработку.
- Хммм .. Как?
- Вам не нужно тестировать все методы вручную. Вы можете запустить одну команду в терминале и увидеть, если что-то не получается.

Итак, что такое «автоматическое тестирование»? Хорошая практика - писать код для тестирования кода и делать это автоматически.

Представьте, что у вас есть простые функции, которые вы используете в своем приложении во многих местах. Чтобы проверить это, вам нужно будет запустить ваше приложение. Возможно, вам нужно войти в систему, а затем вам придется вручную протестировать все места, где вы использовали эту функцию, и посмотреть, возвращает ли она правильные результаты. Если у вас есть автоматизированные тесты, единственное, что вам нужно сделать, это запустить команду в терминале, и вы увидите, все ли работает правильно.

Да, это правда, что ваше развитие будет - в некоторой степени - немного дольше. Но если что-то не получается, вы можете гораздо быстрее найти в своем приложении то место, которое нужно исправить.

Запускать автоматические тесты в Angular очень просто. Если вы создали приложение с помощью Angular CLI, вам не нужно ничего делать. Если вы хотите запустить какое-то приложение с Angular CLI, вам нужно запустить команду:

ng new my-dream-app

где «my-dream-app» - название вашего приложения, и все!

Виды тестов

В целом можно выделить три основных типа тестов:

Модульные тесты

Как следует из названия, речь идет о тестировании отдельных модулей кода. Они пытаются ответить на многие вопросы, например, «Правильна ли логика моей функции?» или «Получу ли я правильные результаты?». Важно, чтобы мы тестировали наш компонент изолированно, без внешних ресурсов (например, конечных точек API, файловой системы). Модульные тесты легко писать и работают очень быстро. Когда мы пишем модульный тест, нам нужно помнить, что у нас нет для них шаблона.

Интеграционные тесты

Используется для тестирования компонента с внешними ресурсами (например, конечными точками API, файловой системой). Чтобы запустить их в Angular, нам нужно искать не класс Typescript, а весь компонент.

Сквозные тесты

Тесты, которые проверяют, что все приложение работает так, как ожидалось с точки зрения пользователя (нам нужно имитировать реального пользователя). У этих тестов есть один недостаток - они очень медленные.

В этом посте я остановлюсь только на модульных тестах.

Как мне написать модульный тест?

Для тестирования приложения Angular есть несколько инструментов, которые упростят процесс настройки и его выполнение. Однако, если мы используем Angular CLI для создания наших приложений, мы используем Karma и Jasmine по умолчанию.

Карма

Karma - это инструмент командной строки JavaScript, который можно использовать для запуска веб-сервера. Он загрузит исходный код вашего приложения и запустит ваши тесты. Как пишут создатели на своем веб-сайте: Основная цель Karma - предоставить разработчикам продуктивную среду тестирования. Вы можете настроить Karma для работы с разными браузерами. Полезно убедиться, что приложение работает во всех браузерах, которые вам нужны. Karma отобразит результаты ваших тестов в командной строке, как только они завершат свою работу в браузере. Это приложение NodeJS, поэтому вы можете установить его через npm или yarn.

Жасмин

Jasmine, - как написано на их официальном сайте, - Jasmine - это основанная на поведении среда разработки для тестирования кода JavaScript. Это не зависит от каких-либо других фреймворков JavaScript. Не требует DOM. И у него чистый, очевидный синтаксис, так что вы можете легко писать тесты . Сегодня он стал самым популярным выбором для тестирования приложений Angular. Это поможет вам сохранить ваш код хорошо структурированным и документированным.

Чтобы запустить тестовую среду, нам нужно ввести в нашу консоль следующее:

Когда вы запустите эту команду, Chrome также откроет новое окно со списком ваших тестов.

Теперь мы можем начать наш первый тест. Помните, что когда вы пишете тест, ваши функции / методы должны быть небольшими - 10 строк кода или меньше. Вы также должны не забывать давать своим тестам и методам имена, которые точно описывают то, что они делают. Это поможет вам быстро найти все ошибки.

Ниже у нас есть простой компонент для отображения сообщения и способ, как поставить лайк этому сообщению.

Теперь мы можем создать файл для теста. Наш файл компонента - post.component.ts, поэтому нам нужно создать файл с именем: post.component.spec.ts. Karma - наша программа запуска тестов - автоматически ищет файлы с расширением .spec.
Когда мы создаем наш компонент с помощью генератора Angular CLI, этот файл уже должен существовать.

Синтаксис

Чаще всего мы будем использовать две функции:

  • описать () - в Jasmine мы используем функцию описания, чтобы сгруппировать наши тесты вместе
  • it () - определяет спецификацию или тест

Мы можем описать наш тест так (я не буду заострять внимание на разделах beforeEach с зависимостями):

describe('PostComponent', () => { })

Второй аргумент - это функция, которую запускает тестовый запуск. Теперь мы можем написать наши спецификации / тесты. При написании модульного теста нам нужно протестировать все пути выполнения, а также импортировать и определить наш компонент. Для этого мы можем использовать функцию beforeEach и назвать наш первый тест.

import { PostComponent } from './post.component'; describe('PostComponent', () => { let component: PostComponent; beforeEach(() => { component = new PostComponent(); }); it('should increase post likes', () => { }); });

Теперь пора запустить нашу функцию из компонента и проверить, увеличатся ли лайки к постам.

Как видим, все в порядке - наш тест работает.

Я надеюсь, что те из вас, кто не тестирует свои приложения, начнут делать это и найдут эти знания полезными.

Кончик

Знаете ли вы, что вы можете проверить охват ваших тестов? Для этого вам нужно запустить тесты с флагом:

ng test --code-coverage

Затем вам нужно перейти в свой проект, и вы увидите новую папку под названием «Покрытие». Вы должны найти index.html и открыть его в своем браузере. Здесь будут отображаться все функции вашего приложения, которые описаны в нем.

Если вы читаете это и у вас есть идея для нового технологического продукта, ознакомьтесь с нашими услугами на сайте softwarebrothers.co и напишите нам по адресу [email protected]

Первоначально опубликовано на https://softwarebrothers.co 10 декабря 2018 г.