Úvod do testovania jednotky AngularJS
Pomocou AngularJS môžete vytvárať úžasné používateľské rozhrania, ale keď sa zložitosť vášho projektu zvyšuje, testovanie jednotiek sa stáva dôležitou súčasťou. Na zlepšenie kvality kódu je testovanie veľmi dôležité. Pri testovaní jednotiek testujeme funkčnosť komponentov izolovane, bez akýchkoľvek externých zdrojov, napríklad DB, súborov atď. Testy jednotiek sa dajú ľahko zapísať a rýchlejšie vykonávať. Pri testovaní jednotiek netestujeme funkčnosť aplikácie, a teda nízku dôveru. AngularJS pozostáva z rôznych stavebných blokov, ako sú služby, komponenty, smernice atď. Pre každý z nich musíme napísať samostatné testovacie prípady.
Základy testovania jednotiek
- Musíme dodržiavať čisté postupy kódovania.
- Uplatnite rovnaké zásady ako funkčný kód.
- Testovacie prípady sú malou funkciou / metódou s 10 alebo menej riadkami.
- Používajte správne pomenovanie konvencie.
- Majú iba jednu zodpovednosť, tj testujú iba jednu vec.
Nástroje na testovanie AngularJS
1) Jasmína
Vývojový rámec na testovanie kódu javascript. Poskytuje funkcie, ktoré pomáhajú pri štruktúrovaní testovacích prípadov. Keď sa projekty stávajú komplexné a testy rastú, je dôležité, aby boli dobre štruktúrované a zdokumentované, a Jasmine to pomáha. Ak chcete používať jazmín s karmou, použite testovací karma-jazmín.
2) Karma
Testovací bežec na písanie a spúšťanie testov jednotiek pri vývoji aplikácie AngularJS. Zvyšuje produktivitu vývojárov. Vytvorí webový server, ktorý načíta aplikačný kód a vykoná testovacie prípady.
Je to aplikácia NodeJS nainštalovaná prostredníctvom npm / priadze. Môže byť nakonfigurovaný tak, aby bežal proti rôznym prehliadačom, aby sa zabezpečilo, že aplikácia funguje vo všetkých dostupných prehľadávačoch.
3) Uhlové profily
AngularJS poskytuje modul ngMock, ktorý nám poskytuje falošné testy. Používajú sa na injektovanie a zosmiešňovanie služieb AngularJS v testoch jednotiek.
Nastavenie prostredia
- Nainštalujte do svojho systému NodeJS. (Https://nodejs.org/en/download/).
- Nainštalujte akékoľvek IDE (napríklad VS kód, zátvorky atď.).
- Vytvorte vo svojom adresári prázdny priečinok ($ mkdir unit testing).
- Otvorte priečinok na testovanie jednotiek v IDE. Potom otvorte terminál (príkazový riadok) vo vašom priečinku na testovanie jednotiek.
- V termináli postupujte podľa nasledujúcich pokynov:
Vytvoriť package.json:
npm initInstall Angular:
npm i angular –saveInstall Karma:
npm i -g karma –save -devInstall Jasmine:
npm i karma-jazmín jazmín-jadro –save -devInštalačné uhlové falošné:
npm i angular-mocks –save -devInstall browser Karma Chrome:
npm i karma-chrome-launcher –save-dev - Vytvorte dva priečinky pomenované ako aplikácia a otestujte ich v priečinku na testovanie jednotiek.
- Vytvorte súbor karma.config.js. V termináli dajte príkaz:
karma init
To vám položí niekoľko otázok. Vyberte nižšie uvedené odpovede.
-> Vyberte testovaciu štruktúru ako Jasmine.
-> Vyberte prehliadač Chrome.
-> Zadajte cestu k súborom js a spec (app / * js and tests / *. Spec.js)
-> Po niekoľkých ďalších otázkach sa to stane.
-> Otvorte súbory karma.config.js a cestu a doplnky, ako je to znázornené nižšie. Nižšie je súbor 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
))
)
Štruktúra priečinka po týchto krokoch by mala byť nasledovná:
Príklad s implementáciou
Testovanie filtra
Filtre sú metódy, ktoré menia údaje na formát čitateľný pre človeka. V tomto module vytvoríme filter a zapíšeme testy jednotiek pre tento filter a skontrolujeme, či funguje podľa očakávania.
kroky:
V priečinku aplikácie vytvorte súbor s názvom filter.js.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Teraz napíšeme prípady testovania jednotky, aby sme skontrolovali, či filter pracuje podľa očakávania alebo nie.
Jasmínové rámcové metódy
- Describe (): Definuje testovací balík - skupinu súvisiacich testov.
- It (): Definuje špecifikáciu alebo test.
- Očakávať (): Berie skutočnú hodnotu ako parameter a je spojený s funkciou porovnávača.
- Matcher function: Zoberie očakávanú hodnotu ako parametre. Je zodpovedné za hlásenie Jasmine, ak je očakávanie pravdivé alebo nepravdivé.
Príklad:
toBe („hodnota“), toContain („hodnota“), toqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
V priečinku testov vytvorte súbor s názvom filter.spec.js.
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
));
));
));
Test spustíte zadaním príkazu nižšie v termináli priečinka na testovanie jednotiek.
Začiatok karmy
alebo môžete nastaviť „karma start“ v testovacom skripte package.json a dať príkaz nižšie.
npm test
Otvorí sa prehliadač Chrome.
Výstup v termináli:
Testovanie ovládača a servisu
AngularJS udržuje logiku oddelenú od vrstvy pohľadu, čo uľahčuje testovanie radičov a služieb.
kroky:
1. V priečinku aplikácie vytvorte súbor s názvom controller.js.
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. V priečinku testov vytvorte súbor s názvom controller.spec.js.
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);
));
));
Výstup v termináli:
záver
AngularJS aplikácie sa skladajú z modulov. Na aplikačnej úrovni sú to moduly AngularJS. Na úrovni modulu sú to služby, továrne, komponenty, smernice a filtre. Každý z nich je schopný komunikovať medzi sebou prostredníctvom svojho externého rozhrania. Prípady testovania jednotiek pre vašu aplikáciu AngularJS urýchľujú proces ladenia a vývoja.
Odporúčané články
Toto je príručka pre testovanie jednotiek AngularJS. Tu diskutujeme o úvode a základoch testovania jednotiek spolu s testovacími nástrojmi AngularJS a príkladom s implementáciou. Ďalšie informácie nájdete aj v nasledujúcich článkoch -
- Kariéra v AngularJS
- ReactJs vs AngularJs
- Uhlová aplikácia JS
- Kariéra v devOps