Модульне тестування AngularJS: підручник Karma Jasmine

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

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

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

Введення та встановлення фреймворку 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.
    • karma — основна бібліотека, яка використовуватиметься для тестування.
    • karma-chrome-launcher — це окрема бібліотека, яка дозволяє браузеру chrome розпізнавати команди karma.
    • karma-jasmine – це встановлює jasmine, який є залежною структурою для Karma.

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

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

npm install karma-cli

де,

  • karma-cli використовується для встановлення інтерфейсу командного рядка для karma, який використовуватиметься для написання команд karma в інтерфейсі командного рядка.
  • Конфігурація каркаса 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» – Це повідомляє karma використовувати функцію модульного тестування для AngularJS з файлу Angular.JS-mocks.js.
    4. Усі основні файли програми або бізнес-логіки присутні в папці lib вашої програми.
    5. Папка tests міститиме всі модульні тести.

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

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

    Наведений вище код має такі аспекти

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

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

    KARMA start

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

    Конфігурація Karma Framework

    1. Результат надходить у провідник карми Webstorm. Це вікно показує виконання всіх тестів, які визначені в структурі karma.
    2. Тут ви можете побачити, що показано опис виконаного тесту, тобто «Зразок тесту».
    3. Далі ви можете побачити, що виконується сам тест, який має назву «Умова вірна».
    4. Зауважте, що, оскільки всі тести мають зелену піктограму «ОК», яка символізує, що всі тести пройдено.

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

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

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

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

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

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

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

    Спочатку нам потрібно переконатися, що наступні передумови є на місці

    Встановіть бібліотеку Angular.JS-mocks через npm. Це можна зробити, виконавши наведений нижче рядок у командному рядку

    npm install Angular JS-mocks

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

    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
    • Параметр «files» в основному повідомляє Karma про всі файли, які потрібні для виконання тестів.
    • Файли AngularJS.js і AngularJS-mocks.js потрібні для запуску модульних тестів AngularJS
    • Файл index.js міститиме наш код для контролера
    • Папка test міститиме всі наші тести AngularJS

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

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

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

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

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

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

    1. Функція beforeEach – ця функція використовується для завантаження нашого модуля AngularJS.JS під назвою «sampleApp» перед тестовим запуском. Зауважте, що це ім’я модуля у файлі index.js.
    2. Об’єкт $controller створюється як макет об’єкта для контролера «Angular JSController», який визначено в нашому файлі index.js. У будь-якому типі модульного тестування макетний об’єкт представляє фіктивний об’єкт, який фактично буде використано для тестування. Цей макет об’єкта фактично імітуватиме поведінку нашого контролера.
    3. beforeEach(inject(function(_$controller_) – це використовується для введення макетного об’єкта в нашому тесті, щоб він поводився як справжній контролер.
    4. var $scope = {}; Це макет об’єкта, який створюється для об’єкта $scope.
    5. var controller = $controller('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: '<h1>This is AngularJS Testing</h1>'
        };
    });

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

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

    1. Функція beforeEach – Ця функція використовується для завантаження нашого модуля Angular JS під назвою «sampleApp» перед тестовим запуском.
    2. Служба $compile використовується для компіляції директиви. Цей сервіс є обов’язковим і його потрібно оголосити, щоб Angular.JS міг використовувати його для компіляції нашої спеціальної директиви.
    3. $rootscope є основною областю будь-якої програми AngularJS.JS. Ми бачили об’єкт $scope контролера в попередніх розділах. Що ж, об’єкт $scope є дочірнім об’єктом об’єкта $rootscope. Причина, по якій це оголошено тут, полягає в тому, що ми вносимо зміни до фактичного тегу HTML у DOM за допомогою нашої спеціальної директиви. Отже, нам потрібно використовувати службу $rootscope, яка фактично прослуховує або знає, коли відбуваються будь-які зміни всередині документа HTML.
    4. var element = $compile(“ ”) – це використовується, щоб перевірити, чи наша директива впроваджується належним чином. Ім’я нашої спеціальної директиви — Guru99, і ми знаємо з розділу про спеціальні директиви, що коли директива вставляється в наш HTML, вона буде впроваджена як ' '. Тому цей оператор використовується для перевірки.
    5. expect(element.html()).toContain(“Це тестування AngularJS”) – це використовується для вказівки функції очікування, що вона має знайти елемент (у нашому випадку тег div), який містить текст innerHTML “Це Тестування 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 directive
        var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
        $rootScope.$digest();
        expect(element.html()).toContain("This is AngularJS Testing");
      });
    });

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

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

    Фреймворк для тестування karma разом із фреймворком під назвою Protractor має функціональні можливості тестування веб-програми наскрізь.

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

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

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

    1. Спочатку ми створюємо змінну під назвою «tutorial» і призначаємо їй кілька пар ключ-значення за один крок. Кожна пара ключ-значення використовуватиметься як дані під час відображення таблиці. Змінна підручника потім призначається об’єкту scope, щоб до нього можна було отримати доступ із нашого подання.
    2. Для кожного рядка даних у таблиці ми використовуємо директиву ng-repeat. Ця директива проходить через кожну пару ключ-значення в об’єкті області підручника за допомогою змінної ptutor.
    3. Нарешті, ми використовуємо разом із парами ключ-значення (ptutor.Name і ptutor.Description), щоб відобразити дані таблиці.
    <table >
                 <tr ng-repeat="ptutor in tutorial">
                       <td>{{ ptutor.Name }}</td>
    	               <td>{{ ptutor.Description }}</td>
                 </tr>
       </table>
    </div>
      <script type="text/javascript">
          var app = AngularJS.module('DemoApp', []);
            app.controller('DemoController', function($scope) {
               $scope.tutorial =[
                    {Name: "Controllers" , Description : "Controllers in action"},
                    {Name: "Models" , Description : "Models and binding data"},
    	            {Name: "Directives" , Description : "Flexibility of Directives"}
    			]   });

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

    Наш тест фактично перевірить директиву ng-repeat і переконається, що вона містить 3 рядки даних, як і повинно бути з наведеного вище прикладу.

    Спочатку нам потрібно переконатися, що наступні передумови є на місці

    Встановіть бібліотеку транспортира через npm. Це можна зробити, виконавши наведений нижче рядок у командному рядку

    "npm install protractor"

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

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

    1. Функція браузера надається бібліотекою транспортира та передбачає, що наша програма AngularJS (з кодом, показаним вище) працює за URL-адресою нашого сайту – http://localhost:8080/Guru99/
    2. var list=element.all(by.repeater(ptutor in tutorial')); - Цей рядок коду фактично отримує директиву ng-repeat, яка заповнюється кодом «ptutor in tutorial». Елемент і by.repeater — це спеціальні ключові слова, надані бібліотекою транспортира, які дозволяють нам отримати деталі директиви ng-repeat.
    3. очікувати (list.count()).toEqual(3); – Нарешті, ми використовуємо функцію очікування, щоб побачити, що ми справді отримуємо 3 елементи, які заповнюються в нашій таблиці в результаті директиви ng-repeat.
    Describe('Unit testing end to end', function() {
      beforeEach(function() {
    browser.get('http://localhost:8080/Guru99/');
    })
       it('Check the ng directive', function() {
          var list=element.all(by.repeater(ptutor in tutorial'));
          expect(list.count()).toEqual(3);  }); });

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

    Підсумки

    • Тестування в AngularJS здійснюється за допомогою фреймворку karma, розробленого самим Google.
    • Фреймворк karma встановлюється за допомогою менеджера пакетів вузлів. Ключові модулі, які необхідно встановити для базового тестування, це karma, karma-chrome-launcher, karma-jasmine і karma-cli.
    • Тести записуються в окремих файлах js, які зазвичай зберігаються в тестовій папці вашої програми. Розташування цих тестових файлів має бути зазначено в спеціальному конфігураційному файлі під назвою karma.conf.js. Karma використовує цей файл конфігурації під час виконання всіх тестів.
    • Karma також можна використовувати для тестування контролерів і спеціальних директив.
    • Для наскрізного веб-тестування іншу структуру під назвою транспортир потрібно встановити через менеджер пакетів Node. Цей фреймворк надає спеціальні методи, які можна використовувати для перевірки всіх елементів на сторінці HTML.