Testowanie jednostkowe AngularJS: samouczek Karma Jasmine

Spisie treści:

Anonim

Jedną z najbardziej błyskotliwych cech Angular.JS jest aspekt testowania. Kiedy programiści w Google opracowywali AngularJS, mieli na uwadze testy i upewnili się, że cały framework AngularJS jest testowalny.

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

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

W tym samouczku nauczysz się:

  • Wprowadzenie i instalacja frameworka Karma
    • Instalacja Karmy
    • Konfiguracja frameworka Karma
  • Testowanie kontrolerów AngularJS
  • Testowanie dyrektyw AngularJS
  • Kompleksowe testowanie aplikacji AngularJS JS

Wprowadzenie i instalacja frameworka Karma

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

Instalacja Karmy

Instalacja Karmy przez npm odbywa się w dwóch etapach.

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

npm install karma karma-chrome-launcher karma-jasmine

W której

  1. npm to narzędzie wiersza poleceń dla menedżera pakietów węzła używane do instalowania niestandardowych modułów na dowolnym komputerze.
  2. Parametr install instruuje narzędzie wiersza komend npm, że instalacja jest wymagana.
  3. W wierszu poleceń określono 3 biblioteki, które są 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żną strukturą dla Karmy.

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

Aby zainstalować narzędzie wiersza poleceń, wykonaj poniższą linię z poziomu wiersza poleceń

npm install karma-cli

w której,

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

Konfiguracja frameworka Karma

Następnym krokiem jest skonfigurowanie karmy, którą można wykonać 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

  1. „Nazwa Twojej aplikacji” - zostanie zastąpiona nazwą Twojej aplikacji.
  2. „ Nazwa Twojej aplikacji” / AngularJS / AngularJS.js - informuje karmę, że Twoja aplikacja zależy od podstawowych modułów w AngularJS
  3. „Nazwa Twojej aplikacji” / AngularJS-mocks / AngularJS-mocks.js ” - informuje karmę, aby użyła funkcji testowania jednostkowego dla AngularJS z pliku Angular.JS-mocks.js.
  4. Wszystkie główne pliki aplikacji lub logiki biznesowej znajdują się w folderze lib aplikacji.
  5. Folder testy będzie zawierał wszystkie testy jednostkowe

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

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

Powyższy kod ma następujące aspekty

  1. Opis testu służy do opisu testu. W naszym przypadku podajemy opis „Test próbny” naszemu testowi.
  2. Funkcja „it” służy do nadania nazwy testowi. W naszym przypadku podajemy nazwę naszego testu jako „Warunek jest prawdziwy”. Nazwa testu musi mieć znaczenie.
  3. Kombinacja słów kluczowych „oczekiwać” i „toBe” określa, jaka jest oczekiwana i rzeczywista wartość wyniku testu. Jeśli rzeczywista i oczekiwana wartość jest taka sama, test przejdzie, w przeciwnym razie zakończy się niepowodzeniem.

Po wykonaniu następującego wiersza w wierszu polecenia wykona powyższy plik testowy

KARMA start

Poniższe dane wyjściowe pochodzą z burzy sieciowej IDE, w której wykonano powyższe kroki.

  1. Dane wyjściowe są dostępne w eksploratorze Karma w burzy internetowej. To okno pokazuje wykonanie wszystkich testów, które są zdefiniowane w ramach karmy.
  2. Tutaj widać, że jest wyświetlany opis wykonanego testu, czyli „Test przykładowy”.
  3. Następnie widać, że wykonywany jest sam test, który ma nazwę „Warunek jest prawdziwy”.
  4. Zauważ, że ponieważ wszystkie testy mają obok siebie zieloną ikonę „OK”, która symbolizuje, że wszystkie testy przeszły pomyślnie.

Testowanie kontrolerów AngularJS

Struktura testowania karmy ma również funkcję testowania kontrolerów od końca do końca. Obejmuje to testowanie obiektu $ scope, który jest używany w kontrolerach.

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

W naszym przykładzie

Najpierw musielibyśmy zdefiniować kontroler. Kontroler ten wykonywałby wymienione poniżej czynności

  1. Utwórz zmienną ID i przypisz do niej 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 upewnić się, że spełniony jest następujący warunek wstępny

    1. Zainstaluj bibliotekę Angular.JS-mocks przez npm. Można to zrobić, wykonując poniższy wiersz w wierszu polecenia
