Testowanie jednostkowe AngularJS: samouczek Karma Jasmine

Jedną z najbardziej genialnych funkcji Angular.JS jest Testy aspekt. Kiedy programiści w Google opracowywali AngularJS, pamiętali o testowaniu i upewniali się, że cały framework AngularJS nadawał się do testowania.

W AngularJS testowanie jest zwykle przeprowadzane przy użyciu Karmy (framework). Testowanie Angular JS można przeprowadzić bez Karmy, ale framework Karma ma tak świetną funkcjonalność do testowania kodu AngularJS, że sensowne jest użycie tego frameworka.

W AngularJS możemy wykonać Testów jednostkowych oddzielnie dla kontrolerów i dyrektyw.
Możemy również przeprowadzić końcowe testy AngularJS, czyli testowanie z perspektywy użytkownika.

Wprowadzenie i instalacja frameworku Karma

Karma jest narzędzie do automatyzacji testów stworzony przez zespół Angular JS w Google. Pierwszym krokiem do korzystania z Karmy jest jej zainstalowanie. Karmę instaluje się poprzez npm (który jest menedżerem pakietów służącym do łatwej instalacji modułów na komputerze lokalnym).

Instalacja Karmy

Instalacja Karmy poprzez npm odbywa się w procesie dwuetapowym.

Krok 1) Wykonaj poniższą linię z poziomu wiersza poleceń

npm install karma karma-chrome-launcher karma-jasmine

W którym,

npm to narzędzie wiersza poleceń dla menedżera pakietów węzłów, używane do instalowania niestandardowych modułów na dowolnym komputerze.
Parametr install informuje narzędzie wiersza poleceń npm, że wymagana jest instalacja.
W wierszu poleceń określone są 3 biblioteki wymagane do pracy z karmą.

karma jest podstawową biblioteką, która będzie używana do celów testowych.
karma-chrome-launcher to osobna biblioteka, która umożliwia rozpoznawanie poleceń karmy przez przeglądarkę Chrome.
karma-jasmine – instaluje jaśmin, który jest zależnym frameworkiem dla Karmy.

Krok 2) Następnym krokiem jest instalacja narzędzia wiersza poleceń karma. Jest to wymagane do wykonywania poleceń linii karmy. Narzędzie karma line zostanie użyte do zainicjowania środowiska karmy do testów.

Aby zainstalować narzędzie wiersza poleceń, wykonaj poniższy wiersz z poziomu wiersza poleceń

npm install karma-cli

w której,

karma-cli służy do instalowania interfejsu wiersza poleceń dla karmy, który będzie używany do zapisywania poleceń karmy w interfejsie wiersza poleceń.

Konfiguracja frameworku Karma

Następnym krokiem jest skonfigurowanie karmy, czego można dokonać za pomocą polecenia

"karma –init"

Po wykonaniu powyższego kroku karma utworzy plik karma.conf.js. Plik prawdopodobnie będzie wyglądał jak fragment pokazany poniżej

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

Powyższe pliki konfiguracyjne przekazują silnikowi wykonawczemu Karma następujące informacje

„Nazwa Twojej aplikacji” – Zostanie ono zastąpione nazwą Twojej aplikacji.
"Nazwa Twojej aplikacji'/AngularJS/AngularJS.js' – To mówi karmie, że Twoja aplikacja zależy od podstawowych modułów AngularJS
„Nazwa Twojej aplikacji”/AngularJS-mocks/AngularJS-mocks.js” – To mówi karmie, aby użyła funkcjonalności testów jednostkowych dla AngularJS z pliku Angular.JS-mocks.js.
Wszystkie główne pliki aplikacji lub logiki biznesowej znajdują się w folderze lib Twojej aplikacji.
Folder testów będzie zawierał wszystkie testy jednostkowe.

Aby sprawdzić czy karma działa utwórz plik o nazwie Sample.js, umieść w nim poniższy kod i umieść go w katalogu test.

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

Powyższy kod ma następujące aspekty

