Introduzione al test unitario AngularJS
Usando AngularJS sei in grado di creare incredibili interfacce utente, ma quando la complessità del tuo progetto aumenta, i test unitari diventano una parte importante. Per migliorare la qualità del codice, i test sono molto importanti. Nel test unitario, testiamo una funzionalità di un componente isolatamente, senza risorse esterne come DB, file, ecc. I test unitari sono facili da scrivere e più veloci nell'esecuzione. Nel test unitario, non testiamo la funzionalità di un'app, quindi scarsa fiducia. AngularJS è costituito da vari elementi costitutivi come servizi, componenti, direttive, ecc. Per ognuno di essi, è necessario scrivere casi di test separati.
Fondamenti di unit test
- Dobbiamo seguire pratiche di codifica pulite.
- Applicare gli stessi principi del codice funzionale.
- I casi di test sono una piccola funzione / metodo di 10 righe o meno.
- Utilizzare una convenzione di denominazione corretta.
- Hanno una sola responsabilità, cioè testare solo una cosa.
Strumenti di test AngularJS
1) Jasmine
Framework di sviluppo per testare il codice javascript. Fornisce funzioni che aiutano a strutturare i casi di test. Man mano che i progetti diventano complessi e i test crescono, è importante mantenerli ben strutturati e documentati e Jasmine aiuta a raggiungere questo obiettivo. Per usare Jasmine con Karma, usa il test runner karma-jasmine.
2) Karma
Un test runner per la scrittura e l'esecuzione di unit test durante lo sviluppo dell'applicazione AngularJS. Aumenta la produttività degli sviluppatori. Genererà un server Web che carica il codice dell'applicazione ed esegue i casi di test.
È un'applicazione NodeJS installata tramite npm / yarn. Può essere configurato per l'esecuzione su vari browser per garantire che l'applicazione funzioni su tutti i browser disponibili.
3) Angular-Mock
AngularJS fornisce il modulo ngMock, che ci fornisce test di simulazione. Sono utilizzati per iniettare e deridere i servizi AngularJS nei test unitari.
Impostazione dell'ambiente
- Installa NodeJS sul tuo sistema. (Https://nodejs.org/en/download/).
- Installa qualsiasi IDE (come codice VS, parentesi, ecc.).
- Crea una cartella vuota ($ mkdir unit testing) nella tua directory.
- Apri la cartella dei test unitari nel tuo IDE. Quindi aprire il terminale (prompt dei comandi) all'interno della cartella di test dell'unità.
- Nel terminale segui i seguenti comandi uno per uno:
Crea package.json:
npm initInstall Angolare:
npm i angular -saveInstall Karma:
npm i -g karma –save -devInstall Jasmine:
npm i karma-jasmine jasmine-core –save -devInstallare derisioni angolari:
npm i angular-mocks –save -devInstallazione del browser Chrome Karma:
npm i karma-chrome-launcher –save-dev - Creare due cartelle denominate come app e test all'interno della cartella test unità.
- Crea karma.config.js. Nel terminale dare il comando seguente:
karma init
Ti farà una serie di domande. Seleziona le risposte seguenti per questo.
-> Seleziona il framework di test come Jasmine.
-> Seleziona Chrome come browser.
-> Specifica il percorso per i tuoi file js e spec (app / * js e test / *. Spec.js)
-> Dopo qualche altra domanda, sarà fatto.
-> Apri file karma.config.js e percorso e plugin come mostrato di seguito. Di seguito è riportato il file karma.config.js.
// Karma configuration
module.exports = function(config) (
config.set((
// base path is used to resolve all patterns
basePath: '',
plugins:('karma-jasmine', 'karma-chrome-launcher'),
frameworks: ('jasmine'),
// list of files to load in the browser
files: (
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'tests/*.spec.js'
),
// list of files to exclude
exclude: (),
preprocessors: (),
reporters: ('progress'),
// server port
port: 9876,
// enable / disable colors in output
colors: true,
logLevel: config.LOG_INFO,
// enable / disable watch mode for files
autoWatch: true,
browsers: ('Chrome'),
singleRun: false,
// how many browser should start simultaneous
concurrency: Infinity
))
)
La cartella strutturata dopo questi passaggi dovrebbe essere come di seguito:
Esempio con implementazione
Test di un filtro
I filtri sono metodi che cambiano i dati in un formato leggibile dall'uomo. In questo modulo, creeremo un filtro e scriveremo i test unitari per quel filtro e controlleremo se funziona come previsto.
passi:
Crea un file chiamato filter.js nella cartella dell'app.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Ora, scriviamo i casi di test unitari per verificare se il filtro funziona come previsto o meno.
Metodi del quadro di gelsomino
- Describe (): definisce una suite di test, un gruppo di test correlati.
- It (): definisce una specifica o un test.
- Expect (): accetta un valore effettivo come parametro ed è incatenato con una funzione matcher.
- Funzione Matcher: prende il valore atteso come parametri. È responsabile di riferire a Jasmine se l'aspettativa è vera o falsa.
Esempio:
toBe ('value'), toContain ('value'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Creare un file denominato filter.spec.js nella cartella test.
filter.spec.js
//1. Describe the object type
describe('Filters', function () (
//2. Load the Angular App
beforeEach(module('MyApp'));
//3. Describe the object by name
describe('compute', function () (
var compute;
//4. Initialize the filter
beforeEach(inject(function ($filter) (
compute = $filter('compute', ());
)));
//5. Write the test in the it block along with expectations.
it('Should return 0 if input is negative', function () (
const result = compute(-1);
expect(result).toBe(0); //pass
));
it('Should increment the input if input is positive', function () (
const result = compute(1);
expect(result).toBe(2);//pass
//expect(compute(3)).toBe(5);//fail
));
));
));
Per eseguire il test, immettere il comando seguente nel terminale della cartella Test unità.
Inizio del karma
oppure puoi impostare "karma start" nello script di test package.json e dare il comando seguente.
test npm
Questo aprirà il browser Chrome.
Uscita nel terminale:
Test di un controller e servizio
AngularJS mantiene la logica separata dal livello di visualizzazione, ciò rende i controller e i servizi facili da testare.
passi:
1. Creare un file denominato controller.js nella cartella dell'app.
controller.js
var app = angular.module('Myapp', ())
app.service('calcService', (
function()(
function square(o1)(
return o1*o1;
)
return (square:square);
)
));
app.controller('MyController', function MyController($scope) (
$scope.title = "Hello MyController";
$scope.square = function() (
$scope.result = calcService.square($scope.number);
)
));
2. Creare un file denominato controller.spec.js nella cartella test.
controller.spec.js
describe('MyController', function() (
var controller, scope;
beforeEach(angular.mock.module('Myapp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) (
scope = $rootScope.$new();
controller = $controller('MyController', ( $scope : scope ));
)));
it('Title should be defined', inject(function ($rootScope, $controller) (
expect(scope.title).toBeDefined();
)));
it('Title as Hello MyController', inject(function ($rootScope, $controller) (
expect(scope.title).toEqual('Hello MyController');
)));
));
describe('square', function()(
var calcService;
beforeEach(function()(
module('Myapp');
inject( function($injector)(
calcService = $injector.get('calcService');
));
));
it('should square the number', function()(
var result = calcService.square(3);
expect(result).toBe(9);
));
));
Uscita nel terminale:
Conclusione
Le applicazioni AngularJS sono composte da moduli. A livello di applicazione, si tratta di moduli AngularJS. A livello di modulo, si tratta di servizi, fabbriche, componenti, direttive e filtri. Ognuno di loro è in grado di comunicare tra loro attraverso la sua interfaccia esterna. La scrittura di casi di test unitari per l'applicazione AngularJS accelera il processo di debug e sviluppo.
Articoli consigliati
Questa è una guida al test unitario AngularJS. Qui discutiamo l'introduzione e i fondamenti del test unitario insieme agli strumenti di test AngularJS e all'esempio con l'implementazione. Puoi anche consultare i seguenti articoli per saperne di più -
- Carriera in AngularJS
- ReactJs vs AngularJs
- Applicazione angolare JS
- Carriera in DevOps