Test unitario di AngularJS: Tutorial Karma Jasmine

Una delle caratteristiche più brillanti di Angular.JS è l'aspetto Testing. 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). Il test Angular JS può essere eseguito senza Karma, ma il framework Karma ha una funzionalità così brillante per testare il codice AngularJS, che ha senso usare questo framework.

In AngularJS, possiamo eseguire unit test separatamente per controller e direttive.
Possiamo anche eseguire il test di fine test di AngularJS, che sta testando dal punto di vista dell'utente.

In questo tutorial imparerai-

Introduzione e installazione del framework Karma

Installazione di Karma
Configurazione del framework Karma

Test dei controller AngularJS
Testare le direttive AngularJS
Test end to end delle applicazioni AngularJS JS

Introduzione e installazione del framework Karma

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

Installazione di Karma

L'installazione di Karma tramite npm viene eseguita in due fasi.

Passaggio 1) Esegui la riga sottostante dall'interno della 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 utilizzato per l'installazione di moduli personalizzati su qualsiasi macchina.
Il parametro install indica all'utilità della riga di comando npm che è richiesta l'installazione.
Ci sono 3 librerie specificate nella riga di comando che sono necessarie per lavorare con il karma
- karma è la libreria principale che verrà utilizzata a scopo di test.
- karma-chrome-launcher è una libreria separata che consente ai comandi karma di essere riconosciuti dal browser Chrome.
- karma-jasmine - Questo installa il gelsomino che è una struttura dipendente per Karma.

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

Per installare l'utilità della riga di comando, eseguire la riga seguente dall'interno della 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 prossimo passo è configurare il karma che può essere fatto 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 precedenti dicono al motore di runtime karma le seguenti cose

"Nome della tua applicazione" : verrà sostituito dal nome della tua applicazione.
' Your application Name' / AngularJS / AngularJS.js ' - Questo dice a karma che la tua applicazione dipende dai moduli principali in AngularJS
'Your application Name' / AngularJS-mocks / AngularJS-mocks.js ' - Questo dice a karma di utilizzare la funzionalità di test unitario per AngularJS dal file Angular.JS-mocks.js.
Tutti i file dell'applicazione principale o della logica aziendale sono presenti nella cartella lib dell'applicazione.
La cartella dei test conterrà tutti gli unit test

Per verificare se il karma sta funzionando, crea un file chiamato Sample.js, inserisci il codice seguente e posizionalo nella directory di test.

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

Il codice sopra ha i seguenti aspetti

La funzione di descrizione 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, diamo il nome del nostro test come "La condizione è vera". Il nome del test deve essere significativo.
La combinazione delle parole chiave "aspetta" e "toBe" indica qual è il valore atteso ed effettivo del risultato del test. Se il valore effettivo e quello atteso sono uguali, il test passerà altrimenti fallirà.

Quando si esegue la riga seguente al prompt dei comandi, verrà eseguito il file di test sopra

KARMA start

L'output di seguito è tratto dall'IDE Webstorm in cui sono stati eseguiti i passaggi precedenti.

L'output arriva nell'esploratore Karma all'interno di 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 un nome di "Condizione è vera" viene eseguito.
Notare 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 controller end to end. Ciò include il test dell'oggetto $ scope utilizzato all'interno dei controller.

Diamo un'occhiata a un esempio di come possiamo ottenere questo risultato.

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 testerà l'esistenza di questo controller e verificherà anche se la variabile ID dell'oggetto $ scope è impostata su 5.

Per prima cosa dobbiamo assicurarci che siano presenti i seguenti prerequisiti

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

npm install Angular JS-mocks

Successivamente è necessario modificare il file karma.conf.js per garantire che i file corretti siano inclusi per il test. Il segmento sottostante mostra solo la parte dei file di karma.conf.js che deve essere modificata
```
files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
```

Il parametro "files" dice fondamentalmente a Karma tutti i file che sono necessari per l'esecuzione dei test.
I file AngularJS.js e AngularJS-mocks.js sono necessari per eseguire gli unit test di AngularJS
Il file index.js conterrà il nostro codice per il controller
La cartella dei 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 solo le seguenti cose

Crea un modulo JS angolare chiamato sampleApp
Crea un controller chiamato AngularJSController
Crea una variabile chiamata ID, assegnale un valore di 5 e assegnala all'oggetto $ scope

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

Una volta che il codice precedente è stato eseguito correttamente, il passaggio successivo sarebbe creare un 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 di test. Il codice seguente fa solo le seguenti cose chiave

funzione beforeEach - Questa funzione viene utilizzata per caricare il nostro modulo AngularJS.JS chiamato "sampleApp" prima dell'esecuzione del test. Notare che questo è il nome del modulo in un file index.js.
L'oggetto $ controller viene creato come oggetto mockup per il controller '' Angular JSController '' che è definito nel nostro file index.js. In qualsiasi tipo di test unitario, un oggetto fittizio rappresenta un oggetto fittizio che verrà effettivamente utilizzato per il test. Questo oggetto fittizio simulerà effettivamente il comportamento del nostro controller.
beforeEach (inject (function (_ $ controller_) - Questo è usato per iniettare l'oggetto mock nel nostro test in modo che si comporti come il controller effettivo.
var $ scope = {}; 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, stiamo confrontando $ 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 del karma e darà lo stesso risultato del passaggio mostrato nell'argomento precedente.

Test delle 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 ottenere questo risultato.

Nel nostro esempio, definiremo prima una direttiva personalizzata che fa le seguenti cose

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 "Questo è AngularJS Testing."

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

Una volta che il codice precedente è stato eseguito correttamente, il passaggio successivo sarebbe creare un 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 DirectiveTest.js, che verrà inserito nella cartella di test. Il codice seguente fa solo le seguenti cose chiave

funzione beforeEach - Questa funzione viene utilizzata per caricare il nostro modulo JS angolare 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. Quindi, abbiamo bisogno di usare il servizio $ rootscope che ascolta o sa effettivamente quando avviene una modifica dall'interno di un documento HTML.
var element = $ compile (" ") - Questo è usato per controllare se la nostra direttiva viene iniettata come dovrebbe. Il nome della nostra direttiva personalizzata è Guru99 e sappiamo dal nostro capitolo sulle direttive personalizzate che quando la direttiva viene inserita nel nostro HTML, verrà inserita come " ". Quindi questa affermazione è usata per fare quel controllo.
wait (element.html ()). toContain ("This is AngularJS Testing") - Questo è usato per istruire la funzione wait che dovrebbe trovare l'elemento (nel nostro caso il tag div) per contenere il testo innerHTML di "Questo è 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");});});

Il test precedente verrà eseguito nel browser del karma e darà lo stesso risultato del passaggio 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 testare qualsiasi altra cosa che possa apparire su una pagina HTML.

Diamo un'occhiata a un esempio di come possiamo ottenere questo risultato.

Nel nostro esempio seguente, avremo un'applicazione AngularJS che crea una tabella di 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. Ogni 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, stiamo usando la direttiva ng-repeat. Questa direttiva passa attraverso ogni coppia chiave-valore nell'oggetto dell'ambito del tutorial utilizzando la variabile ptutor.
Infine, stiamo usando il tag insieme alle coppie di valori chiave (ptutor.Name e ptutor.Description) per visualizzare i dati della tabella.


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

Test unitario di AngularJS: Tutorial Karma Jasmine

Sommario:

Introduzione e installazione del framework Karma

Installazione di Karma

Configurazione del framework Karma

Test dei controller AngularJS

Test delle direttive AngularJS

This is AngularJS Testing

Test end to end delle applicazioni AngularJS JS