Въведение в тестването на AngularJS Unit
Използвайки AngularJS, вие сте в състояние да изградите невероятни потребителски интерфейси, но когато сложността на вашия проект се увеличи, тестването на единица става важна част. За да подобрите качеството на кода, тестването е много важно. При тестване на модули тестваме функционалност на компонента изолирано, без външни ресурси, например DB, файлове и др. Тестовете на модула се записват лесно и по-бързо се изпълняват. При тестване на устройства не тестваме функционалността на приложение, следователно ниска степен на доверие. AngularJS се състои от различни градивни елементи като услуги, компоненти, директиви и др. За всеки от тях трябва да напишем отделни тестови случаи.
Основи на тестване на единица
- Трябва да следваме чистите практики на кодиране.
- Прилагайте същите принципи като функционалния код.
- Тестовите случаи са малка функция / метод от 10 реда или по-малко.
- Използвайте правилна конвенция за именуване.
- Те носят само една отговорност, т.е. тестват само едно.
AngularJS инструменти за тестване
1) Жасмин
Рамка за разработка за тестване на JavaScript код. Той предоставя функции, които помагат при структурирането на тестовите случаи. Тъй като проектите стават сложни и тестовете нарастват, важно е да се поддържат добре структурирани и документирани, а Жасмин помага да се постигне това. За да използвате Жасмин с Карма, използвайте карма-жасмин тест бегач.
2) Карма
Тестов бегач за писане и изпълнение на тестове на единици при разработване на приложение AngularJS. Повишава производителността на разработчиците. Той ще породи уеб сървър, който зарежда кода на приложението и изпълнява тестовите случаи.
Това е приложение NodeJS, инсталирано през npm / прежда. Може да бъде конфигуриран да работи срещу различни браузъри, за да се гарантира, че приложението работи на всички налични браузъри.
3) Ъглови-макети
AngularJS осигурява ngMock модула, който ни дава макетни тестове. Те се използват за инжектиране и осмиване на AngularJS услуги в единични тестове.
Настройка на околната среда
- Инсталирайте NodeJS във вашата система. (Https://nodejs.org/en/download/).
- Инсталирайте IDE (като VS код, скоби и т.н.).
- Създайте празна папка (тестване на $ mkdir единица) във вашата директория.
- Отворете папката за тестване на устройства във вашата IDE. След това отворете терминала (командния ред) в папката за тестване на вашето устройство.
- В терминала следвайте по-долу командите една по една:
Създайте package.json:
npm initInstall Angular:
npm i ъглова –съхранениеИнсталирайте Karma:
npm i -g karma –save -devИнсталирайте жасмин:
npm i karma-жасмин жасмин-ядро –съхранение -devInstall Ъглови подигравки:
npm i angular-mocks –save -devИнсталирайте браузъра Karma Chrome:
npm i karma-chrome-launcher –save-dev - Създайте две папки, наречени като приложение и тестове в папката за тестване на единица.
- Създайте karma.config.js. В терминала дайте командата по-долу:
карма инит
Ще ви зададе набор от въпроси. Изберете отговорите по-долу за него.
-> Изберете рамката за тестване като Jasmine.
-> Изберете Chrome като браузър.
-> Укажете пътя за вашите js и spec файлове (app / * js и тестове / *. Spec.js)
-> След още няколко въпроса ще бъде направено.
-> Отваряне на karma.config.js файлове и път и плъгини, както е показано по-долу. По-долу е файлът 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
))
)
Папката, структурирана след тези стъпки, трябва да бъде като по-долу:
Пример с изпълнение
Тестване на филтър
Филтрите са методи, които променят данните във формат, който може да се чете от хора. В този модул ще създадем филтър и ще напишем единични тестове за този филтър и ще проверим дали той работи както се очаква.
стъпки:
Създайте файл с име filter.js в папката с приложения.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Сега, нека напишем единичните тестови случаи, за да проверим дали филтърът работи както се очаква или не.
Жасмин рамкови методи
- Опишете (): Определя тестов пакет - група от свързани тестове.
- It (): Определя спецификация или тест.
- Очаквайте (): Тя приема действителна стойност като параметър и е свързана с верига функция.
- Функция на съвпадение: Приема очакваната стойност като параметри. Той е отговорен за докладването на Жасмин, ако очакването е вярно или невярно.
Пример:
toBe ('value'), toContain ('value'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Създайте файл с име 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
));
));
));
За да стартирате теста, дайте командата по-долу в терминала на тестовата папка на устройството.
Карма начало
или можете да зададете „карма старт“ в тест скрипт package.json и да дадете команда по-долу.
npm тест
Това ще отвори браузъра с хром.
Изход в терминал:
Тестване на контролер и сервиз
AngularJS държи логиката отделена от екрана, това прави контролерите и услугите лесни за тестване.
стъпки:
1. Създайте файл с име 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. Създайте файл с име 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);
));
));
Изход в терминал:
заключение
AngularJS приложенията са съставени от модули. На ниво приложение това са модули AngularJS. На ниво модул това са услуги, фабрики, компоненти, директиви и филтри. Всеки от тях е в състояние да комуникира помежду си чрез външния си интерфейс. Писането на тестови казуси за вашето приложение AngularJS ускорява процеса на отстраняване на грешки и разработка.
Препоръчителни статии
Това е ръководство за тестване на AngularJS Unit. Тук обсъждаме въвеждането и основите на тестването на единици заедно с инструментите за тестване AngularJS и пример с изпълнение. Можете също да разгледате следните статии, за да научите повече -
- Кариера в AngularJS
- ReactJs срещу AngularJs
- Ъглово приложение JS
- Кариера в DevOps