Модульне тестування AngularJS: Підручник з Касми Жасмин

Зміст:

Anonim

Однією з найяскравіших особливостей Angular.JS є аспект Тестування. Коли розробники в Google розробляли AngularJS, вони постійно мали на увазі тестування та переконувались, що весь фреймворк AngularJS перевіряється.

У AngularJS тестування зазвичай проводиться за допомогою Karma (фреймворк). Тестування Angular JS можна проводити без Karma, але фреймворк Karma має таку чудову функціональність для тестування коду AngularJS, що має сенс використовувати цей фреймворк.

  • У AngularJS ми можемо виконувати Unit Testing окремо для контролерів та директив.
  • Ми також можемо виконати кінцеве тестування AngularJS, яке тестується з точки зору користувача.

У цьому підручнику ви дізнаєтесь-

  • Введення та встановлення каркасного середовища Karma
    • Встановлення Карма
    • Конфігурація каркасного середовища
  • Тестування контролерів AngularJS
  • Тестування директив AngularJS
  • Наскрізне тестування додатків AngularJS JS

Введення та встановлення каркасного середовища Karma

Karma - це засіб автоматизації тестування, створений командою Angular JS в Google. Першим кроком для використання Karma є встановлення Karma. Karma встановлюється через npm (який є менеджером пакетів, що використовується для простої установки модулів на локальній машині).

Встановлення Карма

Встановлення Karma через npm здійснюється у два етапи.

Крок 1) Виконайте наведений нижче рядок із командного рядка

npm install karma karma-chrome-launcher karma-jasmine

У чому

  1. npm - це утиліта командного рядка для менеджера пакетів вузлів, що використовується для встановлення користувацьких модулів на будь-якій машині.
  2. Параметр install вказує утиліті командного рядка npm про необхідність встановлення.
  3. У командному рядку вказано 3 бібліотеки, необхідні для роботи з кармою
    • Карма - це основна бібліотека, яка буде використовуватися для тестування.
    • karma-chrome-launcher - це окрема бібліотека, яка дозволяє командам karma розпізнавати браузер chrome.
    • карма-жасмин - встановлює жасмин, який є залежною основою для карми.

Крок 2) Наступним кроком є ​​встановлення утиліти командного рядка karma. Це потрібно для виконання команд рядка карми. Утиліта лінії карми буде використана для ініціалізації середовища карми для тестування.

Щоб встановити утиліту командного рядка, виконайте наведений нижче рядок із командного рядка

npm install karma-cli

де,

  1. karma-cli використовується для встановлення інтерфейсу командного рядка для karma, який буде використовуватися для запису команд karma в інтерфейс командного рядка.

Конфігурація каркасного середовища

Наступним кроком є ​​налаштування карми, що можна зробити за допомогою команди

"karma -init"

Після виконання вищевказаного кроку karma створить файл karma.conf.js. Файл, ймовірно, буде виглядати як фрагмент, показаний нижче

files: ['Your application Name'/AngularJS/AngularJS.js','Your application Name'/AngularJS-mocks/AngularJS-mocks.js','lib/app.js','tests/*.js']

Наведені вище файли конфігурації повідомляють двигуну виконання karma про наступні речі

  1. 'Назва вашої програми' - це буде замінено на назву вашої програми.
  2. ' Ім'я вашого додатка' / AngularJS / AngularJS.js ' - Це повідомляє кармі, що ваш додаток залежить від основних модулів в AngularJS
  3. 'Ім'я вашого додатка' / AngularJS-mocks / AngularJS-mocks.js ' - Це вказує кармі використовувати функцію модульного тестування для AngularJS з файлу Angular.JS-mocks.js.
  4. Усі основні файли програми або бізнес-логіки знаходяться у папці lib вашої програми.
  5. Папка тестів міститиме всі модульні тести

Щоб перевірити, чи працює karma, створіть файл з назвою Sample.js, вставте наведений нижче код і помістіть його в тестовий каталог.

describe('Sample test', function() {it('Condition is true', function() {expect('AngularJS').toBe('AngularJS');});});

Вищезазначений код має такі аспекти

  1. Функція опису використовується для опису тесту. У нашому випадку ми даємо опис "Зразок тесту" до нашого тесту.
  2. Функція 'it' використовується для назви тесту. У нашому випадку ми називаємо назву нашого тесту як "Умова істинна". Назва тесту повинна бути значущою.
  3. Комбінація ключового слова 'очікуй' та 'toBe' визначає очікуване та фактичне значення результату тесту. Якщо фактичне та очікуване значення однакові, тоді тест пройде, інакше він не пройде.