Funkcja opisu służy do opisywania testu. W naszym przypadku do naszego testu nadajemy opis „Test próbny”.
Funkcja „it” służy do nadania nazwy testowi. W naszym przypadku podajemy nazwę naszego testu jako „Warunek jest prawdziwy”. Nazwa testu musi być zrozumiała.
Kombinacja słów kluczowych „oczekiwać” i „być” określa, jaka jest oczekiwana i rzeczywista wartość wyniku testu. Jeśli wartość rzeczywista i oczekiwana są takie same, test zakończy się pomyślnie, w przeciwnym razie zakończy się niepowodzeniem.

Po wykonaniu poniższego wiersza poleceń zostanie wykonany powyższy plik testowy

KARMA start

Poniższe dane wyjściowe pochodzą z IDE Webstorm w którym wykonano powyższe czynności.

Dane wyjściowe znajdują się w eksploratorze Karmy Webstorm. To okno pokazuje wykonanie wszystkich testów zdefiniowanych w ramach karmy.
Tutaj możesz zobaczyć, że pokazany jest opis wykonanego testu, który jest „Testem próbki”.
Następnie widać, że wykonywany jest sam test o nazwie „Warunek jest prawdziwy”.
Należy pamiętać, że obok wszystkich testów znajduje się zielona ikona „OK”, która symbolizuje pomyślne zakończenie wszystkich testów.

Testowanie kontrolerów AngularJS

Struktura testowania karmy ma również funkcję kompleksowego testowania kontrolerów. Obejmuje to testowanie obiektu $scope używanego w kontrolerach.

Spójrzmy na przykład, jak możemy to osiągnąć.

W naszym przykładzie

Najpierw musielibyśmy zdefiniować kontroler. Ten kontroler wykona poniższe kroki

Utwórz zmienną ID i przypisz jej wartość 5.
Przypisz zmienną ID do obiektu $scope.

Nasz test sprawdzi istnienie tego kontrolera, a także sprawdzi, czy zmienna ID obiektu $scope jest ustawiona na 5.

Najpierw musimy się upewnić, że spełnione są następujące warunki wstępne

Zainstaluj bibliotekę Angular.JS-mocks poprzez npm. Można to zrobić, wykonując poniższy wiersz w wierszu poleceń

npm install Angular JS-mocks

Następnie należy zmodyfikować plik karma.conf.js, aby upewnić się, że do testu zostaną dołączone odpowiednie pliki. Poniższy segment pokazuje tylko część plików karma.conf.js, która wymaga modyfikacji

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

Parametr „pliki” w zasadzie informuje Karmę o wszystkich plikach wymaganych do przeprowadzenia testów.
Do uruchomienia testów jednostkowych AngularJS wymagane są pliki AngularJS.js i AngularJS-mocks.js
Plik Index.js będzie zawierał nasz kod dla kontrolera
Folder test będzie zawierał wszystkie nasze testy AngularJS

Poniżej znajduje się nasz kod Angular.JS, który zostanie zapisany jako plik Index.js w folderze testowym naszej aplikacji.

Poniższy kod wykonuje następujące czynności

Tworzenie Moduł AngularJS o nazwie przykładowa aplikacja
Utwórz kontroler o nazwie AngularJSController
Utwórz zmienną o nazwie ID, nadaj jej wartość 5 i przypisz ją do obiektu $scope

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

Po pomyślnym wykonaniu powyższego kodu następnym krokiem będzie utworzenie pliku Przypadek testowy aby upewnić się, że kod został napisany i wykonany poprawnie.

Kod naszego testu będzie taki, jak pokazano poniżej.

Kod będzie w osobnym pliku o nazwie ControllerTest.js, który zostanie umieszczony w folderze test. Poniższy kod wykonuje następujące kluczowe czynności

