На самом деле вы можете спросить, зачем мне изучать модульное тестирование, в то время как я могу уделять больше времени разработке хорошей функции ...! Почему так важно модульное тестирование, когда мне следует писать модульное тестирование ... Каждый раз, когда вы слышите о модульном тестировании, у вас возникает множество вопросов.
В этой статье мы узнаем, почему, когда и как UNIT TESTING в Angular!
Готовы ли вы к первой поездке в путешествие по модульному тестированию! Давайте начнем ..
Прежде всего, зачем мне изучать модульное тестирование ... Почему это важно?
- Распространенная ошибка - начинать с кодирования функции, но модульное тестирование заставляет вас в первую очередь задуматься о дизайне структуры кода.
- Положите свой код на твердую основу, чтобы вы были уверены, что в нем меньше или нет ошибок.
- Облегчает рефакторинг кода или добавление новой функции, поскольку тестовые примеры гарантируют, что вы не нарушите работу какой-либо другой части приложения этой новой частью.
- Модульное тестирование добавляет хорошую документацию для вашего кода.
Есть только модульное тестирование или есть еще типы?
конечно, есть и другие виды тестирования:
- Модульное тестирование
Тестирование небольших частей приложения и полной зависимости от самого себя. В angular это тестируемый компонент изолированно, без каких-либо внешних ресурсов и шаблонов.
- Интеграционное тестирование
Тестирование взаимодействия между двумя модулями. В angular это тестирование с использованием шаблона и внешних ресурсов.
- Сквозное тестирование
Он предназначен для автоматического тестирования. Тесты гарантируют, что приложение работает должным образом от начала до конца. Во время выполнения тестов браузер взаимодействует так же, как пользователь будет использовать ваше приложение. Сквозные угловые тесты основаны на фреймворке Protractor.
Но на нашем пути мы поговорим о модульном тестировании в Angular.
Тесты - это истории, которые мы рассказываем следующему поколению программистов над проектом.
- Рой Ошеров, Искусство модульного тестирования
Инструменты
Как тогда я могу начать модульное тестирование в Angular?
Сначала вам нужно знать, какие инструменты предоставляет angular для модульного тестирования.
- Жасмин:
Jasmine - это среда тестирования javascript, которая пытается описать тесты в удобочитаемом формате, чтобы люди без технических знаний могли понять, что тестируется.
2. Карма:
Karma - это средство запуска тестов, которое позволяет запускать тесты жасмина внутри браузеров из командной строки. Результаты тестов также отображаются в командной строке.
Karma также может отслеживать изменения в файлах разработки и автоматически повторно запускать тесты.
Это инструменты, о которых вам нужно знать, чтобы начать тестирование в проекте Angular.
Примечание: эта статья будет более полезной и полезной из следующего раздела, если у вас есть основы angular, чтобы понять, как создавать проекты angular и внутреннюю структуру, но не волнуйтесь, я дам вам несколько советов по запустите свое приложение.
Предпосылки для начала:
У вас должен быть узел на вашем компьютере, установить angular-cli и создать новый проект из командной строки:
- npm install -g @ angular / cli
- новое модульное тестирование angular
Начало работы
Откройте свой проект angular и давайте углубимся в структуру, чтобы узнать, где мы могли бы написать наши тестовые примеры.
Как показано на этом рисунке, в src/app, где вы можете найти свой компонент приложения по умолчанию и любые другие сгенерированные компоненты, есть один вид файлов, которые вы никогда не пытались открыть или обнаружить раньше ... Это то, где мы собираемся написать ... да, эти выделенные файлы являются нашим местом назначения componentName.component.spec.ts.
Файл тестирования - .spec .ts - Структура:
Вот структура, которой нужно следовать в файле спецификации:
describe ( ‘TestName’ , ( ) => {
It ( ‘sub_testName’ , ( ) => { }
}) ;
Как показано в коде выше, у вас есть:
- Метод description ()
Это метод, который используется для определения набора и набора означает группу связанных тестов.
- Метод It ()
Используется для определения одного тестового примера и принимает 2 параметра, строка описывает, что этот тестовый пример должен возвращать, а другой будет функцией, которую вызовет средство выполнения тестов.
И внутри каждого метода It () вы напишете свою реализацию тестового примера, которая разделена на 3 этапа: Arrange, Act, Assert. Это шаблон для упорядочивания и форматирования кода в методах Unit Test: Каждый метод должен сгруппировать эти функциональные разделы, разделенные пустыми строками:
- Организуйте все необходимые предварительные условия и вводные данные.
- Действуйте в отношении тестируемого объекта или метода.
- Подтвердите, что ожидаемые результаты были достигнуты.
// In you component.spec.ts
describe ( ‘TestName’ , ( ) => {
It ( ‘sub_testName’ , ( ) => {
let instance = new ComponentName ; //initialize - Arrange
let result = instance.functionName(“Marina”);//make a change - Act
expect(result).toContain(“Marina”) ; //expect the result - Assert
}
}) ;
И funtionName - это реализованная функция в вашем component.ts
// In you component.ts
function functionName (name) {
alert("My Name is " + name );
}
Как показано в фрагменте кода выше, в component.spec.ts у вас есть описательные строки кода, упорядочивающие экземпляр компонента, который вы собираетесь использовать в качестве первого шага, затем вносить изменения в функцию в этом компоненте и, наконец, ожидать результатов.
Наконец, запустите свои тесты
Когда вы закончите свой тестовый пример, запустите команду angular testing: ng test
Откроется окно карма, в котором будут запущены тестовые примеры и будут показаны описание, написанное на describe method, и подописание для тестового примера, написанного на It method, который вы выполняете, с результатами, если он не прошел или прошел.
подсказки
Хороший тест должен рассказывать историю
Необязательно следовать одной и той же структуре (Arrange, Act, Assert) каждый раз в деталях и одинаково, но лучше сделать ваш тестовый код более читабельным и более структурированным. Это один из советов по написанию хорошего модульного теста
Конечно, это еще не конец. Еще многое предстоит выяснить, это только начало. Ждите следующей статьи о тестировании компонентов, услуг и прочего :)
Не просто читайте об этом, попробуйте!
Удачного обучения ..
Вот несколько полезных ссылок
