Test unitario di AngularJS: tutorial su Karma Jasmine

Una delle caratteristiche più brillanti di Angular.JS è il Testing aspetto. Quando gli sviluppatori di Google hanno sviluppato AngularJS, hanno tenuto a mente i test e si sono assicurati che l'intero framework AngularJS fosse testabile.

In AngularJS, i test vengono normalmente eseguiti utilizzando Karma (framework). I test Angular JS possono essere eseguiti senza Karma, ma il framework Karma ha una funzionalità così brillante per testare il codice AngularJS, che ha senso utilizzare questo framework.

In AngularJS, possiamo eseguire Test unitari separatamente per controllori e direttive.
Possiamo anche eseguire test end-of-end di AngularJS, che vengono testati dal punto di vista dell'utente.

Introduzione e installazione del framework Karma

Il karma è un strumento di automazione dei test creato dal team Angular JS di Google. Il primo passo per utilizzare Karma è installare Karma. Karma viene installato tramite npm (che è un gestore di pacchetti utilizzato per una facile installazione di moduli su un computer locale).

Installazione del Karma

L'installazione di Karma tramite npm viene eseguita in un processo in due passaggi.

Passo 1) Esegui la riga seguente dalla riga di comando

npm install karma karma-chrome-launcher karma-jasmine

In cui,

npm è l'utilità della riga di comando per il gestore di pacchetti del nodo utilizzata per installare moduli personalizzati su qualsiasi macchina.
Il parametro install indica all'utilità della riga di comando npm che è necessaria l'installazione.
Nella riga di comando sono specificate 3 librerie necessarie per lavorare con karma.

karma è la libreria principale che verrà utilizzata a scopo di test.
karma-chrome-launcher è una libreria separata che consente al browser Chrome di riconoscere i comandi karma.
karma-jasmine – Questo installa jasmine che è un framework dipendente per Karma.

Passo 2) Il passaggio successivo è installare l'utilità della riga di comando karma. Ciò è necessario per eseguire i comandi della linea karma. L'utilità karma line verrà utilizzata per inizializzare l'ambiente karma per i test.

Per installare l'utilità della riga di comando, eseguire la riga seguente dalla riga di comando

npm install karma-cli

in cui,

karma-cli viene utilizzato per installare l'interfaccia a riga di comando per karma che verrà utilizzata per scrivere i comandi karma nell'interfaccia a riga di comando.

Configurazione del framework Karma

Il passo successivo è configurare il karma che può essere eseguito tramite il comando

"karma –init"

Dopo aver eseguito il passaggio precedente, karma creerà un file karma.conf.js. Il file sarà probabilmente simile allo snippet mostrato di seguito

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

I file di configurazione sopra indicati comunicano al motore di runtime Karma le seguenti cose

"Nome della tua richiesta" – Questo verrà sostituito dal nome della tua applicazione.
'Nome della tua applicazione'/AngularJS/AngularJS.js' – Questo dice a Karma che la tua applicazione dipende dai moduli principali di AngularJS
'Nome della tua applicazione'/AngularJS-mocks/AngularJS-mocks.js' – Questo indica a Karma di utilizzare la funzionalità Unit Testing per AngularJS dal file Angular.JS-mocks.js.
Tutti i file principali dell'applicazione o della logica aziendale sono presenti nella cartella lib dell'applicazione.
La cartella tests conterrà tutti gli unit test.

Per verificare se il karma funziona, crea un file chiamato Sample.js, inserisci il codice seguente e inseriscilo nella directory test.

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

Il codice soprastante presenta i seguenti aspetti

La funzione description viene utilizzata per fornire una descrizione del test. Nel nostro caso, stiamo dando la descrizione 'Test di esempio' al nostro test.
La funzione 'it' viene utilizzata per dare un nome al test. Nel nostro caso, stiamo dando il nome al nostro test come 'La condizione è vera'. Il nome del test deve essere significativo.
La combinazione delle parole chiave "expect" e "toBe" indica qual è il valore atteso ed effettivo del risultato del test. Se il valore effettivo e quello atteso sono gli stessi, il test verrà superato altrimenti fallirà.

Quando esegui la seguente riga al prompt dei comandi, verrà eseguito il file di test soprastante

KARMA start

L'output seguente è preso dall'IDE Webstorm in cui sono state eseguite le operazioni di cui sopra.

L'output arriva nell'esploratore Karma interiore Webstorm. Questa finestra mostra l'esecuzione di tutti i test definiti nel quadro del karma.
Qui puoi vedere che viene mostrata la descrizione del test eseguito che è “Sample test”.
Successivamente, puoi vedere che il test stesso che ha il nome "La condizione è vera" viene eseguito.
Tieni presente che poiché tutti i test hanno accanto l'icona verde "Ok" che simboleggia che tutti i test sono stati superati.

Test dei controller AngularJS

Il framework di test del karma ha anche la funzionalità per testare i controllori end-to-end. Ciò include il test dell'oggetto $scope utilizzato nei controller.