Коли ви виконуєте наступний рядок у командному рядку, він виконує наведений вище тестовий файл

KARMA start

Наведений нижче результат взятий з IDE Webstorm, в якому були виконані вищевказані кроки.

  1. Результат надходить у програмі Karma Explorer в межах Webstorm. У цьому вікні показано виконання всіх тестів, які визначені в рамках карми.
  2. Тут ви можете побачити, що наведено опис виконаного тесту, який є "Зразок тесту".
  3. Далі ви можете бачити, що виконується сам тест, який має назву "Умова відповідає дійсності".
  4. Зверніть увагу, оскільки всі тести мають зелену піктограму "Ok", яка символізує проходження всіх тестів.

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

Структура тестування карми також має функціональність для тестування контролерів від кінця до кінця. Це включає тестування об'єкта $ scope, який використовується в контролерах.

Давайте розглянемо приклад того, як ми можемо цього досягти.

У нашому прикладі

Спочатку нам потрібно було б визначити контролер. Цей контролер виконує зазначені нижче кроки

  1. Створіть змінну ідентифікатора і призначте їй значення 5.
  2. Призначте змінну ID об'єкту $ scope.

Наш тест перевірить існування цього контролера, а також перевірить, чи встановлено значення змінної ID об'єкта $ scope 5.

По-перше, нам потрібно переконатись, що існує наступна передумова

    1. Встановіть бібліотеку Angular.JS-mocks через npm. Це можна зробити, виконавши нижченаведений рядок у командному рядку
npm install Angular JS-mocks
  1. Далі слід змінити файл karma.conf.js, щоб переконатися, що для тесту включені правильні файли. У наведеному нижче сегменті просто показано файли, що входять до складу karma.conf.js, який потрібно змінити 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Параметр 'files' в основному повідомляє Karma про всі файли, необхідні для запуску тестів.
  • Для запуску модульних тестів AngularJS потрібні файли AngularJS.js та AngularJS-mocks.js
  • Файл index.js міститиме наш код для контролера
  • Тестова папка буде містити всі наші тести AngularJS

Нижче наведено наш код Angular.JS, який буде зберігатися як файл Index.js у тестовій папці нашого додатку.

Наведений нижче код просто робить наступні дії

  1. Створіть модуль JS Angular, який називається sampleApp
  2. Створіть контролер під назвою AngularJSController
  3. Створіть змінну з назвою ID, надайте їй значення 5 і призначте її об'єкту $ scope
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Після успішного виконання вищевказаного коду наступним кроком буде створення тестового випадку, щоб переконатися, що код було написано та виконано належним чином.

Код нашого тесту буде таким, як показано нижче.

