Јединствено тестирање АнгуларЈС: Водич за Карму Јасмин

Преглед садржаја:

Anonim

Једна од најсјајнијих карактеристика Ангулар.ЈС је аспект тестирања. Када су програмери у Гоогле-у развили АнгуларЈС, имали су на уму тестирање и уверили се да је читав АнгуларЈС оквир тестиран.

У АнгуларЈС, тестирање се обично врши помоћу Карме (фрамеворк). Ангулар ЈС тестирање се може изводити без Карме, али Карма фрамеворк има тако сјајну функционалност за тестирање АнгуларЈС кода, да има смисла користити овај фрамеворк.

  • У АнгуларЈС, можемо засебно да извршимо тестирање јединица за контролере и директиве.
  • Такође можемо извршити крајње крајње тестирање АнгуларЈС-а, које се тестира из корисничке перспективе.

У овом упутству ћете научити-

  • Увод и инсталација Карма оквира
    • Инсталација Карме
    • Конфигурација оквира Карма
  • Тестирање АнгуларЈС контролера
  • Тестирање АнгуларЈС директива
  • Енд то Енд Тестирање апликација АнгуларЈС ЈС

Увод и инсталација Карма оквира

Карма је алат за аутоматизацију тестирања који је створио Ангулар ЈС тим у Гоогле-у. Први корак за коришћење Карме је инсталирање Карме. Карма се инсталира путем нпм-а (који је менаџер пакета који се користи за једноставну инсталацију модула на локалној машини).

Инсталација Карме

Инсталација Карме путем нпм-а врши се у два корака.

Корак 1) Извршите доњу линију унутар командне линије

npm install karma karma-chrome-launcher karma-jasmine

У чему

  1. нпм је услужни програм командне линије за управитељ пакета чворова који се користи за инсталирање прилагођених модула на било којој машини.
  2. Параметар инсталл упућује нпм услужни програм наредбеног ретка да је потребна инсталација.
  3. У командној линији су наведене 3 библиотеке које су потребне за рад са кармом
    • карма је основна библиотека која ће се користити у сврхе тестирања.
    • карма-цхроме-лаунцхер је одвојена библиотека која омогућава да карма наредбе препознаје цхроме претраживач.
    • карма-јасмин - Инсталира јасмин који је зависни оквир за карму.

Корак 2) Следећи корак је инсталирање услужног програма карма командне линије. Ово је потребно за извршавање наредби карма линије. Услужни програм карма линија користиће се за иницијализацију карма окружења за тестирање.

Да бисте инсталирали услужни програм командне линије, изведите доњу линију унутар командне линије

npm install karma-cli

у чему,

  1. карма-цли се користи за инсталирање интерфејса командне линије за карму који ће се користити за писање карма наредби у интерфејс командне линије.

Конфигурација оквира Карма

Следећи корак је конфигурисање карме што се може учинити помоћу наредбе

"karma -init"

Након извршења горњег корака, карма ће створити карма.цонф.јс датотеку. Датотека ће вероватно изгледати попут исечка приказаног доле

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

Горе наведене конфигурационе датотеке говоре карма рунтиме енгинеу следеће ствари

  1. „Име ваше апликације“ - Ово ће бити замењено именом ваше пријаве.
  2. ' Име ваше апликације' / АнгуларЈС / АнгуларЈС.јс ' - Ово говори карми да ваша апликација зависи од основних модула у АнгуларЈС
  3. 'Име ваше апликације' / АнгуларЈС-моцкс / АнгуларЈС-моцкс.јс ' - Ово говори карми да користи функционалност јединственог тестирања за АнгуларЈС из датотеке Ангулар.ЈС-моцкс.јс.
  4. Све главне датотеке апликације или пословне логике налазе се у фасцикли либ ваше апликације.
  5. Фасцикла тестова ће садржати све јединичне тестове

Да бисте проверили да ли карма ради, креирајте датотеку која се зове Сампле.јс, ставите доњи код и ставите је у директоријум за тестирање.

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