Diamo un'occhiata a un esempio di come possiamo raggiungere questo obiettivo.

Nel nostro esempio,

Dovremmo prima definire un controller. Questo controller eseguirà i passaggi indicati di seguito

Crea una variabile ID e assegnale il valore 5.
Assegna la variabile ID all'oggetto $scope.

Il nostro test verificherà l'esistenza di questo controller e verificherà anche se la variabile ID dell'oggetto $scope è impostata su 5.

Per prima cosa dobbiamo assicurarci che sia soddisfatto il seguente prerequisito

Installa la libreria Angular.JS-mocks tramite npm. Questo può essere fatto eseguendo la riga seguente nel prompt dei comandi

npm install Angular JS-mocks

Il prossimo passo è modificare il file karma.conf.js per garantire che siano inclusi i file giusti per il test. Il segmento seguente mostra solo la parte dei file karma.conf.js che deve essere modificata

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

Il parametro 'files' indica sostanzialmente a Karma tutti i file necessari per l'esecuzione dei test.
I file AngularJS.js e AngularJS-mocks.js sono necessari per eseguire gli unit test AngularJS
Il file index.js conterrà il nostro codice per il controller
La cartella test conterrà tutti i nostri test AngularJS

Di seguito è riportato il nostro codice Angular.JS che verrà archiviato come file Index.js nella cartella di test della nostra applicazione.

Il codice seguente fa semplicemente le seguenti cose

Creare un Modulo AngularJS chiamato sampleApp
Crea un controller chiamato AngularJSController
Crea una variabile chiamata ID, assegnale il valore 5 e assegnala all'oggetto $scope

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

Una volta eseguito correttamente il codice precedente, il passaggio successivo sarà creare un file Test Case per garantire che il codice sia stato scritto ed eseguito correttamente.

Il codice per il nostro test sarà come mostrato di seguito.

Il codice sarà in un file separato chiamato ControllerTest.js, che verrà inserito nella cartella test. Il codice sottostante esegue solo le seguenti operazioni chiave

Funzione beforeEach: questa funzione viene utilizzata per caricare il nostro modulo AngularJS.JS chiamato "sampleApp" prima dell'esecuzione del test. Tieni presente che questo è il nome del modulo in un file index.js.
L'oggetto $controller viene creato come oggetto mockup per il controller "Angular JSController" definito nel nostro file index.js. In qualsiasi tipo di unit test, un oggetto fittizio rappresenta un oggetto fittizio che verrà effettivamente utilizzato per il test. Questo oggetto simulato simulerà effettivamente il comportamento del nostro controller.
beforeEach(inject(function(_$controller_) – Viene utilizzato per iniettare l'oggetto mock nel nostro test in modo che si comporti come il controller effettivo.
var $ambito = {}; Questo è un oggetto fittizio creato per l'oggetto $scope.
var controller = $controller('AngularJSController', { $scope: $scope }); – Qui stiamo verificando l'esistenza di un controller denominato "Angular.JSController". Qui stiamo anche assegnando tutte le variabili dal nostro oggetto $scope nel nostro controller nel file Index.js all'oggetto $scope nel nostro file di test
Infine, confrontiamo $scope.ID con 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);
        });
    });
});

Il test precedente verrà eseguito nel browser karma e darà lo stesso risultato di superamento mostrato nell'argomento precedente.

Testare le direttive AngularJS

Il framework di test del karma ha anche la funzionalità per testare le direttive personalizzate. Ciò include i templateURL utilizzati nelle direttive personalizzate.

Diamo un'occhiata a un esempio di come possiamo raggiungere questo obiettivo.

Nel nostro esempio, definiremo prima una direttiva personalizzata che esegue le seguenti operazioni

Crea un modulo AngularJS chiamato sampleApp
Crea una direttiva personalizzata con il nome – Guru99
Crea una funzione che restituisca un modello con un tag di intestazione che visualizzi il testo "This is AngularJS Testing".

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

Una volta eseguito correttamente il codice precedente, il passaggio successivo sarà creare un caso di test per garantire che il codice sia stato scritto ed eseguito correttamente. Il codice per il nostro test sarà come mostrato di seguito

Il codice sarà in un file separato chiamato DirectiveTest.js, che verrà inserito nella cartella test. Il codice sottostante esegue solo le seguenti operazioni chiave

