✅ Модульное тестирование AngularJS - Основы юнит-тестирования

Введение в модульное тестирование AngularJS

Введение в модульное тестирование AngularJS

Используя AngularJS, вы можете создавать удивительные пользовательские интерфейсы, но когда сложность вашего проекта возрастает, модульное тестирование становится важной частью. Чтобы улучшить качество вашего кода, тестирование очень важно. В модульном тестировании мы тестируем функциональность компонента изолированно, без каких-либо внешних ресурсов, таких как БД, файлы и т. Д. Модульные тесты просты в написании и быстрее выполняются. В модульном тестировании мы не тестируем функциональность приложения, следовательно, низкая достоверность. AngularJS состоит из различных строительных блоков, таких как сервисы, компоненты, директивы и т. Д. Для каждого из них нам нужно написать отдельные контрольные примеры.

Основы юнит-тестирования

Мы должны следовать чистым методам кодирования.
Применяйте те же принципы, что и функциональный код.
Тестовые случаи представляют собой небольшую функцию / метод из 10 строк или менее.
Используйте правильное соглашение об именах.
Они несут только одну ответственность, т.е. проверяют только одну вещь.

Инструменты тестирования AngularJS

1) жасмин

Разработка фреймворка для тестирования кода JavaScript. Он предоставляет функции, которые помогают структурировать контрольные примеры. По мере того, как проекты становятся сложными, а тесты растут, важно сохранять их хорошо структурированными и задокументированными, и Жасмин помогает достичь этого. Чтобы использовать Жасмин с Кармой, используйте тестер карма-жасмин.

2) Карма

Тестовый прогон для написания и запуска модульных тестов при разработке приложения AngularJS. Это увеличивает производительность разработчиков. Он породит веб-сервер, который загружает код приложения и выполняет тестовые случаи.
Это приложение NodeJS, установленное через npm / yarn. Его можно настроить для работы с различными браузерами, чтобы приложение работало во всех доступных браузерах.

3) Angular-Mocks

AngularJS предоставляет модуль ngMock, который дает нам фиктивные тесты. Они используются для внедрения и проверки сервисов AngularJS в модульных тестах.

Настройка среды

Установите NodeJS в вашей системе. (Https://nodejs.org/en/download/).
Установите любую IDE (например, код VS, скобки и т. Д.).
Создайте пустую папку ($ mkdir unit testing) в вашем каталоге.
Откройте папку модульного тестирования в вашей IDE. Затем откройте терминал (командную строку) в папке вашего модуля тестирования.
В терминале следуйте приведенным ниже командам одна за другой:
Создайте package.json:
npm initInstall Angular:
npm i angular –saveInstall Карма:
npm я -g карма -save -devInstall Жасмин:
npm i karma-jasmine jasmine-core -save -devInstall Угловые насмешки:
npm i angular-mocks –save -devУстановить браузер Karma Chrome:
нпм и карма-хром-лаунчер-спас-дев
Создайте две папки с именем app и tests внутри папки модульного тестирования.
Создайте karma.config.js. В терминале дайте ниже команду:
карма иници
Он задаст вам множество вопросов. Выберите ответы ниже для этого.
-> Выберите рамки тестирования как Жасмин.
-> Выберите Chrome в качестве браузера.
-> Укажите путь для ваших файлов js и spec (app / * js и tests / *. 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; ) )))

Теперь давайте напишем примеры модульных тестов, чтобы проверить, работает ли фильтр должным образом или нет.

Методы Жасминовой Рамки

Describe (): определяет набор тестов - группу связанных тестов.
It (): определяет спецификацию или тест.
Expect (): принимает фактическое значение в качестве параметра и связывает его с функцией соответствия.
Функция Matcher: принимает ожидаемое значение в качестве параметров. Он отвечает за сообщение Жасмин, если ожидание верно или ложно.

Пример:

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 - Основы юнит-тестирования - инструменты