Модульное тестирование AngularJS: руководство Karma Jasmine

Одной из самых замечательных особенностей Angular.JS является Тестирование аспект. Когда разработчики Google разрабатывали AngularJS, они помнили о тестировании и следили за тем, чтобы вся среда AngularJS была тестируемой.

В AngularJS тестирование обычно проводится с использованием Karma (фреймворка). Тестирование Angular JS можно проводить и без Karma, но фреймворк Karma обладает настолько блестящей функциональностью для тестирования кода AngularJS, что имеет смысл использовать именно этот фреймворк.

В AngularJS мы можем выполнять Модульное тестирование отдельно для контроллеров и директив.
Мы также можем провести комплексное тестирование AngularJS, которое проверяется с точки зрения пользователя.

Введение и установка платформы Karma

Карма – это инструмент автоматизации тестирования создан командой Angular JS в Google. Первым шагом для использования Karma является установка Karma. Karma устанавливается через npm (менеджер пакетов, используемый для простой установки модулей на локальный компьютер).

Установка Кармы

Установка Karma через npm выполняется в два этапа.

Шаг 1) Выполните приведенную ниже строку из командной строки

npm install karma karma-chrome-launcher karma-jasmine

В которой,

npm — это утилита командной строки для менеджера пакетов узлов, используемая для установки пользовательских модулей на любой компьютер.
Параметр install указывает утилите командной строки npm, что требуется установка.
В командной строке указываются 3 библиотеки, необходимые для работы с кармой.

karma — это основная библиотека, которая будет использоваться в целях тестирования.
karma-chrome-launcher — это отдельная библиотека, которая позволяет распознавать команды karma браузером Chrome.
karma-jasmine – устанавливает жасмин, который является зависимой структурой для Кармы.

Шаг 2) Следующим шагом будет установка утилиты командной строки karma. Это необходимо для выполнения команд линии кармы. Утилита karma line будет использоваться для инициализации среды karma для тестирования.

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

npm install karma-cli

в которой,

karma-cli используется для установки интерфейса командной строки для karma, который будет использоваться для записи команд karma в интерфейсе командной строки.

Настройка структуры Кармы

Следующим шагом будет настройка кармы, которую можно сделать с помощью команды

"karma –init"

После выполнения вышеуказанного шага karma создаст файл karma.conf.js. Вероятно, файл будет выглядеть так, как показано ниже.

files: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

Приведенные выше файлы конфигурации сообщают механизму выполнения karma следующие вещи:

«Название вашего приложения» – Это будет заменено именем вашего приложения.
"Имя вашего приложения'/AngularJS/AngularJS.js' – Это говорит карме, что ваше приложение зависит от основных модулей AngularJS.
«Имя вашего приложения»/AngularJS-mocks/AngularJS-mocks.js» – Это указывает karma использовать функцию модульного тестирования для AngularJS из файла Angular.JS-mocks.js.
Все основные файлы приложения или бизнес-логики находятся в папке lib вашего приложения.
Папка тестов будет содержать все модульные тесты.

Чтобы проверить, работает ли karma, создайте файл с именем Sample.js, вставьте приведенный ниже код и поместите его в тестовый каталог.

describe('Sample test', function() {
  it('Condition is true', function() {
    expect('AngularJS').toBe('AngularJS');
  });
});

Приведенный выше код имеет следующие аспекты

Функция описания используется для описания теста. В нашем случае мы даем нашему тесту описание «Пример теста».
Функция «it» используется для присвоения имени тесту. В нашем случае мы даем название нашему тесту как «Условие истинно». Название теста должно быть осмысленным.
Комбинация ключевых слов «expect» и «toBe» определяет ожидаемое и фактическое значение результата теста. Если фактическое и ожидаемое значения совпадают, тест будет пройден, в противном случае — провален.

Когда вы выполните следующую строку в командной строке, она выполнит указанный выше тестовый файл.

KARMA start

Вывод ниже взят из IDE. Webstorm где были выполнены вышеописанные действия.

Результат поступает в Karma explorer в течение Webstorm. В этом окне показано выполнение всех тестов, определенных в структуре karma.
Здесь вы можете видеть, что показано описание выполненного теста, который называется «Пример теста».
Далее вы можете видеть, что выполняется сам тест с именем «Условие истинно».
Обратите внимание, что рядом со всеми тестами имеется зеленый значок «ОК», который символизирует, что все тесты пройдены.

Тестирование контроллеров AngularJS

Платформа тестирования кармы также имеет функцию сквозного тестирования контроллеров. Это включает в себя тестирование объекта $scope, который используется в контроллерах.

Давайте посмотрим на примере, как мы можем этого добиться.

В нашем примере

