Úvod do testování jednotky AngularJS
Pomocí AngularJS jste schopni vytvořit úžasná uživatelská rozhraní, ale když se složitost vašeho projektu zvyšuje, testování jednotek se stává důležitou součástí. Pro zlepšení kvality kódu je testování velmi důležité. Při testování jednotky testujeme funkčnost komponenty izolovaně, bez jakýchkoli externích zdrojů, například DB, souborů atd. Testy jednotek se snadno zapisují a rychleji provádějí. Při testování jednotek netestujeme funkčnost aplikace, a tudíž nízkou důvěru. AngularJS se skládá z různých stavebních bloků, jako jsou služby, komponenty, směrnice atd. Pro každý z nich musíme napsat samostatné testovací případy.
Základy testování jednotek
- Musíme se řídit čistými postupy kódování.
- Použijte stejné zásady jako funkční kód.
- Testovací případy jsou malou funkcí / metodou 10 řádků nebo méně.
- Použijte správnou konvenci pojmenování.
- Mají pouze jednu odpovědnost, tj. Testují pouze jednu věc.
Nástroje pro testování AngularJS
1) Jasmine
Vývojový rámec pro testování kódu javascript. Poskytuje funkce, které pomáhají při strukturování testovacích případů. Jak se projekty stávají složitější a testy rostou, je důležité udržovat je dobře strukturované a zdokumentované, a Jasmine to pomáhá dosáhnout. Chcete-li použít Jasmine s Karmou, použijte testovací běžec karma-jasmín.
2) Karma
Testovací běžec pro psaní a spouštění testů jednotek při vývoji aplikace AngularJS. Zvyšuje produktivitu vývojářů. Vytvoří webový server, který načte kód aplikace a provede testovací případy.
Je to aplikace NodeJS nainstalovaná prostřednictvím npm / příze. Může být nakonfigurován tak, aby běžel proti různým prohlížečům, aby se zajistilo, že aplikace funguje ve všech dostupných prohlížečích.
3) Úhlové zesměšňování
AngularJS poskytuje modul ngMock, který nám poskytuje falešné testy. Používají se k injektování a zesměšňování služeb AngularJS v jednotkových testech.
Nastavení prostředí
- NodeJS nainstalujte do svého systému. (https://nodejs.org/en/download/).
- Nainstalujte libovolné IDE (jako je kód VS, závorky atd.).
- Vytvořte ve vašem adresáři prázdnou složku ($ mkdir unit testing).
- Otevřete složku testování jednotek v IDE. Poté otevřete terminál (příkazový řádek) ve složce pro testování jednotek.
- V terminálu postupujte podle následujících pokynů jeden po druhém:
Vytvořit package.json:
npm initInstall Angular:
npm i angular –saveInstall Karma:
npm i -g karma –save -devInstall Jasmine:
npm i karma-jasmine jasmine-core –save -devInstall Angular mocks:
npm i angular-mocks –save -devInstall prohlížeč Chrome Karma Chrome:
npm i karma-chrome-launcher –save-dev - Vytvořte dvě složky pojmenované jako aplikace a testujte uvnitř složky pro testování jednotek.
- Vytvořte karma.config.js. V terminálu zadejte příkaz níže:
karma init
Zeptá se vás na řadu otázek. Vyberte pro ni níže uvedené odpovědi.
-> Vyberte testovací rámec jako Jasmine.
-> Jako prohlížeč vyberte Chrome.
-> Určete cestu pro soubory js a spec (app / * js a tests / *. Spec.js)
-> Po několika dalších otázkách to bude hotové.
-> Otevřete soubory a cestu karma.config.js a pluginy, jak je ukázáno níže. Níže naleznete soubor 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
))
)
Složka strukturovaná po těchto krocích by měla vypadat takto:
Příklad s implementací
Testování filtru
Filtry jsou metody, které mění data do formátu čitelného člověkem. V tomto modulu vytvoříme filtr a zapíšeme testy jednotek pro tento filtr a zkontrolujeme, zda funguje podle očekávání.
Kroky:
Ve složce aplikace vytvořte soubor s názvem filter.js.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Nyní napíšeme případy testování jednotek a zkontrolujeme, zda filtr pracuje podle očekávání nebo ne.
Jasmine Framework Methods
- Describe (): Definuje testovací sadu - skupinu souvisejících testů.
- It (): Definuje specifikaci nebo test.
- Očekávat (): Jako parametr bere skutečnou hodnotu a je zřetězeno pomocí funkce matcher.
- Funkce Matcher: Vezme očekávanou hodnotu jako parametry. Je-li očekávání pravdivé nebo nepravdivé, odpovídá za hlášení Jasmine.
Příklad:
toBe ('value'), toContain ('value'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Ve složce testů vytvořte soubor s názvem 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
));
));
));
Chcete-li spustit test, zadejte příkaz níže v terminálu složky testování jednotky.
Karma začíná
nebo můžete nastavit „karma start“ v testovacím skriptu package.json a dát příkaz níže.
npm test
Tím se otevře prohlížeč Chrome.
Výstup v terminálu:
Testování řadiče a servisu
AngularJS udržuje logiku odděleně od vrstvy pohledu, což usnadňuje testování ovladačů a služeb.
Kroky:
1. Ve složce aplikace vytvořte soubor s názvem 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. Vytvořte soubor s názvem controller.spec.js ve složce 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);
));
));
Výstup v terminálu:
Závěr
AngularJS aplikace se skládají z modulů. Na aplikační úrovni se jedná o moduly AngularJS. Na úrovni modulu se jedná o služby, továrny, komponenty, směrnice a filtry. Každá z nich je schopna spolu komunikovat prostřednictvím svého externího rozhraní. Zápis testovacích jednotek pro vaši aplikaci AngularJS urychluje proces ladění a vývoje.
Doporučené články
Toto je průvodce testováním jednotky AngularJS. Zde diskutujeme úvod a základy testování jednotek spolu s testovacími nástroji AngularJS a příklad s implementací. Další informace naleznete také v následujících článcích -
- Kariéra v AngularJS
- ReactJs vs AngularJs
- Úhlová JS aplikace
- Kariéra v DevOps