Inleiding tot het testen van AngularJS-eenheden
Met AngularJS kunt u verbluffende gebruikersinterfaces bouwen, maar wanneer de complexiteit van uw project toeneemt, wordt unit testing een belangrijk onderdeel. Om uw codekwaliteit te verbeteren, is testen erg belangrijk. Bij het testen van eenheden testen we afzonderlijk een componentfunctionaliteit, zonder externe bronnen, bijvoorbeeld DB, bestanden, enz. Eenheidstests zijn eenvoudig te schrijven en kunnen sneller worden uitgevoerd. Bij het testen van eenheden testen we niet de functionaliteit van een app, dus weinig vertrouwen. AngularJS bestaat uit verschillende bouwstenen zoals services, componenten, richtlijnen, enz. Voor elk van hen moeten we afzonderlijke testcases schrijven.
Basisprincipes van het testen van eenheden
- We moeten schone coderingsmethoden volgen.
- Pas dezelfde principes toe als de functionele code.
- Testgevallen zijn een kleine functie / methode van 10 regels of minder.
- Gebruik een juiste naamgevingsconventie.
- Ze hebben slechts een enkele verantwoordelijkheid, dwz test slechts één ding.
AngularJS testtools
1) Jasmijn
Ontwikkelingskader voor het testen van JavaScript-code. Het biedt functies die helpen bij het structureren van testgevallen. Naarmate de projecten complexer worden en de tests groeien, is het belangrijk ze goed gestructureerd en gedocumenteerd te houden, en Jasmine helpt dit te bereiken. Om Jasmine met Karma te gebruiken, gebruikt u de karma-jasmine-testloper.
2) Karma
Een testloper voor het schrijven en uitvoeren van unit-tests tijdens het ontwikkelen van de AngularJS-applicatie. Het verhoogt de productiviteit van ontwikkelaars. Het zal een webserver spawnen die de applicatiecode laadt en de testgevallen uitvoert.
Het is een NodeJS-applicatie geïnstalleerd via npm / garen. Het kan worden geconfigureerd om te worden uitgevoerd met verschillende browsers om ervoor te zorgen dat de toepassing op alle beschikbare browsers werkt.
3) Hoekige spots
AngularJS biedt de ngMock-module, die ons proefexamens geeft. Ze worden gebruikt om AngularJS-services in unit-tests te injecteren en te bespotten.
Omgeving instellen
- Installeer NodeJS op uw systeem. (Https://nodejs.org/en/download/).
- Installeer elke IDE (zoals VS-code, haakjes, enz.).
- Maak een lege map ($ mkdir-eenheid testen) in uw map.
- Open de map voor het testen van eenheden in uw IDE. Open vervolgens de terminal (opdrachtprompt) in de map voor het testen van uw unit.
- Volg in de terminal de onderstaande opdrachten een voor een:
Maak package.json:
npm initInstall Angular:
npm i angular –save Karma installeren:
npm i -g karma –save -dev Installeer Jasmine:
npm i karma-jasmine jasmine-core –save -devInstall Angular mocks:
npm i angular-mocks –save -devInstall Karma Chrome-browser:
npm i karma-chrome-launcher –save-dev - Maak twee mappen met de naam app en test in de testmap van de unit.
- Maak karma.config.js. Geef in de terminal het onderstaande commando op:
karma init
Het zal je een aantal vragen stellen. Selecteer de onderstaande antwoorden ervoor.
-> Selecteer het testraamwerk als Jasmine.
-> Selecteer Chrome als browser.
-> Geef het pad op voor uw js en spec-bestanden (app / * js en tests / *. Spec.js)
-> Na nog een paar vragen is het klaar.
-> Open karma.config.js bestanden en pad en plug-ins zoals hieronder getoond. Hieronder staat het bestand 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
))
)
De map die na deze stappen is gestructureerd, moet er als volgt uitzien:
Voorbeeld met implementatie
Een filter testen
Filters zijn methoden die gegevens veranderen in een voor mensen leesbaar formaat. In deze module zullen we een filter maken en eenheidstests voor dat filter schrijven en controleren of het werkt zoals verwacht.
Stappen:
Maak een bestand met de naam filter.js in de app-map.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Laten we nu de unit-testcases schrijven om te controleren of het filter werkt zoals verwacht of niet.
Jasmine Framework Methods
- Beschrijf (): het definieert een testpakket - een groep gerelateerde tests.
- It (): definieert een specificatie of test.
- Verwachten (): het neemt een werkelijke waarde als parameter en wordt gekoppeld aan een matcher-functie.
- Matcher-functie: neemt de verwachte waarde als parameters. Het is verantwoordelijk voor het rapporteren aan Jasmine als de verwachting waar of onwaar is.
Voorbeeld:
toBe ('value'), toContain ('value'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Maak een bestand met de naam filter.spec.js in de testmap.
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
));
));
));
Om de test uit te voeren, geeft u onderstaande opdracht in de terminal van de map voor het testen van de eenheid.
Karma start
of u kunt "karma start" instellen in het testscript package.json en onderstaande opdracht geven.
npm-test
Hiermee wordt de Chrome-browser geopend.
Uitgang in terminal:
Een controller en service testen
AngularJS houdt logica gescheiden van de beeldlaag, dit maakt controllers en services eenvoudig te testen.
Stappen:
1. Maak een bestand met de naam controller.js in de app-map.
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. Maak een bestand met de naam controller.spec.js in de testmap.
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);
));
));
Uitgang in terminal:
Conclusie
AngularJS-applicaties bestaan uit modules. Op applicatieniveau zijn dit AngularJS-modules. Op moduleniveau zijn dit services, fabrieken, componenten, richtlijnen en filters. Elk van hen kan met elkaar communiceren via de externe interface. Het schrijven van testgevallen voor uw AngularJS-applicatie versnelt uw debug- en ontwikkelingsproces.
Aanbevolen artikelen
Dit is een handleiding voor het testen van AngularJS-eenheden. Hier bespreken we de introductie en de basisprincipes van het testen van eenheden samen met de AngularJS testtools en het voorbeeld met implementatie. U kunt ook de volgende artikelen bekijken voor meer informatie -
- Carrière in AngularJS
- ReactJs vs AngularJs
- Hoekige JS-toepassing
- Carrière in DevOps