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

Содержание:

Anonim

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

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

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

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

  • Внедрение и установка фреймворка Karma
    • Установка Кармы
    • Конфигурация каркаса кармы
  • Тестирование контроллеров AngularJS
  • Тестирование директив AngularJS
  • Сквозное тестирование приложений AngularJS JS

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

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

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

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

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

npm install karma karma-chrome-launcher karma-jasmine

В которой

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

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

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

npm install karma-cli

в которой,

  1. 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']

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

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

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

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

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

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

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

KARMA start

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

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

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

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

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

  1. Функция beforeEach - эта функция используется для загрузки нашего модуля 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».
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

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

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

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

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

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

  4. var element = $ compile (" ") - используется для проверки того, вводится ли наша директива должным образом. Имя нашей настраиваемой директивы - Guru99, и из нашей главы о настраиваемых директивах мы знаем, что, когда директива вводится в наш HTML, она будет вставлена ​​как ' '. Следовательно, этот оператор используется для проверки.

  5. expect (element.html ()). toContain («Это тестирование AngularJS») - используется для указания функции ожидания, что она должна найти элемент (в нашем случае тег div), содержащий текст innerHTML «Это AngularJS Testing ».

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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

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

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

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

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

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

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

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


{{ ptutor.Name }}{{ ptutor.Description }}