Увод у АнгуларЈС тестирање јединица

Коришћењем АнгуларЈС ви сте у могућности да направите невероватне корисничке интерфејсе, али када се сложеност вашег пројекта повећа, тестирање јединице постаје важан део. Да бисте побољшали квалитет вашег кода, тестирање је веома важно. Код тестирања јединица тестирамо функционалност компонената изоловано, без икаквих спољних ресурса, на пример ДБ, датотека итд. Јединствени тестови се лако пишу и бржи су у извођењу. При тестирању јединица не тестирамо функционалност апликације, па према томе имамо ниско поуздање. АнгуларЈС се састоји од различитих грађевних блокова као што су сервиси, компоненте, директиве итд. За сваки од њих морамо написати одвојене тест случајеве.

Основе испитивања јединице

  1. Морамо да следимо чисте праксе кодирања.
  2. Примените исте принципе као и функционални код.
  3. Тест случајеви су мала функција / метода од 10 линија или мање.
  4. Користите одговарајућу конвенцију о именовању.
  5. Они имају само једну одговорност, односно тестирају само једну ствар.

АнгуларЈС Алати за тестирање

1) Јасмин

Развојни оквир за тестирање ЈаваСцрипт кода. Омогућава функције које помажу у структурирању тест случајева. Како пројекти постају сложени и тестови расту, важно је да их добро структуира и документује, а Јасмине помаже да се то постигне. Да бисте Јасмин користили са Кармом, користите карма-јасмин тест тркач.

2) Карма

Испитни покретач за писање и покретање тестова јединице током развоја АнгуларЈС апликације. Повећава продуктивност програмера. На њему ће се родити веб сервер који учитава апликацијски код и извршава тест случајеве.
То је НодеЈС апликација инсталирана путем нпм / преје. Може се конфигурирати за покретање на различитим прегледачима како би се осигурало да апликација ради на свим доступним прегледачима.

3) Угаоно-ругалски

АнгуларЈС обезбеђује нгМоцк модул, који нам даје подругљиве тестове. Користе се за убризгавање и исмевање АнгуларЈС услуга у јединственим тестовима.

Подешавање окружења

  1. Инсталирајте НодеЈС на свој систем. (хттпс://нодејс.орг/ен/довнлоад/).
  2. Инсталирајте било који ИДЕ (попут ВС кода, заграде и сл.).
  3. Креирајте празну фасциклу ($ мкдир унит тестинг) у вашем директоријуму.
  4. Отворите фасциклу за тестирање јединице у ИДЕ. Затим отворите терминал (наредбени редак) унутар мапе за тестирање јединице.
  5. На терминалу следите наредне наредбе једну по једну:
    Креирајте пацкаге.јсон:
    нпм инитИнсталл Ангулар:
    нпм и угаоно –уштедите Инсталацију Карме:
    нпм и -г карма –сава -дев инсталирајте јасмин:
    нпм и карма-јасмин јасмин-језгра –сава -девИнсталл Ангулар руга:
    нпм и ангулар-моцкс –саве -девИнсталирај Карма Цхроме прегледач:
    нпм и карма-хром-бацач –саве-дев
  6. Направите две мапе назване апп и тестови унутар мапе за тестирање јединице.
  7. Креирајте карма.цонфиг.јс. У терминалу дајте команду испод:
    карма инит
    Поставит ће вам сет питања. Изаберите следеће одговоре за то.
    -> Изаберите оквир за тестирање као Јасмине.
    -> Изаберите Цхроме као прегледач.
    -> Наведите пут за своје јс и спец датотеке (апп / * јс и тестови / *. Спец.јс)
    -> Након још неколико питања биће завршено.
    -> Отворите карма.цонфиг.јс датотеке и пут и додатке као што је приказано испод. Испод је карма.цонфиг.јс датотека.

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

Мапа која је организована након ових корака треба да буде следећа:

Пример са имплементацијом

Тестирање филтра

Филтри су методе које мењају податке у људски читљив формат. У овом модулу направићемо филтер и написати тестове јединице за тај филтер и проверити да ли ради како се очекује.
Кораци:

Креирајте датотеку под називом филтер.јс у мапи апликације.

филтер.јс

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

Сада напишемо јединице тестних случајева како бисмо проверили да ли филтер ради како се очекује или не.

Јасмине Оквирне методе

  • Опишите (): Дефинише тест скуп - групу повезаних тестова.
  • Ит (): дефинише спецификацију или тест.
  • Очекујте (): Узима стварну вредност као параметар и веже је функцијом подударности.
  • Матцхер функција: Узима очекивану вриједност као параметре. Одговорна је за пријављивање Јасмине да ли је очекивање тачно или лажно.

Пример:

тоБе ('валуе'), тоЦонтаин ('валуе'), тоЕкуал (12), тоБеНулл (), тоБеТрутхи (), тоБеДефинед ().

Креирајте датотеку под називом филтер.спец.јс у фасцикли тестова.

филтер.спец.јс

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

Да бисте покренули тест, дајте наредбу испод у терминалу јединице за тестирање јединице.
Карма старт
или можете подесити „карма старт“ у сцрипт.јсон тест скрипти и дати наредбу испод.
нпм тест

Ово ће отворити Цхроме прегледач.

Излаз у терминалу:

Тестирање контролера и сервиса

АнгуларЈС држи логику одвојеном од слоја приказа, што контролерима и услугама чини лако тестирање.
Кораци:
1. Направите датотеку под називом цонтроллер.јс у фасцикли апликација.

цонтроллер.јс

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. Направите датотеку под називом цонтроллер.спец.јс у фасцикли тестова.

цонтроллер.спец.јс

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

Излаз у терминалу:

Закључак

АнгуларЈС апликације се састоје од модула. На нивоу апликације, то су АнгуларЈС модули. На нивоу модула то су услуге, фабрике, компоненте, директиве и филтери. Свака од њих је у могућности да комуницира међусобно преко свог спољног интерфејса. Писање тестних случајева за вашу апликацију АнгуларЈС убрзава процес уклањања погрешака и развоја.

Препоручени чланци

Ово је водич за АнгуларЈС тестирање јединица. Овде смо разговарали о увођењу и основама испитивања јединица заједно са АнгуларЈС алатима за тестирање и примером примене. Такође можете погледати следеће чланке да бисте сазнали више -

  1. Каријера у АнгуларЈС
  2. РеацтЈс вс АнгуларЈс
  3. Угаона ЈС апликација
  4. Каријера у развоју

Категорија: