Когда проект NG становится больше и больше, единичные тестирование должно быть проведено на повестку дня. Иногда команда сначала проходит тестирование, сначала некоторые реализуют функции, а затем тестирует функциональные модули. Это имеет свои преимущества и недостатки. Сегодня мы в основном говорим об использовании кармы и жасмина для проведения модульных тестирования модулей NG.
Что такое карма
Карма - это модульная тестовая рамка управления, обеспечивающую текущие модульные тесты в различных средах, таких как Chrome, Firfox, Phantomjs и т. Д.
Рекомендуется использовать параметр-Save-Dev при установке и тестировании связанных модулей NPM, потому что это связано с разработкой. Как правило, если вы запускаете карму, требуются только следующие две команды NPM.
Кода -копия выглядит следующим образом:
NPM Установить карму--сав-дев
NPM Установите карма-юнит-репортер--сав-дев
При установке Karma некоторые часто используемые модули будут автоматически установлены. Обратитесь к свойству PeerdePendencies файла Package.json в коде кармы.
Кода -копия выглядит следующим образом:
"Перезависимости": {
"Карма-Джейсмин": "~ 0,1,0",
"Karma-requirejs": "~ 0.2.0",
"Карма-коффи-препроцессор": "~ 0,1,0",
"Karma-html2js-preprocessor": "~ 0,1,0",
«Карма-хроме-ланчер»: «~ 0,1,0»,
"Karma-firefox-Launcher": "~ 0,1,0",
"Karma-phantomjs-launcher": "~ 0,1,0",
«Карма-сценаристка»: «~ 0,1,0»
}
Тогда типичная рамка для работы обычно требует файла конфигурации. В карме это может быть карма. Conf.js. Код внутри - стиль Nodejs. Общий пример заключается в следующем:
Кода -копия выглядит следующим образом:
module.exports = function (config) {
config.set ({
// основной каталог в следующих файлах
Базепат: '../',
// Информация JS, которую необходимо загрузить в тестовую среду
Файлы: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/**/*. JS',
'test/unit/**/*. JS'
],
// Будь автоматически прослушать изменения в приведенном выше файле, автоматически запустите тест
Autowatch: правда,
// структура теста приложения
Фреймворки: ['jasmine'],
// Какую среду использовать для тестирования кода? Вот хром
Браузеры: ['Chrome'],
// используются плагины, такие как браузер Chrome и плагины жасмина
плагины: [
'Karma-Crome-Launcher',
'karma-firefox-buncher',
'карма-ясмин',
'Karma-Junit-Reporter'
],
// Вывод тестового содержимого и имя модуля, используемое для экспорта
Репортеры: [«Прогресс», «Юнит»],
// Установите информацию файла контента Test Test
junitreporter: {
outputFile: 'test_out/unit.xml',
Suite: 'Unit'
}
});
};
Когда вам нужно обратить на это внимание, большинство из вышеперечисленных плагинов не нужно устанавливать отдельно, потому что они были установлены при установке кармы. Только экспортный плагин Karma-Junit-Reporter должен быть установлен отдельно. Если вы хотите узнать больше о файлах конфигурации, нажмите здесь
Это все о карме. Если вы хотите узнать больше об этом, нажмите здесь
Что такое жасмин
Жасмин является основанием для тестирования кода JavaScript, управляемой поведением. Это не зависит от каких -либо других фреймворков JavaScript. Это не требует DOM. И он имеет чистый, очевидный синтаксис, чтобы вы могли легко написать тесты.
Вышеупомянутое объяснение этого в официальном документе Жасмин, и следующее - простой перевод на китайском языке
Жасмин-это структура тестирования, управляемая поведением, которая не полагается на какую-либо структуру JS и DOM. Это очень чистая и дружелюбная библиотека API.
Вот простой пример, чтобы проиллюстрировать его использование
Определите команду тестового файла как test.js
Кода -копия выглядит следующим образом:
Описать ("A Spec (с настройкой и разрывом)", function () {
var foo;
oopeach (function () {
foo = 0;
foo += 1;
});
После обучения (function () {
foo = 0;
});
Это («это просто функция, поэтому он может содержать любой код», function () {
Ожидайте (foo) .toequal (1);
});
это («может иметь более одного ожидания», function () {
Ожидайте (foo) .toequal (1);
Ожидайте (правда) .toequal (true);
});
});
Приведенный выше пример поступает с официального сайта. Вот только несколько важных API. Для получения дополнительной информации, пожалуйста, нажмите здесь
1. Во -первых, любой тестовый пример определяется функцией описания. У него есть два параметра. Первый используется для описания общего центрального содержания теста, а второй параметр - это функция, которая записывает некоторый реальный тестовый код.
2. Он используется для определения одной конкретной испытательной задачи, а также имеет два параметра. Первый используется для описания тестового содержания, а второй параметр - это функция, которая хранит некоторые методы испытаний.
3. Ожидайте в основном для расчета значения переменной или выражения, а затем сравнить ее с ожидаемым значением или сделать некоторые другие события.
4. Будьте предварительными и после обучения используются в основном для выполнения некоторых вещей до и после выполнения испытательной задачи. Приведенный выше пример заключается в том, чтобы изменить значение переменной до выполнения, а затем сбросить значение переменной после завершения выполнения.
Наконец, в подфункциях в ее подфункциях можно получить область охвата, точно так же, как в вышеприведенном
Если вы хотите запустить приведенный выше пример тестирования, вы можете запустить его через Карар. Пример команды следующим образом:
Кода -копия выглядит следующим образом:
Карма старта -тест/karma.conf.js
Затем мы сосредоточимся на модульном тестировании контроллеров, инструкций и сервисных модулей в NG.
Модульные тесты для NG
Из-за структуры самого NG модули загружаются и создаются с помощью DI, поэтому для облегчения написания тестовых сценариев с помощью жасмина официально предоставляет класс тестового инструмента Angular-Mock.js для обеспечения определения модуля, нагрузки, инъекции и т. Д.
Давайте поговорим о некоторых общих методах в NG-Mock
1. angular.mock.module Этот метод также находится в пространстве имен окон, которое очень удобно для вызова.
Модуль используется для настройки информации о модуле, введенной методом Inject. Параметры могут быть строками, функциями и объектами. Они могут быть использованы как следующее.
Кода -копия выглядит следующим образом:
offeeach (module ('myapp.filters'));
ofeeach (module (function ($ предоставляет) {
$ предоставить. Value ('version', 'test_ver');
}));
Обычно он используется в методе первого обучения, потому что это может гарантировать, что метод ввода может получить конфигурацию модуля при выполнении тестовой задачи.
1. angular.mock.inject Этот метод также находится в пространстве имен окон, которое очень удобно для вызова.
Inject используется для внедрения модуля NG, настроенного выше. Это вызвано в тестовой функции этого. Общие примеры вызова следующие:
Кода -копия выглядит следующим образом:
Angular.Module ('MyApplicationModule', [])
.value ('mode', 'app')
.value ('version', 'v1.0.1');
описать ('myApp', function () {
// вам нужно загрузить модули, которые вы хотите протестировать,
// он загружает только модуль "NG" по умолчанию.
offeeach (module ('MyApplicationModule'));
// inject () используется для внедрения аргументов всех заданных функций
Это («должно предоставить версию», Inject (function (Mode, версия) {
Ожидайте (версия) .toqual ('v1.0.1');
Ожидайте (mode) .toequal ('app');
}));
// Метод инъекций и модуля также может использоваться внутри IT или перед начальником
Это ('должен переопределить версию и проверить новую версию вводится', function () {
// module () принимает функции или строки (псевдонимы модулей)
Module (function ($ предоставление) {
$ предоставлять. // переопределить версию здесь
});
Inject (function (версия) {
Ожидайте (версия) .toequal ('overden');
});
});
});
Выше приведены некоторые примеры, предоставленные чиновником, и код легко понять. Фактически, Inject-это встроенный экземпляр инъекции зависимостей, созданный с использованием метода Angular.Inject. Затем инъекция модуля совпадает с обработкой зависимостей в обычных модулях NG.
После краткого представления NG-Mock мы напишем простой модульный тест, используя контроллеры, инструкции и фильтры.
Модульный тест контроллера
Определите простой контроллер
Кода -копия выглядит следующим образом:
var myApp = angular.module ('myApp', []);
myApp.controller ('myController', function ($ scope) {
$ scope.spices = [{"name": "pasilla", "пряность": "мягкий"},
{"name": "jalapeno", "Spicity": "Hot Hot Hot!"},
{"name": "habanero", "Spicity": "lava hot !!"}];
$ scope.spice = "hello feenan!";
});
Затем мы пишем тестовый сценарий
Кода -копия выглядит следующим образом:
описать ('myController Function', function () {
описать ('myController', function () {
var $ scope;
offeeach (module ('myApp'));
aitereach (inject (function ($ rootscope, $ controller) {
$ scope = $ rotscope. $ new ();
$ controller ('myController', {$ scope: $ scope});
}));
Это («должно создать модель" специи "с 3 специями ', function () {
Ожидайте ($ scope.spices.length) .tobe (3);
});
это ('должен установить значение по умолчанию Spice', function () {
Ожидайте ($ scope.spice) .tobe («Привет отзыв!»);
});
});
});
Приведенное выше использует $ rootcope для создания подсказопа, а затем передает этот параметр в метод конструкции контроллера $ контроллера. Наконец, приведенный выше метод будет выполнен. Затем мы проверяем, равны ли количество массивов в подсказке и равны ли строковые переменные ожидаемому значению.
Если вы хотите узнать больше о контроллере в NG, вы можете нажать здесь
Единый тест инструкций в NG
Определите простую инструкцию
Кода -копия выглядит следующим образом:
var app = angular.module ('myApp', []);
app.directive ('agreateye', function () {
возвращаться {
ограничить: 'e',
Заменить: правда,
Шаблон: '<h1> без покрытия, потерянный в пламени, 1 раз </h1>'
};
});
Затем мы пишем простой тестовый скрипт
Кода -копия выглядит следующим образом:
Описать ('Unit Testing Great Quotes', function () {
var $ compile;
var $ rootscope;
// Загрузите модуль MYAPP, который содержит директиву
offeeach (module ('myApp'));
// хранить ссылки на $ rootcope и $ compile
// Таким образом, они доступны для всех тестов в этом блоке описать
ofeeach (inject (function (_ $ compile_, _ $ rootscope _) {
// Инжектор разворачивает подчеркивание (_) из имен параметров при сопоставлении
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
}));
Это ('заменяет элемент подходящим содержанием', function () {
// Скомпилируйте кусок HTML, содержащий директиву
var element = $ compile ("<a-gree-eye> </a-gree-eye>") ($ rootcope);
// стреляйте по всем часам, поэтому выражение размера 1 будет оценено
$ rootscope. $ digest ();
// проверяют, что скомпилированный элемент содержит шаблон
Ожидайте (element.html ()). Tocontain («без покрытия, потерянный в пламени, 2 раза»);
});
});
Приведенный выше пример исходит от официального, и вышеупомянутая команда будет использоваться в HTML.
Кода -копия выглядит следующим образом:
<a-gree-eye> </a-gree-eye>
Тестовый скрипт сначала внедряет два сервиса $ compile и $ rootscope, один используется для компиляции HTML, а другая используется для создания объема. Обратите внимание, что _ используется здесь. Когда услуга, введенная в NG, добавляется до и после, она будет обработана NG. Эти две службы хранятся в двух внутренних переменных, так что можно вызвать следующие тестовые примеры.
Метод $ compile передается в исходную инструкцию HTML, а затем возвращаемая функция передается в $ rootcope, что завершает связывание объема и представления. Наконец, позвоните в Rootscope. $ Digest, чтобы запустить все прослушивание, гарантируя, что контент модели в представлении обновляется
Затем получите содержание HTML соответствующего элемента текущей инструкции и сравните его с ожидаемым значением.
Если вы хотите узнать больше об инструкциях в NG, вы можете нажать здесь
Фильтруя единичная тест в NG
Определите простой фильтр
Кода -копия выглядит следующим образом:
var app = angular.module ('myApp', []);
app.filter ('interpolate', ['version', function (версия) {
вернуть функцию (текст) {
return String (Text) .Replace (//%версия/%/мг, версия);
};
}]);
Затем напишите простой тестовый скрипт
Кода -копия выглядит следующим образом:
описать ('filter', function () {
offeeach (module ('myApp'));
описать ('interpolate', function () {
ofeeach (module (function ($ предоставляет) {
$ предоставить. Value ('version', 'test_ver');
}));
это («должен заменить версию», inject (function (interpolatefilter) {
Ожидайте (InterpolateFilter ('до % rersion % после')). toecoal ('до test_ver после');
}));
});
});
Приведенный выше код сначала настраивает модуль фильтра, а затем определяет значение версии. Поскольку интерполяция зависит от этой услуги, наконец, инъекционную интерполяцию фильтра с внедрением. Обратите внимание, что фильтр здесь должен сопровождаться суффиксом фильтра, и, наконец, передать текстовое содержание в функцию фильтра для выполнения, и сравнить его с ожидаемым значением.
Суммировать
Существует много преимуществ для использования тестов для разработки NG, которые могут обеспечить стабильность модуля. Другое дело, что вы можете иметь глубокое понимание внутреннего операционного механизма NG, поэтому рекомендуется, чтобы студенты, которые используют NG для разработки, заполнить тесты как можно скорее!