npm install Angular JS-mocks
  1. Następnie zmodyfikuj plik karma.conf.js, aby zapewnić uwzględnienie odpowiednich plików do testu. 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 „files” w zasadzie informuje Karmę o wszystkich plikach, które są wymagane do wykonania testów.
  • Pliki AngularJS.js i AngularJS-mocks.js są wymagane do uruchamiania testów jednostkowych AngularJS
  • Plik index.js będzie zawierał nasz kod kontrolera
  • Folder testowy będzie zawierał wszystkie nasze testy AngularJS

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

Poniższy kod wykonuje tylko następujące rzeczy

  1. Utwórz moduł Angular JS o nazwie sampleApp
  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 = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Po pomyślnym wykonaniu powyższego kodu następnym krokiem byłoby utworzenie przypadku testowego, aby upewnić się, że kod został poprawnie napisany i wykonany.

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

Kod znajdzie się w osobnym pliku o nazwie ControllerTest.js, który zostanie umieszczony w folderze testowym. Poniższy kod wykonuje tylko następujące kluczowe rzeczy

  1. Funkcja beforeEach - ta funkcja służy do ładowania naszego modułu AngularJS.JS o nazwie „sampleApp” przed uruchomieniem testu. Zauważ, że jest to nazwa modułu w pliku index.js.

  2. Obiekt $ controller jest tworzony jako obiekt makiety dla kontrolera „Angular JSController”, który jest zdefiniowany w naszym pliku index.js. W każdym rodzaju testów jednostkowych obiekt pozorowany reprezentuje obiekt fikcyjny, który będzie faktycznie używany do testowania. Ten pozorowany obiekt będzie faktycznie symulował zachowanie naszego kontrolera.

  3. beforeEach (inject (function (_ $ controller_) - służy do wstrzyknięcia pozorowanego obiektu w naszym teście, aby zachowywał się jak rzeczywisty kontroler.

  4. var $ scope = {}; To jest obiekt pozorowany tworzony dla obiektu $ scope.

  5. kontroler var = $ kontroler ('AngularJSController', {$ scope: $ scope}); - Tutaj sprawdzamy istnienie kontrolera o nazwie „Angular.JSController”. Tutaj również przypisujemy wszystkie zmienne z naszego obiektu $ scope w naszym kontrolerze w pliku Index.js do obiektu $ scope w naszym 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

Framework testowania karmy ma również funkcjonalność do testowania niestandardowych dyrektyw. Obejmuje to templateURL, któ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, który wyświetla tekst „To jest testowanie AngularJS”.
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

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

Kod będzie znajdował się w osobnym pliku o nazwie DirectiveTest.js, który zostanie umieszczony w folderze testowym. Poniższy kod wykonuje tylko następujące kluczowe rzeczy

  1. Funkcja beforeEach - ta funkcja służy do ładowania naszego modułu Angular JS 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 Angular.JS mógł jej użyć do skompilowania naszej niestandardowej dyrektywy.

  3. $ Rootscope to główny zakres dowolnej aplikacji AngularJS.JS. We wcześniejszych rozdziałach widzieliśmy obiekt $ scope kontrolera. Cóż, obiekt $ scope jest obiektem potomnym obiektu $ rootscope. Powodem tego jest to, że zmieniamy rzeczywisty tag HTML w DOM za pomocą naszej niestandardowej dyrektywy. Dlatego musimy użyć usługi $ rootscope, która faktycznie nasłuchuje lub wie, kiedy zachodzi jakakolwiek zmiana w dokumencie HTML.

  4. var element = $ compile (" ") - Służy do sprawdzenia, czy nasza dyrektywa zostanie wstrzyknięta tak, jak powinna. Nazwa naszej dyrektywy niestandardowej to Guru99 i wiemy z rozdziału poświęconego dyrektywom niestandardowym, że kiedy dyrektywa zostanie wstawiona do naszego kodu HTML, zostanie wstawiona jako „ ”. Stąd to stwierdzenie jest używane do dokonania tego sprawdzenia.

  5. Expect (element.html ()). toContain ("To jest testowanie AngularJS") - To jest używane do poinstruowania funkcji oczekiwania, że ​​powinna znaleźć element (w naszym przypadku znacznik DIV) zawierający wewnętrzny tekst HTML "This is AngularJS Testing ”.

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

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 z frameworkiem o nazwie Protractor ma funkcjonalność testowania aplikacji internetowej od końca do końca.

Więc to nie tylko testowanie dyrektyw i kontrolerów, ale także testowanie wszystkiego, 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 przy użyciu dyrektywy ng-repeat.

  1. Najpierw tworzymy zmienną o nazwie „tutorial” 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 zasięgu, 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 samouczka przy użyciu zmiennej ptutor.
  3. Na koniec używamy znacznika wraz z parami klucz-wartość (ptutor.Name i ptutor.Description) do wyświetlenia danych tabeli.


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