Горњи код има следеће аспекте

  1. Функција опис се користи за опис теста. У нашем случају, нашем тесту дајемо опис „Пример узорка“.
  2. Функција 'ит' се користи за давање назива тесту. У нашем случају назив нашег теста дајемо као „Услов је тачан“. Назив теста треба да има значење.
  3. Комбинација кључне речи 'очекивати' и 'тоБе' наводи колика је очекивана и стварна вредност резултата теста. Ако су стварна и очекивана вредност исте, тада ће тест проћи у супротном неће успети.

Када извршите следећу линију у командној линији, извршиће горњу тест датотеку

KARMA start

Излаз у наставку преузет је из ИДЕ Вебсторм-а у којем су изведени горњи кораци.

  1. Резултат долази у истраживачу Карма у оквиру Вебсторма. Овај прозор приказује извршавање свих тестова који су дефинисани у оквиру карме.
  2. Овде можете видети да је приказан опис извршеног теста који је „Узорак теста“.
  3. Даље можете видети да се извршава сам тест који има назив „Услов је тачан“.
  4. Имајте на уму да пошто сви тестови имају зелену икону „Ок“ која симболизује да су сви тестови положени.

Тестирање АнгуларЈС контролера

Оквир за тестирање карме такође има функционалност за тестирање контролера од краја до краја. То укључује тестирање објекта $ сцопе који се користи у оквиру контролера.

Погледајмо пример како то можемо постићи.

У нашем примеру,

Прво бисмо требали да дефинишемо контролер. Овај контролер би извршио следеће кораке

  1. Направите ИД променљиву и доделите јој вредност 5.
  2. Доделите променљиву ИД објекту $ сцопе.

Наш тест ће тестирати постојање овог контролера и такође тестирати да ли је променљива ИД објекта $ сцопе постављена на 5.

Прво морамо осигурати да је испуњен следећи предуслов

    1. Инсталирајте библиотеку Ангулар.ЈС-моцкс путем нпм. То се може постићи извршавањем доњег реда у командној линији
npm install Angular JS-mocks
  1. Следеће је модификовање карма.цонф.јс датотеке како би се осигурало да су праве датотеке укључене у тест. Доле наведени сегмент само приказује датотеке датотеке карма.цонф.јс које треба изменити 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Параметар „датотеке“ у основи говори Карми све датотеке потребне за извођење тестова.
  • Датотека АнгуларЈС.јс и АнгуларЈС-моцкс.јс су потребне за покретање АнгуларЈС јединичних тестова
  • Датотека индек.јс ће садржати наш код за контролер
  • Фасцикла за тестирање ће садржати све наше АнгуларЈС тестове

Испод је наш Ангулар.ЈС код који ће бити сачуван као датотека Индек.јс у пробној фасцикли наше апликације.

Код у наставку само ради следеће ствари

  1. Направите Ангулар ЈС модул под називом самплеАпп
  2. Направите контролер зван АнгуларЈСЦонтроллер
  3. Направите променљиву која се зове ИД, дајте јој вредност 5 и доделите је објекту $ сцопе
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Једном када се горњи код успешно изврши, следећи корак био би стварање тест случаја како би се осигурало да је код написан и правилно изведен.

Код за наш тест биће приказан доле.

Код ће бити у посебној датотеци названој ЦонтроллерТест.јс, која ће бити смештена у тест мапу. Код у наставку само чини следеће кључне ствари

  1. бефореЕацх функција - Ова функција се користи за учитавање нашег модула АнгуларЈС.ЈС под називом 'самплеАпп' пре пробног рада. Имајте на уму да је ово име модула у датотеци индек.јс.

  2. Објект $ цонтроллер је креиран као модел макете за контролер '' Ангулар ЈСЦонтроллер '' који је дефинисан у нашој датотеци индек.јс. У било којој врсти Јединственог тестирања, лажни објекат представља лажни предмет који ће се заправо користити за тестирање. Овај лажни објекат ће заправо симулирати понашање нашег контролера.

  3. бефореЕацх (ињецт (фунцтион (_ $ цонтроллер_)) - Користи се за убризгавање лажног објекта у наш тест тако да се понаша као стварни контролер.

  4. вар $ сцопе = {}; Ово је лажни објекат који се креира за објект $ сцопе.

  5. вар контролер = $ контролер ('АнгуларЈСЦонтроллер', {$ опсег: $ опсег}); - Овде проверавамо да ли постоји контролер под називом „Ангулар.ЈСЦонтроллер“. Овде такође додељујемо све променљиве из нашег објекта $ сцопе у нашем контролору у датотеци Индек.јс у објект $ ранге у нашој тест датотеци

  6. На крају, упоређујемо $ сцопе.ИД са 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);});});});