Сначала нам нужно определить контроллер. Этот контроллер выполнит нижеуказанные шаги.

Создайте переменную ID и присвойте ей значение 5.
Присвойте переменную ID объекту $scope.

Наш тест проверит существование этого контроллера, а также проверит, установлено ли для переменной ID объекта $scope значение 5.

Сначала нам необходимо убедиться в наличии следующих предварительных условий.

Установите библиотеку Angular.JS-mocks через npm. Это можно сделать, выполнив следующую строку в командной строке:

npm install Angular JS-mocks

Далее необходимо изменить файл karma.conf.js, чтобы обеспечить включение в тест нужных файлов. В приведенном ниже сегменте показана файловая часть karma.conf.js, которую необходимо изменить.

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

Параметр «files» в основном сообщает Karma все файлы, необходимые для выполнения тестов.
Файлы AngularJS.js и AngularJS-mocks.js необходимы для запуска модульных тестов AngularJS.
Файл index.js будет содержать наш код для контроллера.
Папка test будет содержать все наши тесты AngularJS.

Ниже приведен наш код Angular.JS, который будет храниться в виде файла Index.js в тестовой папке нашего приложения.

Приведенный ниже код просто делает следующие вещи

Создать Модуль AngularJS называется sampleApp
Создайте контроллер под названием AngularJSController.
Создайте переменную с именем ID, присвойте ей значение 5 и присвойте ее объекту $scope.

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

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

Код для нашего теста будет таким, как показано ниже.

Код будет находиться в отдельном файле ControllerTest.js, который будет помещен в папку тестов. Приведенный ниже код выполняет следующие ключевые действия:

