✅ Тестування блоку AngularJS - Основи одиничного тестування

Вступ до тестування модулів AngularJS

Вступ до тестування модулів AngularJS

За допомогою AngularJS ви можете створити дивовижні користувацькі інтерфейси, але коли складність вашого проекту зростає, тестування модулів стає важливою складовою. Для покращення якості коду дуже важливо тестування. Під час тестування підрозділів ми перевіряємо функціональність компонента ізольовано, без будь-яких зовнішніх ресурсів, наприклад, БД, файли тощо. Тестові одиниці легко записуються та швидші у виконанні. Під час тестування одиниць ми не тестуємо функціональність програми, отже, низька впевненість. AngularJS складається з різних будівельних блоків, таких як служби, компоненти, директиви тощо. Для кожного з них нам потрібно написати окремі тестові приклади.

Основи одиничного тестування

Нам потрібно дотримуватися чистої практики кодування.
Застосовуйте ті самі принципи, що і функціональний код.
Тестові приклади - це невелика функція / метод, що становить 10 ліній або менше.
Використовуйте належну конвенцію про іменування.
Вони несуть лише одну відповідальність, тобто перевіряють лише одне.

Інструменти для тестування AngularJS

1) Жасмін

Рамка розробки для тестування коду JavaScript. Він надає функції, що допомагають в структуруванні тестових випадків. Оскільки проекти стають складними, а тести ростуть, важливо підтримувати їх структурованість та документацію, а Жасмін допомагає досягти цього. Щоб використовувати Жасмін разом з Кармою, використовуйте тест-карман-жасмін.

2) Карма

Тестовий бігун для написання та запуску тестових одиниць під час розробки програми AngularJS. Це збільшує продуктивність розробників. Він породжує веб-сервер, який завантажує код програми та виконує тестові випадки.
Це додаток NodeJS, встановлений через npm / пряжу. Його можна налаштувати для роботи з різними браузерами, щоб забезпечити роботу програми у всіх доступних браузерах.

3) Кутово-макети

AngularJS забезпечує модуль ngMock, який дає нам макетні тести. Вони використовуються для ін'єкцій та знущань над послугами AngularJS в одиничних тестах.

Налаштування навколишнього середовища

Встановіть NodeJS у вашу систему. (https://nodejs.org/en/download/).
Встановіть будь-який IDE (наприклад, код VS, дужки тощо).
Створіть у своєму каталозі порожню папку (тестування $ mkdir unit).
Відкрийте папку тестування одиниць у вашій IDE. Потім відкрийте термінал (командний рядок) всередині папки тестування пристрою.
У терміналі виконайте наступні команди по черзі:
Створіть package.json:
npm initInstall Angular:
npm i кутова –зберегтиВстановити карму:
npm i -g karma –save -devУстановити Жасмін:
npm я карма-жасмин жасмин ядро –зберегти -dev Встановити Кутові макети:
npm i angular-mocks –save -devУстановити браузер Karma Chrome:
npm i karma-chrome-launcher –save-dev
Створіть дві папки, названі як додаток та тести, всередині папки тестування пристрою.
Створіть karma.config.js. У терміналі дайте команду нижче:
карма ініт
Він задасть вам набір питань. Виберіть відповіді нижче.
-> Виберіть рамку тестування як Жасмін.
-> Виберіть Chrome як браузер.
-> Вкажіть шлях для ваших js та специфікаційних файлів (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 тест

Це відкриє браузер Chrome.

Вихід у терміналі:

Тестування контролера та сервісного обслуговування

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 - Основи одиничного тестування - Інструменти