beforeEach funkcja – Ta funkcja służy do załadowania naszego modułu AngularJS.JS o nazwie „sampleApp” przed uruchomieniem testowym. Zauważ, że jest to nazwa modułu w pliku Index.js.
Obiekt $controller tworzony jest jako obiekt makiety dla kontrolera „Angular JSController”, który jest zdefiniowany w naszym pliku Index.js. W każdym rodzaju testów jednostkowych obiekt próbny reprezentuje obiekt fikcyjny, który faktycznie będzie używany do testowania. Ten próbny obiekt będzie w rzeczywistości symulował zachowanie naszego kontrolera.
beforeEach(inject(function(_$controller_)) – Służy do wstrzyknięcia próbnego obiektu w naszym teście, tak aby zachowywał się jak rzeczywisty kontroler.
var $zakres = {}; To jest obiekt próbny tworzony dla obiektu $scope.
var kontroler = $kontroler('AngularJSController', { $zakres: $zakres }); – Tutaj sprawdzamy istnienie kontrolera o nazwie „Angular.JSController”. Tutaj przypisujemy również wszystkie zmienne z naszego obiektu $scope w naszym kontrolerze w pliku Index.js do obiektu $scope w naszym pliku testowym
Na koniec porównujemy $scope.ID z 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);
        });
    });
});

Powyższy test zostanie uruchomiony w przeglądarce karmy i da taki sam wynik pozytywny, jak pokazano w poprzednim temacie.

Testowanie dyrektyw AngularJS

Struktura testowania karmy ma również funkcję testowania niestandardowych dyrektyw. Obejmuje to szablony URL używane w dyrektywach niestandardowych.

Spójrzmy na przykład, jak możemy to osiągnąć.

W naszym przykładzie najpierw zdefiniujemy niestandardową dyrektywę, która wykonuje następujące czynności

Utwórz moduł AngularJS o nazwie sampleApp
Utwórz niestandardową dyrektywę o nazwie – Guru99
Utwórz funkcję zwracającą szablon ze znacznikiem nagłówka wyświetlającym tekst „To jest testowanie AngularJS”.

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

Po pomyślnym wykonaniu powyższego kodu następnym krokiem będzie utworzenie przypadku testowego, aby upewnić się, że kod został napisany i wykonany poprawnie. Kod naszego testu będzie taki, jak pokazano poniżej

Kod będzie w osobnym pliku o nazwie DirectiveTest.js, który zostanie umieszczony w folderze test. Poniższy kod wykonuje następujące kluczowe czynności

beforeEach funkcja – Ta funkcja służy do załadowania naszego modułu Angular JS o nazwie „sampleApp” przed uruchomieniem testowym.
Do kompilacji dyrektywy używana jest usługa $compile. Ta usługa jest obowiązkowa i musi zostać zadeklarowana, aby Angular.JS mógł jej użyć do skompilowania naszej niestandardowej dyrektywy.
$rootscope to podstawowy zakres dowolnej aplikacji AngularJS.JS. Obiekt $scope kontrolera widzieliśmy już we wcześniejszych rozdziałach. Cóż, obiekt $scope jest obiektem podrzędnym obiektu $rootscope. Powodem tej deklaracji jest to, że wprowadzamy zmianę w rzeczywistym tagu HTML w DOM za pomocą naszej niestandardowej dyrektywy. Dlatego musimy skorzystać z usługi $rootscope, która faktycznie nasłuchuje i wie, kiedy nastąpi jakakolwiek zmiana z poziomu dokumentu HTML.
element var = $kompiluj(“ ”) – Służy do sprawdzania, czy nasza dyrektywa została wstrzyknięta tak, jak powinna. Nazwa naszej niestandardowej dyrektywy to Guru99 i wiemy z naszego rozdziału o niestandardowych dyrektywach, że kiedy dyrektywa zostanie wstrzyknięta do naszego kodu HTML, zostanie wstrzyknięta jako „ '. Dlatego ta instrukcja jest używana do sprawdzenia.
oczekiwanie(element.html()).toContain(“To jest test AngularJS”) – służy do poinstruowania funkcji oczekiwania, że powinna znaleźć element (w naszym przypadku znacznik div), który będzie zawierał tekst w formacie internalHTML „This is Testowanie 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");
  });
});

Powyższy test zostanie uruchomiony w przeglądarce karmy i da taki sam wynik pozytywny, jak pokazano w poprzednim temacie.

Kompleksowe testowanie aplikacji AngularJS JS

Framework do testowania karmy wraz ze frameworkiem o nazwie Protractor ma funkcjonalność kompleksowego testowania aplikacji internetowej.

