Учебники

22) Тестирование с использованием кармы

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

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

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

В этом уроке вы узнаете

Введение и установка кармы

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

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

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

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

npm install karma karma-chrome-launcher karma-jasmine

В которой

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

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

Для установки утилиты командной строки выполните следующую строку из командной строки

npm install karma-cli

в которой,

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

Конфигурация кармы

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

"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 Runtime следующие вещи

  1. «Имя вашего приложения» — оно будет заменено названием вашего приложения.
  2. « Имя вашего приложения» / AngularJS / AngularJS.js » — сообщает карме, что ваше приложение зависит от основных модулей в AngularJS
  3. ‘Имя вашего приложения’ / AngularJS-mocks / AngularJS-mocks.js ‘ — Это говорит карме использовать функциональность модульного тестирования для AngularJS из файла Angular.JS-mocks.js.
  4. Все основные файлы приложения или бизнес-логики находятся в папке lib вашего приложения.
  5. Папка tests будет содержать все юнит-тесты

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

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

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

  1. Функция description используется для описания теста. В нашем случае мы даем описание «Образец теста» нашему тесту.
  2. Функция ‘it’ используется для присвоения имени тесту. В нашем случае мы даем название нашего теста как «Условие истинно». Название теста должно быть значимым.
  3. Комбинация состояний ключевого слова «ожидается» и «toBe» определяет ожидаемое и фактическое значение результата теста. Если фактическое и ожидаемое значение совпадают, то тест пройдет, иначе он не пройдёт.

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

KARMA start

Приведенный ниже вывод взят из среды IDE Webstorm, в которой были выполнены вышеуказанные шаги.

AngularJS Тестирование с использованием Karma: единичное и сквозное тестирование

  1. Выходные данные поступают в Исследователь Кармы в Webstorm. Это окно показывает выполнение всех тестов, которые определены в карма каркасе.
  2. Здесь вы можете увидеть, что описание выполненного теста отображается как «Пример теста».
  3. Далее вы можете увидеть, что сам тест с именем «Condition is true» выполняется.
  4. Обратите внимание, что, поскольку все тесты имеют зеленый значок «ОК» рядом с ним, который символизирует, что все тесты пройдены.

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

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

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

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

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

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

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

Во-первых, мы должны убедиться в наличии следующего предварительного условия

    1. Установите библиотеку Angular.JS-mocks через npm. Это можно сделать, выполнив следующую строку в командной строке
npm install Angular JS-mocks
  1. Далее необходимо изменить файл 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 в тестовой папке нашего приложения.

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

  1. Создайте угловой модуль JS с именем sampleApp.
  2. Создайте контроллер под названием AngularJSController
  3. Создайте переменную с именем ID, присвойте ей значение 5 и присвойте ее объекту $ scope
var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

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

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

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

  1. beforeEach function — эта функция используется для загрузки нашего модуля AngularJS.JS, называемого sampleApp, перед запуском теста. Обратите внимание, что это имя модуля в файле index.js.

  2. Объект $ controller создается как объект макета для контроллера Angular JSController, который определен в нашем файле index.js. В любом виде модульного тестирования фиктивный объект представляет собой фиктивный объект, который фактически будет использоваться для тестирования. Этот фиктивный объект будет фактически имитировать поведение нашего контроллера.

  3. beforeEach (inject (function (_ $ controller_)) — используется для вставки фиктивного объекта в нашем тесте, чтобы он действовал как настоящий контроллер.

  4. var $ scope = {}; Это фиктивный объект, создаваемый для объекта $ scope.

  5. var controller = $ controller (‘AngularJSController’, {$ scope: $ scope}); — Здесь мы проверяем наличие контроллера под названием «Angular.JSController». Здесь мы также назначаем все переменные из нашего объекта $ scope в нашем контроллере в файле Index.js объекту $ scope в нашем тестовом файле

  6. Наконец, мы сравниваем $ 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);
        });
    });
});

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

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

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

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

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

  1. Создайте модуль AngularJS с именем sampleApp
  2. Создайте пользовательскую директиву с именем — Guru99
  3. Создайте функцию, которая возвращает шаблон с тегом заголовка, который отображает текст «Это AngularJS Testing».
var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

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

 

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

  1. Функция beforeEach — эта функция используется для загрузки нашего модуля Angular JS, называемого sampleApp, перед запуском теста.

  2. Служба $ compile используется для компиляции директивы. Этот сервис является обязательным и должен быть объявлен, чтобы Angular.JS мог использовать его для компиляции нашей пользовательской директивы.

  3. $ Rootcope является основной областью применения любого приложения AngularJS.JS. Мы видели объект $ scope контроллера в предыдущих главах. Хорошо, объект $ scope является дочерним объектом объекта $ rootscope. Причина, по которой это объявлено здесь, заключается в том, что мы вносим изменения в фактический тег HTML в DOM через нашу пользовательскую директиву. Следовательно, нам нужно использовать сервис $ rootscope, который на самом деле прослушивает или знает, когда происходит какое-либо изменение внутри HTML-документа.

  4. var element = $ compile («<ng-Guru99> </ ng-Guru99>») — используется для проверки того, вводится ли наша директива как следует. Название нашей пользовательской директивы — Guru99, и мы знаем из нашей главы о пользовательских директивах, что когда директива внедряется в наш HTML, она будет внедрена как ‘<ng-Guru99> </ ng-Guru99>’. Следовательно, это утверждение используется для этой проверки.

  5. wait (element.html ()). toContain («Это AngularJS Testing») — используется для указания ожидаемой функции, что она должна найти элемент (в нашем случае тег div), содержащий текст innerHTML «This is 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");
  });
});

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

Сквозное тестирование приложений AngularJS JS

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

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

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

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

  1. Сначала мы создаем переменную с именем «tutorial» и присваиваем ей несколько пар ключ-значение за один шаг. Каждая пара ключ-значение будет использоваться в качестве данных при отображении таблицы. Затем переменная учебника присваивается объекту области видимости, чтобы к нему можно было получить доступ из нашего представления.
  2. Для каждой строки данных в таблице мы используем директиву ng-repeat. Эта директива проходит через каждую пару ключ-значение в объекте области обучения с помощью переменной ptutor.
  3. Наконец, мы используем тег <td> вместе с парами ключ-значение (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 строки данных, как следует из приведенного выше примера.

Во-первых, мы должны убедиться в наличии следующего предварительного условия

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

    "npm install protractor"

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

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

  1. Функция браузера предоставляется библиотекой protractor и предполагает, что наше приложение AngularJS (с кодом, показанным выше) работает на URL нашего сайта — http: // localhost: 8080 / Guru99 /

  2. var list = element.all (by.repeater (ptutor в tutorial ‘));

    Эта строка кода фактически извлекает директиву ng-repeat, которая заполняется кодом «ptutor in tutorial». Элемент и by.repeater являются специальными ключевыми словами, предоставляемыми библиотекой protractor, которая позволяет нам получить подробную информацию о директиве ng-repeat.

  3. ожидать (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);  }); });

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

Резюме

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