Единично тестване на AngularJS: Урок за карма жасмин

Съдържание:

Anonim

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

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

  • В AngularJS можем да извършим Unit Testing отделно за контролери и директиви.
  • Също така можем да извършим тестване в края на 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. Параметърът за инсталиране инструктира помощната програма на командния ред npm, че е необходима инсталация.
  3. В командния ред са посочени 3 библиотеки, които са необходими за работа с карма
    • karma е основната библиотека, която ще се използва за целите на тестването.
    • karma-chrome-launcher е отделна библиотека, която позволява командите на karma да бъдат разпознати от браузъра chrome.
    • карма-жасмин - Това инсталира жасмин, който е зависима рамка за Карма.

Стъпка 2) Следващата стъпка е да инсталирате помощната програма на командния ред на karma. Това е необходимо за изпълнение на команди от линията на кармата. Помощната програма за карма линия ще се използва за инициализиране на кармата за тестване.

За да инсталирате помощната програма на командния ред, изпълнете долния ред от командния ред

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 следните неща

  1. „Име на вашето приложение“ - Това ще бъде заменено с името на вашето приложение.
  2. ' Името на вашето приложение' / AngularJS / AngularJS.js ' - Това казва на кармата, че вашето приложение зависи от основните модули в AngularJS
  3. „Име на вашето приложение“ / AngularJS-mocks / AngularJS-mocks.js ' - Това казва на кармата да използва функционалността Unit Testing за AngularJS от файла Angular.JS-mocks.js.
  4. Всички файлове на основното приложение или бизнес логика присъстват в папката lib на вашето приложение.
  5. Папката за тестове ще съдържа всички модулни тестове

За да проверите дали кармата работи, създайте файл, наречен Sample.js, поставете кода по-долу и го поставете в тестовата директория.

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

Горният код има следните аспекти

  1. Функцията за описание се използва за даване на описание на теста. В нашия случай ние даваме описанието „Примерен тест“ на нашия тест.
  2. Функцията 'it' се използва за даване на име на теста. В нашия случай ние даваме името на нашия тест като „Условието е вярно“. Името на теста трябва да има смисъл.
  3. Комбинацията от ключова дума 'очаквам' и 'доБе' посочва каква е очакваната и действителната стойност на резултата от теста. Ако действителната и очакваната стойност са еднакви, тогава тестът ще премине, иначе няма да успее.

Когато изпълните следния ред в командния ред, той ще изпълни горния тестов файл

KARMA start

Изходът по-долу е взет от IDE Webstorm, в който са извършени горните стъпки.

  1. Резултатът идва в Karma Explorer в рамките на Webstorm. Този прозорец показва изпълнението на всички тестове, които са дефинирани в рамката на кармата.
  2. Тук можете да видите, че е показано описанието на изпълнения тест, което е „Примерен тест“.
  3. След това можете да видите, че самият тест, който има име "Условието е вярно", се изпълнява.
  4. Имайте предвид, че тъй като всички тестове имат зелена икона "Ok" до нея, която символизира, че всички тестове са преминали.

Тестване на 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 ще съдържа нашия код за контролера
  • Тестовата папка ще съдържа всички наши тестове AngularJS

По-долу е нашият Angular.JS код, който ще се съхранява като файл Index.js в тестовата папка на нашето приложение.

Кодът по-долу просто прави следните неща

  1. Създайте Angular 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 функция - Тази функция се използва за зареждане на нашия модул AngularJS.JS, наречен 'sampleApp' преди тестовото изпълнение. Имайте предвид, че това е името на модула във файл index.js.

  2. Обектът $ controller се създава като макет на обект за контролера '' Angular JSController '', който е дефиниран в нашия файл index.js. Във всякакъв вид Unit Testing, фиктивният обект представлява фиктивен обект, който всъщност ще се използва за тестване. Този фалшив обект всъщност ще симулира поведението на нашия контролер.

  3. beforeEach (inject (функция (_ $ 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 директиви

Рамката за тестване на карма също има функционалност за тестване на потребителски директиви. Това включва шаблонитеURL, които се използват в рамките на потребителски директиви.

Нека разгледаме пример за това как можем да постигнем това.

В нашия пример първо ще дефинираме персонализирана директива, която прави следните неща

  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. очаквайте (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 directivevar element = $compile("")($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. И накрая, използваме маркера , заедно с двойките ключови стойности (ptutor.Name и ptutor.Description), за да покажем данните от таблицата.


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