Zatem nie jest to tylko testowanie dyrektyw i kontrolerów, ale także testowanie czegokolwiek innego, co może pojawić się na stronie HTML.

Spójrzmy na przykład, jak możemy to osiągnąć.

W naszym przykładzie poniżej będziemy mieć aplikację AngularJS, która tworzy tabelę danych za pomocą dyrektywy ng-repeat.

Najpierw tworzymy zmienną o nazwie „samouczek” i przypisujemy jej kilka par klucz-wartość w jednym kroku. Każda para klucz-wartość będzie używana jako dane podczas wyświetlania tabeli. Zmienna samouczka jest następnie przypisywana do obiektu zakresu, tak aby można było uzyskać do niej dostęp z naszego widoku.
Dla każdego wiersza danych w tabeli używamy dyrektywy ng-repeat. Ta dyrektywa przechodzi przez każdą parę klucz-wartość w obiekcie zakresu tutoriala przy użyciu zmiennej ptutor.
Na koniec używamy tag wraz z parami klucz-wartość (ptutor.Name i ptutor.Description), aby wyświetlić dane tabeli.

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

Nasz test tak naprawdę przetestuje dyrektywę ng-repeat i upewni się, że zawiera ona 3 wiersze danych, tak jak powinno to wynikać z powyższego przykładu.

Najpierw musimy się upewnić, że spełnione są następujące warunki wstępne

Zainstaluj bibliotekę kątomierza za pośrednictwem npm. Można to zrobić, wykonując poniższy wiersz w wierszu poleceń

"npm install protractor"

Kod naszego testu będzie taki, jak pokazano poniżej.

Kod będzie w osobnym pliku o nazwie CompleteTest.js, który zostanie umieszczony w folderze test. Poniższy kod wykonuje następujące kluczowe rzeczy

Funkcję przeglądarki zapewnia biblioteka kątomierza i zakłada, że nasza aplikacja AngularJS (z kodem pokazanym powyżej) działa na adresie URL naszej witryny – http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -Ta linia kodu faktycznie pobiera dyrektywę ng-repeat, która jest wypełniana przez kod 'ptutor in tutorial'. Element i by.repeater to specjalne słowa kluczowe dostarczane przez bibliotekę protractor, które pozwalają nam uzyskać szczegóły dyrektywy ng-repeat.
oczekiwać(list.liczba()).toEqual(3); – Na koniec używamy funkcji oczekiwanie, aby sprawdzić, czy rzeczywiście w wyniku dyrektywy ng-repeat rzeczywiście zapełniają się 3 pozycje w naszej tabeli.

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

Powyższy test zostanie uruchomiony w przeglądarce karmy i da taki sam wynik pozytywny, jak pokazano w poprzednim temacie.

Podsumowanie

Testowanie w AngularJS odbywa się przy użyciu frameworku karma, który został opracowany przez samo Google.
Framework karma instaluje się za pomocą menedżera pakietów węzłów. Kluczowymi modułami, które należy zainstalować w celu przeprowadzenia podstawowych testów, są karma, karma-chrome-launcher, karma-jasmine i karma-cli.
Testy są zapisywane w oddzielnych plikach js, zwykle przechowywanych w folderze testowym aplikacji. Lokalizacja tych plików testowych musi być podana w specjalnym pliku konfiguracyjnym o nazwie karma.conf.js. Karma używa tego pliku konfiguracyjnego podczas wykonywania wszystkich testów.
Karmy można używać również do testowania kontrolerów i niestandardowych dyrektyw.
Aby móc kompleksowo testować sieć, należy zainstalować inną platformę zwaną kątomierzem za pośrednictwem węzła, menedżera pakietów. Ten framework udostępnia specjalne metody, których można użyć do testowania wszystkich elementów strony HTML.

Wprowadzenie i instalacja frameworku Karma

Instalacja Karmy

Konfiguracja frameworku Karma

POWIĄZANE ARTYKUŁY

Testowanie kontrolerów AngularJS

Testowanie dyrektyw AngularJS

Kompleksowe testowanie aplikacji AngularJS JS

Podsumowanie

Zapisz się do newslettera