Bevezetés az AngularJS egység teszteléséhez

Az AngularJS használatával csodálatos felhasználói felületeket építhet fel, de amikor a projekt összetettsége növekszik, az egység tesztelése fontos részévé válik. A kódminőség javítása érdekében a tesztelés nagyon fontos. Az egységtesztelés során az összetevők funkcionalitását elszigetelten teszteljük, külső források nélkül, például DB, fájlok stb. Nélkül. Az egységtesztek egyszerűen írhatók és gyorsabban végrehajthatók. Az egységteszt során nem teszteljük egy alkalmazás funkcionalitását, így alacsony a bizalom. Az AngularJS különféle építőelemeket tartalmaz, például szolgáltatásokat, alkatrészeket, irányelveket stb. Mindegyikhez külön teszt eseteket kell írni.

Az egység tesztelésének alapjai

  1. Követnünk kell a tiszta kódolási gyakorlatokat.
  2. Alkalmazza ugyanazokat az elveket, mint a funkcionális kód.
  3. A teszt esetek egy kicsi vagy legfeljebb 10 soros függvény / módszer.
  4. Használjon megfelelő elnevezési megállapodást.
  5. Csak egyetlen felelősségük van, azaz csak egy dolgot tesztelnek.

AngularJS tesztelő eszközök

1) Jázmin

Fejlesztési keret a javascript kód teszteléséhez. Funkciókat nyújt, amelyek segítenek a teszt esetek strukturálásában. Ahogy a projektek összetettek és a tesztek egyre növekszenek, fontos, hogy azokat jól felépítsék és dokumentálják, és Jasmine segít ennek elérésében. A Jasmine és a Karma használatához használja a karma-jasmine tesztfutót.

2) Karma

Teszt futó egységteszt írására és futtatására az AngularJS alkalmazás fejlesztése közben. Növeli a fejlesztők termelékenységét. Létrehoz egy webkiszolgálót, amely betölti az alkalmazás kódját és végrehajtja a teszt eseteit.
Ez egy NodeJS alkalmazás, amely az npm / fonala keresztül van telepítve. Konfigurálható úgy, hogy különféle böngészőkkel futtassa, így biztosítva, hogy az alkalmazás minden elérhető böngészőn működjön.

3) Szög-Mocks

Az AngularJS biztosítja az ngMock modult, amely modell teszteket ad nekünk. Ezeket az AngularJS szolgáltatásokat injektálják és gúnyolják egységtesztekben.

Környezetbeállítás

  1. Telepítse a NodeJS rendszert. (Https://nodejs.org/en/download/).
  2. Telepítsen bármilyen IDE-t (például VS kód, zárójel stb.).
  3. Hozzon létre egy üres mappát ($ mkdir unit testing) a könyvtárban.
  4. Nyissa meg az IDE egység tesztelési mappáját. Ezután nyissa meg a terminált (parancssor) az egység tesztelési mappájában.
  5. A terminálon kövesse egyenként az alábbi parancsokat:
    Hozzon létre a package.json fájlt:
    npm initInstall szög:
    npm i szög - mentésA Karma telepítése:
    npm i -g karma - mentés -devTelepítsük a Jasmine-t:
    npm i karma-jasmine jasmine-core –save -devInstall Szögletes gúnyolódások:
    npm i szögletes-gúnyos - mentés -devA Karma Chrome böngésző telepítése:
    npm i karma-króm-indító - mentett-dev
  6. Hozzon létre két alkalmazás- és tesztelési mappát az egységteszt-mappában.
  7. Hozzon létre karma.config.js fájlt. A terminálon adja meg az alábbi parancsot:
    karma init
    Ez feltesz egy kérdést. Válassza ki az alábbi válaszokat.
    -> Válassza ki a tesztelési keretet Jasmine-ként.
    -> Válasszon böngészőként a Chrome-ot.
    -> Adja meg a js és spec fájlok elérési útját (app / * js and tests / *. Spec.js)
    -> További néhány kérdés után megtörténik.
    -> Nyissa meg a karma.config.js fájlokat, elérési utat és plugineket az alább látható módon. Az alábbiakban található a karma.config.js fájl.

// 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
))
)

Az alábbi lépések után felépített mappa az alábbiak szerint alakítható ki:

Példa a megvalósításra

Szűrő tesztelése

A szűrők olyan módszerek, amelyek az adatokat ember által olvasható formátumra változtatják. Ebben a modulban létrehozunk egy szűrőt, és a szűrőbe írjuk az egység tesztjeit, és ellenőrizzük, hogy a várt módon működik-e.
Lépések:

Hozzon létre egy filter.js nevű fájlt az alkalmazás mappájába.

filter.js

angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))

Írjuk le az egység tesztjeit annak ellenőrzésére, hogy a szűrő a várt módon működik-e vagy sem.

Jázmin keretrendszerek

  • Leírni (): meghatározza a tesztkészletet - a kapcsolódó tesztek egy csoportját.
  • It (): meghatároz egy specifikációt vagy tesztet.
  • Várható (): Egy tényleges értéket vesz paraméterként, és egy láncolt egy illesztőprogram funkcióval.
  • Matcher funkció: a várt értéket veszi paraméterként. Feladata a Jasmine-nak való jelentéstétel, ha az elvárás igaz vagy hamis.

Példa:

toBe ('érték'), toContain ('érték'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().

Hozzon létre egy filter.spec.js nevű fájlt a tesztmappába.

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
));
));
));

A teszt futtatásához adja meg az alábbi parancsot az egységteszt-mappa terminálján.
Karma indul
vagy beállíthatja a „karma start” beállítást a package.json teszt szkriptben, és megadhatja az alábbi parancsot.
npm teszt

Ezzel megnyílik a króm böngésző.

Kimenet a terminálon:

Vezérlő és szolgáltatás tesztelése

Az AngularJS külön tartja a logikát a nézetrétegtől, ez megkönnyíti a vezérlők és szolgáltatások tesztelését.
Lépések:
1. Hozzon létre egy controller.js nevű fájlt az alkalmazás mappájába.

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. Hozzon létre egy kontroller.spec.js nevű fájlt a tesztmappába.

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);
));
));

Kimenet a terminálon:

Következtetés

Az AngularJS alkalmazások modulokból állnak. Alkalmazási szinten ezek AngularJS modulok. Modulszinten ezek szolgáltatások, gyárak, alkatrészek, irányelvek és szűrők. Mindegyik képes a külső interfészen keresztül kommunikálni egymással. Az AngularJS alkalmazás számára az egység teszt esetek írása felgyorsítja a hibakeresési és fejlesztési folyamatot.

Ajánlott cikkek

Ez egy útmutató az AngularJS egység teszteléséhez. Itt tárgyaljuk az egységteszt bevezetését és alapjait, valamint az AngularJS tesztelési eszközöket és példát a megvalósításra. A következő cikkeket is megnézheti további információkért -

  1. Karrier az AngularJS-ben
  2. ReactJs vs AngularJs
  3. Szög JS alkalmazás
  4. Karrier a DevOps-ban

Kategória: