Тестване на единици на 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

при което,

  1. npm е помощната програма за командния ред за мениджъра на пакети на възли, използван за инсталиране на персонализирани модули на всяка машина.
  2. Инсталационният параметър указва на помощната програма от командния ред npm, че е необходима инсталация.
  3. Има 3 библиотеки, посочени в командния ред, които са необходими за работа с karma.
    • karma е основната библиотека, която ще се използва за целите на тестването.
    • karma-chrome-launcher е отделна библиотека, която позволява командите на karma да бъдат разпознавани от браузъра chrome.
    • karma-jasmine – Това инсталира jasmine, който е зависима рамка за Karma.

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

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

npm install karma-cli

при което,

  • karma-cli се използва за инсталиране на интерфейса на командния ред за karma, който ще се използва за писане на командите на karma в интерфейса на командния ред.
  • Конфигуриране на рамката 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 следните неща

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

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

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

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

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

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

    KARMA start

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

    Конфигурация на Karma Framework

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

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

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

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

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

    Първо ще трябва да дефинираме контролер. Този контролер ще извърши описаните по-долу стъпки

    1. Създайте ID променлива и й присвоете стойност 5.
    2. Присвоете променливата 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']
    • Параметърът „файлове“ основно казва на Karma всички файлове, които са необходими при изпълнението на тестовете.
    • Файлът AngularJS.js и AngularJS-mocks.js са необходими за изпълнение на модулни тестове на AngularJS
    • Файлът index.js ще съдържа нашия код за контролера
    • Тестовата папка ще съдържа всички наши AngularJS тестове

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

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

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

    След като горният код бъде изпълнен успешно, следващата стъпка ще бъде да се създаде a Тестов случай за да се гарантира, че кодът е написан и изпълнен правилно.

    Кодът за нашия тест ще бъде както е показано по-долу.

    Кодът ще бъде в отделен файл, наречен ControllerTest.js, който ще бъде поставен в тестовата папка. Кодът по-долу прави следните ключови неща

    1. Функция beforeEach – Тази функция се използва за зареждане на нашия модул AngularJS.JS, наречен „sampleApp“, преди тестовото изпълнение. Имайте предвид, че това е името на модула във файл index.js.
    2. Обектът $controller е създаден като модел на обект за контролера „Angular JSController“, който е дефиниран в нашия файл index.js. Във всякакъв вид Unit Testing, макетният обект представлява фиктивен обект, който действително ще бъде използван за тестването. Този макет обект всъщност ще симулира поведението на нашия контролер.
    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);
            });
        });
    });

    Горният тест ще се изпълнява в браузъра karma и ще даде същия резултат за преминаване, както беше показано в предишната тема.

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

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

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

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

    1. Създайте модул AngularJS, наречен sampleApp
    2. Създайте персонализирана директива с името – Guru99
    3. Създайте функция, която връща шаблон със заглавен таг, който показва текста „Това е тестване на AngularJS“.
    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. $rootscope е основният обхват на всяко AngularJS.JS приложение. Видяхме обекта $scope на контролера в по-ранни глави. Е, обектът $scope е дъщерен обект на обекта $rootscope. Причината, поради която това е декларирано тук, е, че правим промяна в действителен HTML таг в DOM чрез нашата персонализирана директива. Следователно трябва да използваме услугата $rootscope, която всъщност слуша или знае кога се случва промяна от HTML документ.
    4. var element = $compile(“ ”) – Това се използва за проверка дали нашата директива се инжектира както трябва. Името на нашата персонализирана директива е Guru99 и знаем от нашата глава за персонализирани директиви, че когато директивата се инжектира в нашия HTML, тя ще бъде инжектирана като ' '. Следователно това твърдение се използва за извършване на тази проверка.
    5. expect(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.

    1. Първо създаваме променлива, наречена „урок“ и й присвояваме няколко двойки ключ-стойност в една стъпка. Всяка двойка ключ-стойност ще се използва като данни при показване на таблицата. След това променливата на урока се присвоява на обекта на обхвата, така че да може да бъде достъпен от нашия изглед.
    2. За всеки ред от данни в таблицата използваме директивата ng-repeat. Тази директива преминава през всяка двойка ключ-стойност в обекта на обхвата на урока, като използва променливата ptutor.
    3. И накрая, ние използваме етикет заедно с двойките ключ стойност (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, който ще бъде поставен в тестовата папка. Кодът по-долу прави следните ключови неща

    1. Функцията на браузъра се предоставя от библиотеката на транспортира и предполага, че нашето AngularJS приложение (с кода, показан по-горе) работи на URL адреса на нашия сайт – http://localhost:8080/Guru99/
    2. var list=element.all(by.repeater(ptutor in tutorial')); -Този ред код всъщност извлича директивата ng-repeat, която се попълва от кода 'ptutor в урока'. Елементът и by.repeater са специални ключови думи, предоставени от библиотеката на транспортира, която ни позволява да получим подробности за директивата 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);  }); });

    Горният тест ще се изпълнява в браузъра karma и ще даде същия резултат за преминаване, както беше показано в предишната тема.

    Oбобщение

    • Тестването в AngularJS се постига чрез използване на рамката karma, рамка, която е разработена от самия Google.
    • Рамката karma се инсталира с помощта на мениджъра на пакети на възли. Ключовите модули, които трябва да бъдат инсталирани за основно тестване, са karma, karma-chrome-launcher, karma-jasmine и karma-cli.
    • Тестовете се записват в отделни js файлове, обикновено съхранявани в тестовата папка на вашето приложение. Местоположението на тези тестови файлове трябва да бъде споменато в специален конфигурационен файл, наречен karma.conf.js. Karma използва този конфигурационен файл, когато изпълнява всички тестове.
    • Karma може да се използва и за тестване на контролери и персонализирани директиви.
    • За цялостно уеб тестване трябва да се инсталира друга рамка, наречена транспортир, чрез Node, мениджър на пакети. Тази рамка предоставя специални методи, които могат да се използват за тестване на всички елементи на HTML страница.