Функция beforeEach — эта функция используется для загрузки нашего модуля AngularJS.JS под названием «sampleApp» перед запуском теста. Обратите внимание, что это имя модуля в файле index.js.
Объект $controller создается как объект-макет для контроллера Angular JSController, который определен в нашем файле index.js. В любом виде модульного тестирования макет объекта представляет собой фиктивный объект, который фактически будет использоваться для тестирования. Этот макетный объект фактически будет имитировать поведение нашего контроллера.
beforeEach(inject(function(_$controller_)) – используется для внедрения фиктивного объекта в наш тест, чтобы он вел себя как настоящий контроллер.
вар $область = {}; Это макет объекта, создаваемый для объекта $scope.
var контроллер = $controller('AngularJSController', {$scope: $scope }); – Здесь мы проверяем наличие контроллера с именем Angular.JSController. Здесь мы также назначаем все переменные из нашего объекта $scope в нашем контроллере в файле Index.js объекту $scope в нашем тестовом файле.
Наконец, мы сравниваем $scope.ID с 5.

describe('AngularJSController', function() {
    beforeEach(module('sampleApp'));

    var $controller;

    beforeEach(inject(function(_$controller_){
              $controller = _$controller_;
    }));

    describe('$scope.ID', function() {
        it('Check the scope object', function() {
            var $scope = {};
            var controller = $controller('AngularJSController', { $scope: $scope });
            expect($scope.ID).toEqual(5);
        });
    });
});

Приведенный выше тест будет запущен в браузере karma и даст тот же результат, что и в предыдущем разделе.

Тестирование директив AngularJS

Платформа тестирования кармы также имеет функцию тестирования пользовательских директив. Сюда входят URL-адреса шаблонов, которые используются в пользовательских директивах.

Давайте посмотрим на примере, как мы можем этого добиться.

В нашем примере мы сначала определим пользовательскую директиву, которая выполняет следующие действия:

Создайте модуль AngularJS под названием sampleApp.
Создайте пользовательскую директиву с именем — Guru99.
Создайте функцию, которая возвращает шаблон с тегом заголовка, который отображает текст «Это тестирование AngularJS».

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

После успешного выполнения приведенного выше кода следующим шагом будет создание тестового примера, чтобы убедиться, что код написан и выполнен правильно. Код для нашего теста будет таким, как показано ниже.

Код будет находиться в отдельном файле DirectiveTest.js, который будет помещен в тестовую папку. Приведенный ниже код выполняет следующие ключевые действия:

Функция beforeEach — эта функция используется для загрузки нашего модуля Angular JS под названием «sampleApp» перед запуском теста.
Служба $compile используется для компиляции директивы. Эта служба является обязательной и должна быть объявлена, чтобы Angular.JS мог использовать ее для компиляции нашей пользовательской директивы.
$rootscope — это основная область действия любого приложения AngularJS.JS. Мы видели объект $scope контроллера в предыдущих главах. Итак, объект $scope является дочерним объектом объекта $rootscope. Причина, по которой это объявлено здесь, заключается в том, что мы вносим изменения в реальный тег HTML в DOM с помощью нашей пользовательской директивы. Следовательно, нам нужно использовать службу $rootscope, которая фактически прослушивает или знает, когда происходят какие-либо изменения внутри HTML-документа.
var element = $compile(" ») — используется для проверки того, вводится ли наша директива должным образом. Имя нашей пользовательской директивы — Guru99, и из главы о пользовательских директивах мы знаем, что когда директива вводится в наш HTML, она будет вставлена как « '. Следовательно, это утверждение используется для проверки.
ожидаем(element.html()).toContain("Это тестирование AngularJS") – используется для указания функции ожидания, что она должна найти элемент (в нашем случае тег div), содержащий внутренний HTML-текст «Это AngularJS-тестирование».

describe('Unit testing directives', function() {
  var $compile,
      $rootScope;
   beforeEach(module('sampleApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
 }));

 it('Check the directive', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Приведенный выше тест будет запущен в браузере karma и даст тот же результат, что и в предыдущем разделе.

Комплексное тестирование AngularJS JS-приложений

Платформа тестирования кармы вместе с платформой под названием Protractor обладает функциональностью сквозного тестирования веб-приложения.

Так что это не только тестирование директив и контроллеров, но и тестирование всего остального, что может появиться на HTML-странице.

Давайте посмотрим на примере, как мы можем этого добиться.

В нашем примере ниже у нас будет приложение AngularJS, которое создает таблицу данных с помощью директивы ng-repeat.

Сначала мы создаем переменную под названием «tutorial» и присваиваем ей несколько пар ключ-значение за один шаг. Каждая пара ключ-значение будет использоваться в качестве данных при отображении таблицы. Затем учебная переменная назначается объекту области, чтобы к ней можно было получить доступ с нашего поля зрения.
Для каждой строки данных в таблице мы используем директиву ng-repeat. Эта директива проходит через каждую пару ключ-значение в объекте области обучения, используя переменную ptutor.
Наконец, мы используем вместе с парами ключ-значение (ptutor.Name и ptutor.Description) для отображения данных таблицы.

<table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

Наш тест на самом деле будет проверять директиву ng-repeat и гарантировать, что она содержит 3 строки данных, как и должно быть в приведенном выше примере.

Сначала нам необходимо убедиться в наличии следующих предварительных условий.

Установите библиотеку транспортира через npm. Это можно сделать, выполнив следующую строку в командной строке:

"npm install protractor"

Код для нашего теста будет таким, как показано ниже.

Код будет находиться в отдельном файле CompleteTest.js, который будет помещен в папку тестов. Приведенный ниже код выполняет следующие ключевые действия:

Функция браузера предоставляется библиотекой транспортира и предполагает, что наше приложение AngularJS (с кодом, показанным выше) работает по URL-адресу нашего сайта — http://localhost:8080/Guru99/.
var list=element.all(by.repeater(ptutor в учебнике')); -Эта строка кода фактически извлекает директиву ng-repeat, которая заполняется кодом «ptutor в учебнике». Элемент и by.repeater — это специальные ключевые слова, предоставляемые библиотекой транспортира, которые позволяют нам получить подробную информацию о директиве ng-repeat.
ожидать(list.count()).toEqual(3); – Наконец, мы используем функцию ожидания, чтобы увидеть, что мы действительно получаем 3 элемента, заполняемые в нашей таблице в результате директивы ng-repeat.

Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

Приведенный выше тест будет запущен в браузере karma и даст тот же результат, что и в предыдущем разделе.

Итого

Тестирование в AngularJS осуществляется с использованием фреймворка karma, разработанного самой Google.
Платформа karma устанавливается с помощью менеджера пакетов узла. Ключевые модули, которые необходимо установить для базового тестирования, — это karma, karma-chrome-launcher, karma-jasmine и karma-cli.
Тесты записываются в отдельные js-файлы, которые обычно хранятся в папке тестов вашего приложения. Местоположение этих тестовых файлов должно быть указано в специальном файле конфигурации karma.conf.js. Karma использует этот файл конфигурации при выполнении всех тестов.
Karma также можно использовать для тестирования контроллеров и пользовательских директив.
Для комплексного веб-тестирования необходимо установить еще одну платформу, называемую protractor, через менеджер пакетов Node. Эта платформа предоставляет специальные методы, которые можно использовать для тестирования всех элементов на HTML-странице.

Вы могли бы:

Введение и установка платформы Karma

Установка Кармы

Настройка структуры Кармы

СТАТЬИ ПО ТЕМЕ

Тестирование контроллеров AngularJS

Тестирование директив AngularJS

Комплексное тестирование AngularJS JS-приложений

Итого