Testowanie jednostkowe AngularJS z Karma i Jasmine

Jedną z najwspanialszych cech AngularJS jest Testy aspekt. Kiedy programiści Google Tworząc AngularJS, pamiętali o testowaniu i upewnili się, że cała struktura AngularJS jest testowalna.

W AngularJS testowanie jest zazwyczaj przeprowadzane za pomocą frameworka Karma. Testowanie w AngularJS można przeprowadzić bez Karmy, ale framework Karma oferuje tak znakomite funkcje testowania kodu AngularJS, że korzystanie z niego ma sens.

• W AngularJS możemy wykonać Testów jednostkowych oddzielnie dla kontrolerów i dyrektyw.
• Możemy również wykonać testowanie od końca do końca AngularJS, który polega na testowaniu z perspektywy użytkownika.

Wprowadzenie i instalacja frameworku Karma

Karma jest narzędzie do automatyzacji testów stworzone przez zespół AngularJS w GooglePierwszym krokiem do korzystania z Karmy jest jej instalacja. Karmę instaluje się za pomocą npm (menedżera pakietów służącego 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 --save-dev

W którym,

1. npm to narzędzie wiersza poleceń dla menedżera pakietów Node, służące do instalowania niestandardowych modułów na dowolnym komputerze. Jest dostarczane z node.js.
2. Parametr install informuje narzędzie wiersza poleceń npm, że wymagana jest instalacja.
3. 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 -g karma-cli

• Karma-cli służy do instalacji interfejsu wiersza poleceń dla programu Karma, który będzie używany do zapisywania poleceń programu Karma w interfejsie wiersza poleceń. Flaga -g instaluje go globalnie, dzięki czemu polecenie Karma jest dostępne z dowolnego folderu.

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: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

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

1. angular.js – Daje to karmie sygnał, że Twoja aplikacja zależy od głównych modułów AngularJS.
2. angular-mocks.js – Polecenie to informuje karmę, aby użyła funkcjonalności testów jednostkowych dla AngularJS z pliku angular-mocks.js.
3. Wszystkie główne pliki aplikacji lub logiki biznesowej znajdują się w folderze lib Twojej aplikacji.
4. 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

1. Funkcja opisu służy do opisywania testu. W naszym przypadku do naszego testu nadajemy opis „Test próbny”.
2. 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.
3. 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.

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

Czym jest Jasmine w testach jednostkowych AngularJS?

Karma decyduje, gdzie uruchamiane są testy, a Jasmine decyduje, jak są one pisane. Jasmine to framework specyfikacji oparty na zachowaniu, który dostarcza słownictwa używanego w każdym przykładzie na tej stronie. Dlatego adapter karma-jasmine jest instalowany wraz z programem uruchamiającym.

Jasmine wnosi cztery podstawowe elementy:

• opisać(): Grupuje powiązane specyfikacje w zestaw i akceptuje czytelny opis testowanej jednostki.
• To(): Deklaruje pojedynczą specyfikację. Nazwa powinna określać weryfikowane zachowanie, a nie wywoływaną metodę.
• expect() z matcherami: Porównuje wartość rzeczywistą z oczekiwaną. Typowe dopasowania to: toBe, toEqual, toContain i toBeDefined.
• beforeEach() i afterEach(): Przeprowadź konfigurację i demontaż przed i po każdej specyfikacji, dzięki czemu każdy test pozostanie niezależny.

Jasmine oferuje również szpiegów. Szpieg zastępuje rzeczywistą funkcję zarejestrowanym zastępstwem, dzięki czemu kontroler można testować bez wywoływania aktywnego punktu końcowego HTTP. Ponieważ Jasmine nie potrzebuje DOM ani własnej biblioteki asercji, połączenie Karmy i Jasmine pozostaje najlżejszym sposobem na uruchomienie AngularJS. JavaTesty jednostkowe skryptó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

1. Utwórz zmienną ID i przypisz jej wartość 5.
2. 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-Mocks za pomocą npm. Możesz to zrobić, wykonując poniższy wiersz polecenia w wierszu poleceń.

npm install angular-mocks --save-dev

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/angular.js', 'lib/angular-mocks.js', 'lib/index.js', 'test/*.js']

• Parametr „pliki” w zasadzie informuje Karmę o wszystkich plikach wymaganych do przeprowadzenia testów.
• Pliki angular.js i angular-mocks.js są wymagane do uruchomienia testów jednostkowych AngularJS
• 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 AngularJS, który zostanie zapisany jako plik Index.js w folderze testowym naszej aplikacji.

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

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

var sampleApp = angular.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

1. Funkcja beforeEach – Ta funkcja służy do załadowania naszego modułu AngularJS o nazwie „sampleApp” przed uruchomieniem testu. Należy pamiętać, że jest to nazwa modułu w pliku index.js.
2. Obiekt $controller jest tworzony jako obiekt-makieta dla kontrolera „AngularJSController”, który jest zdefiniowany w pliku index.js. W każdym rodzaju testów jednostkowych obiekt-makieta reprezentuje obiekt-fisz, który będzie faktycznie używany do testowania. Ten obiekt-makieta będzie symulował zachowanie naszego kontrolera.
3. beforeEach(inject(function(_$controller_)) – Służy do wstrzyknięcia próbnego obiektu w naszym teście, tak aby zachowywał się jak rzeczywisty kontroler.
4. var $zakres = {}; To jest obiekt próbny tworzony dla obiektu $scope.
5. var controller = $controller('AngularJSController', { $scope: $scope }); – Tutaj sprawdzamy istnienie kontrolera o nazwie „AngularJSController”. Tutaj przypisujemy również wszystkie zmienne z obiektu $scope w kontrolerze w pliku Index.js do obiektu $scope w pliku testowym.
6. 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 oferuje również funkcjonalność testowania dyrektyw niestandardowych. Obejmuje to szablonURLktóre są 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

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

var sampleApp = angular.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

1. Funkcja beforeEach – Ta funkcja służy do załadowania naszego modułu AngularJS o nazwie „sampleApp” przed uruchomieniem testu.
2. Usługa $compile służy do kompilowania dyrektywy. Ta usługa jest obowiązkowa i musi zostać zadeklarowana, aby AngularJS mógł jej użyć do skompilowania naszej niestandardowej dyrektywy.
3. $rootScope to podstawowy zakres dowolnej aplikacji AngularJS. Widzieliśmy obiekt $scope kontrolera w poprzednich rozdziałach. Obiekt $scope jest obiektem podrzędnym obiektu $rootScope. Powodem jego deklaracji jest to, że wprowadzamy zmianę w rzeczywistym znaczniku HTML w DOM za pomocą naszej dyrektywy niestandardowej. Dlatego musimy skorzystać z usługi $rootScope, która faktycznie nasłuchuje lub rozpoznaje zmiany zachodzące w dokumencie HTML.
4. element var = $compile(“ ”)($rootScope) – Służy do sprawdzenia, czy nasza dyrektywa zostanie wstrzyknięta prawidłowo. Dyrektywa jest zarejestrowana z nazwą guru99 w formacie camel case, więc AngularJS dopasowuje element pisany małymi literami. w znaczniku. Dlatego do przeprowadzenia tej kontroli używa się tego polecenia.
5. expect(element.html()).toContain(“To jest testowanie AngularJS”) – służy do poinstruowania funkcji expect, że powinna znaleźć element (w naszym przypadku tag h1) zawierający tekst innerHTML „To jest 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("<guru99></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.

Testowanie aplikacji AngularJS od początku do końca

Struktura testowania karmy wraz z strukturą o nazwie ProtracTor umożliwia testowanie aplikacji internetowych od początku do końca.

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.

1. 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.
2. 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.
3. 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 = angular.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"}
  ];
});

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

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 wersję protracBiblioteka Tor przez npm. Można to zrobić, wykonując poniższy wiersz w wierszu poleceń.

npm install -g 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

1. Funkcja przeglądarki jest zapewniana przez profesjonalistętracbiblioteka tor i zakłada, że ​​nasza aplikacja AngularJS (z kodem pokazanym powyżej) działa na naszej stronie URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); - Ten wiersz kodu w rzeczywistości 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 programistę.tracBiblioteka tor umożliwiająca uzyskanie szczegółów dyrektywy ng-repeat.
3. 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.

Karma kontra Jasmine kontra Protractor: Kluczowe różnice

Trzy narzędzia używane na tej stronie są często mylone, ponieważ pojawiają się w tym samym wierszu poleceń. Każde z nich zajmuje inną warstwę stosu testowego, co jasno pokazuje poniższa tabela.

Krótko mówiąc, Jasmine pisze test, Karma go wykonuje, a Protractor rozszerza tę samą składnię Jasmine na w pełni renderowaną stronę.

Najlepsze praktyki testowania jednostkowego AngularJS

Zestaw kilku nawyków sprawia, że ​​pakiet AngularJS pozostaje szybki i niezawodny, nawet gdy aplikacja się rozrasta.

1. Testuj jedną jednostkę na raz. Załaduj tylko moduł podlegający testowi w beforeEach i zasymuluj każdego współpracownika, tak aby błąd wskazywał na pojedynczy plik.
2. Nigdy nie dzwoń do prawdziwego zaplecza. Użyj usługi $httpBackend z Angular-mocks, aby zwrócić gotowe odpowiedzi. Testy są następnie uruchamiane w trybie offline i generują identyczne wyniki na każdej maszynie.
3. Zachowaj behawioralny charakter nazw specyfikacji. Nazwa taka jak „zwraca 5 po zainicjowaniu kontrolera” będzie lepiej czytelna w raporcie niż „test1”.
4. Zawsze przepłukuj cykl trawienia. Wywołaj $rootScope.$digest() po zmianie danych zakresu, w przeciwnym razie powiązania i obserwatorzy nigdy się nie zaktualizują, a asercje zakończą się niepowodzeniem z niewłaściwego powodu.
5. Zmierz zasięg, ale oceń go ostrożnie. Dodaj karma-coverage, aby zobaczyć nieprzetestowane gałęzie. Wysokie pokrycie przy słabych asercjach nadal ukrywa defekty.
6. Uruchom pakiet w trybie ciągłej integracji. Użyj bezobsługowego programu uruchamiającego Chrome, aby te same specyfikacje były wykonywane przy każdym zatwierdzeniu, a nie tylko na komputerze dewelopera.

Zastosowanie tych zasad sprawia, że ​​powyższe przykłady z odosobnionych demonstracji stają się siatką bezpieczeństwa regresji dla starszej bazy kodu AngularJS. Aby uzyskać szerszy obraz, zobacz Samouczek AngularJS series.

FAQ