Funzione beforeEach: questa funzione viene utilizzata per caricare il nostro modulo Angular JS chiamato "sampleApp" prima dell'esecuzione del test.
Il servizio $compile viene utilizzato per compilare la direttiva. Questo servizio è obbligatorio e deve essere dichiarato in modo che Angular.JS possa utilizzarlo per compilare la nostra direttiva personalizzata.
$rootscope è l'ambito principale di qualsiasi applicazione AngularJS.JS. Abbiamo visto l'oggetto $scope del controller nei capitoli precedenti. Bene, l'oggetto $scope è l'oggetto figlio dell'oggetto $rootscope. Il motivo per cui questo viene dichiarato qui è perché stiamo apportando una modifica a un tag HTML effettivo nel DOM tramite la nostra direttiva personalizzata. Pertanto, dobbiamo utilizzare il servizio $rootscope che effettivamente ascolta o sa quando avviene una modifica dall'interno di un documento HTML.
var elemento = $compile(" ”) – Viene utilizzato per verificare se la nostra direttiva viene inserita come dovrebbe. Il nome della nostra direttiva personalizzata è Guru99 e sappiamo dal capitolo sulle direttive personalizzate che quando la direttiva viene inserita nel nostro HTML, verrà inserita come ' '. Quindi questa istruzione viene utilizzata per effettuare tale controllo.
wait(element.html()).toContain("This is AngularJS Testing") – Viene utilizzato per istruire la funzione wait che dovrebbe trovare l'elemento (nel nostro caso il tag div) per contenere il testo innerHTML di "This is Test di 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");
  });
});

Il test precedente verrà eseguito nel browser karma e darà lo stesso risultato di superamento mostrato nell'argomento precedente.

Test end-to-end delle applicazioni AngularJS JS

Il framework di test del karma insieme a un framework chiamato Goniometro ha la funzionalità di testare un'applicazione web end-to-end.

Quindi non si tratta solo di testare direttive e controller, ma anche di testare qualsiasi altra cosa che possa apparire su una pagina HTML.

Diamo un'occhiata a un esempio di come possiamo raggiungere questo obiettivo.

Nel nostro esempio seguente, avremo un'applicazione AngularJS che crea una tabella dati utilizzando la direttiva ng-repeat.

Per prima cosa creiamo una variabile chiamata "tutorial" e le assegniamo alcune coppie chiave-valore in un unico passaggio. Ciascuna coppia chiave-valore verrà utilizzata come dati durante la visualizzazione della tabella. La variabile tutorial viene quindi assegnata all'oggetto scope in modo che sia possibile accedervi dalla nostra vista.
Per ogni riga di dati nella tabella, utilizziamo la direttiva ng-repeat. Questa direttiva attraversa ciascuna coppia chiave-valore nell'oggetto ambito del tutorial utilizzando la variabile ptutor.
Infine, stiamo utilizzando il file tag insieme alle coppie chiave-valore (ptutor.Name e ptutor.Description) per visualizzare i dati della tabella.

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

Il nostro test testerà effettivamente la direttiva ng-repeat e garantirà che contenga 3 righe di dati come dovrebbe dall'esempio precedente.

Per prima cosa dobbiamo assicurarci che sia soddisfatto il seguente prerequisito

Installa la libreria del goniometro tramite npm. Questo può essere fatto eseguendo la riga seguente nel prompt dei comandi

"npm install protractor"

Il codice per il nostro test sarà come mostrato di seguito.

Il codice sarà in un file separato chiamato CompleteTest.js , che sarà inserito nella cartella test. Il codice sottostante esegue solo le seguenti operazioni chiave

La funzione browser è fornita dalla libreria goniometro e presuppone che la nostra applicazione AngularJS (con il codice mostrato sopra) sia in esecuzione sull'URL del nostro sito – http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -Questa riga di codice in realtà recupera la direttiva ng-repeat che è popolata dal codice 'ptutor in tutorial'. L'elemento e by.repeater sono parole chiave speciali fornite dalla libreria protractor che ci consentono di ottenere i dettagli della direttiva ng-repeat.
aspetta(list.count()).toEqual(3); – Infine, stiamo utilizzando la funzione wait per vedere che stiamo effettivamente ottenendo 3 elementi popolati nella nostra tabella come risultato della direttiva 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);  }); });

Il test precedente verrà eseguito nel browser karma e darà lo stesso risultato di superamento mostrato nell'argomento precedente.

Sintesi

I test in AngularJS vengono eseguiti utilizzando il framework karma, un framework sviluppato da Google stesso.
Il framework karma viene installato utilizzando il gestore pacchetti del nodo. I moduli chiave che devono essere installati per i test di base sono karma, karma-chrome-launcher, karma-jasmine e karma-cli.
I test sono scritti in file js separati, normalmente conservati nella cartella test della tua applicazione. La posizione di questi file di test deve essere menzionata in uno speciale file di configurazione chiamato karma.conf.js. Karma utilizza questo file di configurazione durante l'esecuzione di tutti i test.
Karma può essere utilizzato anche per testare controller e direttive personalizzate.
Per un test web end-to-end, è necessario installare un altro framework chiamato goniometro tramite Node, gestore pacchetti. Questo framework fornisce metodi speciali che possono essere utilizzati per testare tutti gli elementi su una pagina HTML.

Introduzione e installazione del framework Karma

Installazione del Karma

Configurazione del framework Karma

ARTICOLI CORRELATI

Test dei controller AngularJS

Testare le direttive AngularJS

Test end-to-end delle applicazioni AngularJS JS

Sintesi

Iscriviti alla newsletter