Горњи тест ће се покренути у карма претраживачу и дати исти резултат проласка као што је приказано у претходној теми.

Тестирање АнгуларЈС директива

Оквир за тестирање карме такође има функционалност за тестирање прилагођених директива. То укључује темплатеУРЛ-ове који се користе у оквиру прилагођених директива.

Погледајмо пример како то можемо постићи.

У нашем примеру ћемо прво дефинисати прилагођену директиву која ради следеће ствари

  1. Креирајте модул АнгуларЈС који се зове самплеАпп
  2. Направите прилагођену директиву са именом - Гуру99
  3. Направите функцију која враћа шаблон са заглављем који приказује текст „Ово је тестирање АнгуларЈС“.
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Једном када се горњи код успешно изврши, следећи корак био би стварање тест случаја како би се осигурало да је код правилно написан и извршен. Код за наш тест биће приказан доле

Код ће бити у посебној датотеци која се зове ДирецтивеТест.јс и која ће бити смештена у тест мапу. Код у наставку само чини следеће кључне ствари

  1. бефореЕацх функција - Ова функција се користи за учитавање нашег Ангулар ЈС модула под називом 'самплеАпп' пре пробног рада.

  2. За компајлирање директиве користи се услуга $ цомпиле. Ова услуга је обавезна и треба је пријавити како би је Ангулар.ЈС могао користити за компајлирање наше прилагођене директиве.

  3. $ Роотцопе је примарни опсег било које апликације АнгуларЈС.ЈС. Објекат $ ранге контролера видели смо у ранијим поглављима. Па, објект $ сцопе је подређени објект објекта $ роотцопе. Разлог за ово је овде проглашен зато што вршимо промену стварне ХТМЛ ознаке у ДОМ-у помоћу наше прилагођене директиве. Стога морамо да користимо услугу $ роотцопе која заправо преслушава или зна када се догоди нека промена унутар ХТМЛ документа.

  4. вар елемент = $ цомпиле ("<нг-Гуру99> ") - Ово се користи за проверу да ли се наша директива убризгава како треба. Име наше прилагођене директиве је Гуру99, а из поглавља наших прилагођених директива знамо да ће се када се убризга у наш ХТМЛ убризгати као '<нг-Гуру99> '. Отуда се ова изјава користи за ту проверу.

  5. очекивати (елемент.хтмл ()). тоЦонтаин ("Ово је тестирање АнгуларЈС") - Ово се користи за навођење функције очекивања да треба да пронађе елемент (у нашем случају див ознаку) који садржи унутрашњи ХТМЛ текст „Ово је Испитивање АнгуларЈС ".

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");});});

Горњи тест ће се покренути у карма претраживачу и дати исти резултат проласка као што је приказано у претходној теми.

Енд то Енд Тестирање апликација АнгуларЈС ЈС

Оквир за тестирање карме, заједно са оквиром названим Протрацтор, има функционалност тестирања веб апликација од краја до краја.

Дакле, то није само тестирање директива и контролера, већ и тестирање било чега другог што се може појавити на ХТМЛ страници.

Погледајмо пример како то можемо постићи.

У нашем примеру испод, имаћемо апликацију АнгуларЈС која креира табелу података користећи директиву нг-репеат.

  1. Прво креирамо променљиву која се назива „туториал“ и додељујемо јој неколико парова кључ / вредност у једном кораку. Сваки пар кључ / вредност користиће се као подаци приликом приказивања табеле. Затим се променљива водича додељује објекту опсега тако да јој се може приступити из нашег погледа.
  2. За сваки ред података у табели користимо нг-репеат директиву. Ова директива пролази кроз сваки пар кључ / вредност у објекту уџбеничког опсега помоћу променљиве птутор.
  3. На крају, користимо ознаку <тд> заједно са паровима вредности кључева (птутор.Наме и птутор.Десцриптион) за приказ података табеле.


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