Код буде в окремому файлі ControllerTest.js, який буде розміщено в тестовій папці. Наведений нижче код просто робить наступні ключові речі

  1. Функція beforeEach - Ця функція використовується для завантаження нашого модуля AngularJS.JS під назвою 'sampleApp' перед тестовим запуском. Зверніть увагу, що це ім'я модуля у файлі index.js.

  2. Об'єкт $ controller створюється як макетний об'єкт для контролера '' Angular JSController '', який визначено у нашому файлі index.js. У будь-якому типі Unit Testing макетний об'єкт представляє фіктивний об'єкт, який фактично буде використаний для тестування. Цей макетний об’єкт насправді буде імітувати поведінку нашого контролера.

  3. beforeEach (inject (function (_ $ controller_)) - Це використовується для ін'єкції макетного об'єкта в нашому тесті, щоб він поводився як власне контролер.

  4. var $ scope = {}; Це макетний об’єкт, який створюється для об’єкта $ scope.

  5. контролер var = $ контролер ('AngularJSController', {$ scope: $ scope}); - Тут ми перевіряємо наявність контролера з назвою 'Angular.JSController'. Тут ми також призначаємо всі змінні з нашого об'єкта $ scope у нашому контролері у файлі Index.js об'єкту $ scope у нашому тестовому файлі

  6. Нарешті, ми порівнюємо $ scope.ID з 5

describe('AngularJSController', function() {beforeEach(module('sampleApp'));var $controller;beforeEach(inject(function(_$controller_){$controller = _$controller_;}));describe('$scope.ID', function() {it('Check the scope object', function() {var $scope = {};var controller = $controller('AngularJSController', { $scope: $scope });expect($scope.ID).toEqual(5);});});});

Наведений вище тест буде запущений у браузері karma і дасть той самий результат проходження, що був показаний у попередній темі.

Тестування директив AngularJS

Структура тестування карми також має функціональність для тестування користувацьких директив. Сюди входять шаблони URL-адрес, які використовуються в спеціальних директивах.

Давайте розглянемо приклад того, як ми можемо цього досягти.

У нашому прикладі ми спочатку визначимо спеціальну директиву, яка виконує наступні дії

  1. Створіть модуль AngularJS, який називається sampleApp
  2. Створіть власну директиву з назвою - Guru99
  3. Створіть функцію, яка повертає шаблон із тегом заголовка, який відображає текст "Це тестування AngularJS".
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Після успішного виконання вищезазначеного коду наступним кроком буде створення тестового випадку, щоб переконатися, що код був написаний і виконаний належним чином. Код нашого тесту буде таким, як показано нижче

Код буде в окремому файлі з назвою DirectiveTest.js, який буде розміщено в тестовій папці. Наведений нижче код просто робить наступні ключові речі

  1. Функція beforeEach - Ця функція використовується для завантаження нашого Angular JS модуля під назвою 'sampleApp' перед тестовим запуском.

  2. Служба $ compile використовується для компіляції директиви. Ця послуга є обов'язковою і її потрібно оголосити, щоб Angular.JS міг використовувати її для компіляції нашої користувацької директиви.

  3. $ Rootcope - це основна сфера застосування будь-якої програми AngularJS.JS. Ми бачили об’єкт $ scope контролера в попередніх розділах. Ну, об’єкт $ scope є дочірнім об’єктом об’єкта $ rootcope. Причиною цього є те, що ми вносимо зміни до фактичного тегу HTML у DOM за допомогою нашої спеціальної директиви. Отже, нам потрібно використовувати службу $ rootcope, яка насправді прослуховує або знає, коли в документі HTML відбувається якась зміна.

  4. var element = $ compile (" ") - Це використовується для перевірки того, чи вводиться наша директива належним чином. Назва нашої спеціальної директиви - Guru99, і ми знаємо з глави наших спеціальних директив, що коли директива вводиться в наш HTML, вона буде вводитися як ' '. Отже, це твердження використовується для здійснення такої перевірки.

  5. очікуйте (element.html ()). toContain ("Це тестування AngularJS") - Це використовується для вказівки функції очікування, що вона повинна знайти елемент (у нашому випадку тег div), що містить внутрішній HTML-текст "Це Тестування AngularJS ".

describe('Unit testing directives', function() {var $compile,$rootScope;beforeEach(module('sampleApp'));beforeEach(inject(function(_$compile_, _$rootScope_){$compile = _$compile_;$rootScope = _$rootScope_;}));it('Check the directive', function() {// Compile a piece of HTML containing the directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

Наведений вище тест буде запущений у браузері karma і дасть той самий результат проходження, що був показаний у попередній темі.

Наскрізне тестування додатків AngularJS JS

Структура тестування карми разом із структурою, званою Protractor, має функціональність тестування веб-додатків від кінця до кінця.

Тож це не тільки тестування директив та контролерів, але і тестування всього іншого, що може з’явитися на HTML-сторінці.

Давайте розглянемо приклад того, як ми можемо цього досягти.

У нашому прикладі нижче ми будемо мати програму AngularJS, яка створює таблицю даних за допомогою директиви ng-repeat.

  1. Спочатку ми створюємо змінну під назвою "tutorial" і присвоюємо їй кілька пар ключ-значення за один крок. Кожна пара ключ-значення використовуватиметься як дані при відображенні таблиці. Потім змінна навчального посібника призначається об’єкту сфери, щоб він міг отримати доступ з нашого погляду.
  2. Для кожного рядка даних у таблиці ми використовуємо директиву ng-repeat. Ця директива проходить через кожну пару ключ-значення в об'єкті підручника за допомогою змінної ptutor.
  3. Нарешті, ми використовуємо тег разом із парами значень ключа (ptutor.Name та ptutor.Description) для відображення даних таблиці.


{{ ptutor.Name }}{{ ptutor.Description }}