Меню

Підручник з Karma: Тестування модулів інтерфейсу з використанням програми Test Karma

  • Головна
  • Інший
  • Підручник з Karma: Тестування модулів інтерфейсу з використанням програми Test Karma

karma tutorial front end unit testing using karma test runner

Спробуйте Наш Інструмент Для Усунення Проблем

Цей посібник пояснює, як налаштувати Karma та автоматизувати тестування інтерфейсного блоку за допомогою Karma, основні параметри конфігурації для файлу Karma.conf.js тощо:

Цей підручник пояснює процедуру автоматизації модульного тестування інтерфейсу програмного забезпечення за допомогою Karma та деяких пов'язаних з ним інструментів.

Ми почнемо з веб-додатків, розроблених із використанням бібліотеки JavaScript: «Jquery» та середовища виконання JavaScript: «NodeJS»; а пізніше ми розглянемо деякі фреймворки JavaScript, такі як AngularJS та ReactJS.

=>ПРОКРУТИ ВНИЗщоб переглянути повний перелік підручників з Карма

Вступ до Кари

Що ви дізнаєтесь:

Перелік навчальних посібників з карми

Підручник No1: Підручник з Karma: Тестування модулів інтерфейсу з використанням програми Test Karma
Підручник No2: Підручник з рамки жасмину, що включає жасминові джакурі з прикладами
Підручник No3: Зразок проекту з тестування модулів інтерфейсу з використанням KARMA та JASMINE

Огляд навчальних посібників з карми у цій серії

Підручник №Що ви дізнаєтесь
Підручник_1: Підручник з Karma: Тестування модулів інтерфейсу з використанням програми Test Karma
Цей вступний підручник пояснює все про те, як налаштувати Karma та автоматизувати інтерфейсне тестування модулів за допомогою Karma, основні параметри конфігурації файлу Karma.conf.js тощо.
Підручник_2: Підручник з рамки жасмину, що включає жасминові джакурі з прикладами
Цей підручник охоплює структуру тестування жасмину та її конструкції. Також дізнайтеся про пакет Jasmine-Jquery, який поширює Jasmine на тестування програм Jquery.
Підручник_3: Зразок проекту з тестування модулів інтерфейсу з використанням KARMA та JASMINE
Цей підручник показує, як написати тестові специфікації для зразкового проекту за допомогою Karma & Jasmine. Ви також швидко дізнаєтесь, як користуватися іншими інструментами, такими як ковтання, браузер.

Що таке фронтальне тестування модулів?

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

Єдиний спосіб забезпечити це - це писати та виконувати тести за кодами розробника. Результат повинен бути прийнятий як якісний інтерфейсний код / ​​функція лише тоді, коли всі ці результати тестування перебувають у стані 'проходження'.

Модульне тестування - це різновид методу тестування програмного забезпечення, при якому кожна окрема та незалежна частина вихідного коду тестується, щоб визначити, чи є він достатньо хорошим для використання.

Коли ми виконати це модульне тестування на інтерфейсній (на стороні клієнта) програмному забезпеченні, це називається інтерфейсним модульним тестуванням. Протилежністю інтерфейсного тестування є внутрішнє тестування (на стороні сервера).

Фронтальне тестування блоків може проводитися вручну або автоматично. Автоматизоване тестування інтерфейсного блоку сьогодні в тренді, оскільки воно є більш ефективним та економить час. Існують різноманітні інструменти, доступні для інтерфейсного тестування модулів на різних платформах програмування.

AngularJS і ReactJS - це два популярних інтерфейсних фреймворку JavaScript, хоча ReactJS досить новий.

Для проведення модульного тестування в додатку використовуються інтерфейси, побудовані за допомогою цих інтерфейсних фреймворків, або навіть ті, що побудовані без фреймворків, певні засоби автоматизації тестування, такі як Карма, мокко, жасмин, жарт, фермент тощо.

найкращі аніме-сайти для перегляду аніме -

По-перше, ми навчимось проводити інтерфейсне тестування модулів, використовуючи Карма та Жасмин, а потім, пізніше, ми також можемо поглянути на інші інструменти.

Ми почнемо з запуску внутрішніх модульних тестів із використанням пристосувань для інтерфейсів, побудованих без будь-яких фреймворків JavaScript для інтерфейсів. Загалом ми розділимо наші знання з цієї серії на три навчальні посібники.

У цьому першому навчальному посібнику ми спробуємо зрозуміти, як створюється Карма, другий підручник детально пояснить Жасмін, нарешті, у третьому підручнику ми розглянемо його практичне застосування.

Що таке бігун з тесту Карма?

Karma_logo

Karma - це тестовий інструмент на основі вузлів, який дозволяє протестувати свої коди JavaScript у кількох реальних браузерах. Інструмент на основі вузла - це будь-який інструмент, для запуску якого потрібно встановити механізм Nodejs, і до нього можна отримати доступ (встановити) через менеджер пакетів вузлів (npm).

Karma - це інструмент, який робить нашу тестову розробку швидкою, веселою та простою. Його технічно називають бігуном-випробувачем. Примітно тут згадати, що Карма була розроблена командою Angular.

Як Карма працює Теструнером?

Як пробний бігун, Карма робить три важливі речі:

  • Він запускає веб-сервер і обслуговує ваші вихідні та тестові файли JavaScript на цьому сервері.
  • Завантажує всі вихідні та тестові файли у правильному порядку.
  • Нарешті, він запускає тести для браузерів.

Що ще може зробити Карма?

Окрім вищезазначених функцій Karma, є ще кілька речей, на які Karma може бути налаштований. Наприклад, опублікувати покриття тестового коду для комбінезон .io ; перетворити код із формату es6 на es5, об’єднавши кілька файлів в один файл і створивши вихідні карти.

У наступних підручниках ми побачимо, як працюють деякі з цих речей.

Вимоги для початку роботи з кармою

Для того, щоб розпочати роботу з Karma, ви повинні добре розуміти NodeJS та менеджер пакетів Node.

Що таке NodeJS?

Nodejs вирішує блокувальну природу асинхронних викликів JavaScript, тобто коли доступ до асинхронної функції в JavaScript перешкоджає запуску інших частин коду до повернення асинхронного виклику. Однак за допомогою NodeJS можна здійснювати асинхронні неблокуючі виклики функцій.

У технічному плані NodeJS можна сказати як асинхронний керований подіями час виконання JavaScript, що робить побудову масштабованих мережевих додатків простим і можливим.

Початок роботи з NodeJS

Вам просто потрібно встановити фреймворк NodeJS. Все, що вам потрібно зробити, це відвідати їх веб-сайт і, виходячи з вашої ОС, ви повинні завантажити програму встановлення та слідувати інструкціям на їх веб-сайті щодо її встановлення.

Що таке менеджер пакетів вузлів (Npm)?

Менеджер пакетів вузлів (npm) - це менеджер пакетів JavaScript, який використовується для встановлення інших попередньо побудованих програм або модулів на основі вузлів, які, можливо, вам доведеться повторно використовувати у власному додатку.

Npm встановлюється під час встановлення NodeJS, але npm оновлюється швидше, ніж вузол. Отже, можливо, вам доведеться в якийсь момент оновити ваш npm. Щоб встановити останню версію npm, вам слід запустити цю команду з командного рядка: npm встановити npm @ latest -g

Наведена команда вказує на те, що ви просите оболонку ОС виконати програму npm, і програма повинна виконати встановлення пакета npm. @latest вказує на те, що слід встановити останню версію пакета, параметр -g означає, що пакет слід встановлювати глобально.

Детальніше про npm можна знайти тут .

Тут слід згадати дві важливі речі, тобто встановлення пакета з опціями –save та –save-dev.

Під час тестів будь-який встановлений пакет слід встановлювати за допомогою параметра –save-dev, тобто вказувати менеджеру пакетів встановлювати пакет як залежність від розробки, а не як залежність від проекту (коли я використовую –save).

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

Як встановити Карма?

Щоб розпочати роботу з Karma, вам потрібно створити папку для проекту, для якого ви збираєтеся писати модульні тести. Ви можете назвати це як 'basicUT'. Я використовую Visual Studio Code як текстовий редактор, тому рекомендую також завантажити та встановити його. Ви можете його знайти тут .

Відкрийте вікно вбудованого терміналу коду Visual, натисніть «Меню перегляду», а потім виберіть підменю інтегрованого терміналу.

У вікні терміналу введіть «npminit», як показано на малюнку нижче. Ця команда допоможе вам автоматично налаштувати файл 'package.json', який повинен мати кожен додаток на основі вузла.

Файл package.json зберігає інформацію про вашу програму, таку як її ім'я, номер версії, автора, залежності програми, залежності від розробки, тестову команду або сценарій та сценарій для запуску програми або побудови програми у виконану форму.

Клацніть тут для отримання детальної інформації про файл ‘package.json’.

Знімок екрана ініціалізації файлу package.json за допомогою npminit

Ініціалізація файлу package.json

Як описано вище, для встановлення Karma потрібно лише запустити команду npm встановити Karma @ latest –save-dev . Я сподіваюся, що тепер ви можете інтерпретувати, що означає ця команда.

Тепер ми успішно встановили Karma. Що наступного потрібно зробити, щоб використовувати Karma для тестування інтерфейсного блоку?

Все, що вам потрібно зробити, це написати файл конфігурації для нього, і файл зазвичай називається Karma.conf.js для JavaScript. Однак для CoffeeScript справа інакша. Клацніть тут щоб дізнатися більше про файл конфігурації Karma.

Огляд параметрів конфігурації файлу Karma.conf.js

Файл конфігурації Karma.conf.js повинен містити інструкцію з налаштування, якій Karma повинна слідувати для виконання трьох важливих функцій Karma.

Цей файл конфігурації можна створити вручну або автоматично, використовуючи команду: „karma init“, яка починає відображати різні запитання, на які ви повинні відповісти, а Karma використовує відповіді, які ви надаєте, для налаштування файлу конфігурації.

Ви б вже виявили, що запуск команди: ‘karma init’ видає помилку ' „Карма“ не розпізнається як внутрішня чи зовнішня програма, що працює, або командний файл '.

Це пов’язано з тим, що Karma була встановлена ​​локально, а не глобально на проекті, над яким ви працюєте. Отже, оболонка вашої операційної системи не може знайти програму Karma у налаштуваннях середовища свого шляху, якщо ви використовуєте Windows, або у файлі .bash_profile, якщо ви використовуєте Mac.

Щоб виправити цю помилку, нам потрібно встановити Karma глобально. Не просто Karma, а пакет, спеціально розроблений, щоб дозволити використовувати Karma у командному рядку, який є Karma-cli. Просто запустіть команду, ′ Npm встановити -g karma-cli ' .

Тепер повторно запустіть команду karma-init, і ви побачите питання, як показано на малюнку нижче. Коли ви відповідаєте на кожне запитання та натискаєте клавішу «ENTER», з’явиться наступне запитання.

Запуск команди Karma init у командному рядку.

що я можу відкрити файл

Запуск команди karma init

У таблиці нижче наведено перелік запитань, їх значення, а також відповідь у контексті цього посібника.

Карма ініт Питання

Q # 1) Яку структуру тестування ви хочете використовувати?

Пояснення: Структура тестування - це пакет, який забезпечує функції та процедури, необхідні для автоматизації процесу кодування тестів для будь-якого програмного продукту певної мови. Наприклад, jasmine та mocha тестують фреймворки для програмних пакетів JavaScript, Junit та JTest тестують фреймворки для Java, перевірте це для більш детальної інформації.

Відповідь: З'являється інструкція з проханням використовувати вкладку для перегляду інших доступних фреймворків тестування для вузлової програми, але за замовчуванням ви бачите жасмин, тому просто натисніть клавішу Enter.

Q # 2) Ви хочете використовувати Require.js?

Пояснення: Require.js - це завантажувач файлів і модулів JavaScript. Можливо, вам цікаво: навіщо потрібен завантажувач файлів або модулів? Прочитайте це

Відповідь: У коді, який ми будемо писати, я б не використовував require.js, тому просто відповідь ні. питання в тому, що б ми використали? Щоб мати змогу використовувати оператори require для введення зовнішніх файлів в інший файл, нам потрібен завантажувач модулів, тому ми вибрали б Browserify. Детальніше ви побачите нижче.

Запитання №3) Ви хочете автоматично захопити будь-який браузер?

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

Відповідь: Для цього уроку виберіть chrome, firefox та phantomjs. Тепер питання в тому, що таке PhantomJS? PhantomJS - це безголовий веб-браузер, який призначений для безголового тестування веб-сайтів, збору екрану, автоматизації сторінок та моніторингу мережі, ви можете бачити деталі тут .

Інше питання, що таке веб-браузер без голови? Безголовий веб-браузер - це браузер без графічного інтерфейсу користувача, коди виконуються в консольному середовищі.

Q # 4) Яке розташування ваших вихідних та тестових файлів?

Пояснення: Це запитання має на меті виявити шлях, куди ви будете зберігати інтерфейсні файли та тестові файли, які виконуватимуть модульне тестування на них.

Відповідь: Для цього проекту введіть public / js / *. Js для шляху вихідних файлів та test / * Spec.js для шляху тестових файлів. * Spec.js вказує, що всі тестові файли можна називати будь-якими, але в кінці повинні містити Spec із розширенням файлу .js.

Q # 5) Чи повинен бути виключений будь-який з файлів, включених до попередніх зразків?

Пояснення: Іноді може виникнути потреба в тому, що певні вихідні та тестові файли не слід завантажувати. Це питання призначене для вас, щоб вказати такі файли, які Karma не повинна завантажувати у браузер.

що таке операційна система linux та unix

Відповідь: Просто введіть порожній рядок, натиснувши enter. Ви бачили вислів «Ви можете використовувати шаблони глобусів, Наприклад, '** / *. Swp'. '. Шаблони глобули використовуються для задання набору імен файлів у Unix-подібному середовищі за допомогою символу підстановки.
У нашому випадку public / js / *. Js означає будь-який файл з іменем будь-якого набору символів, позначений (*), і має розширення .js і знаходиться у шляху public / js. Читати далі тут

Q # 6) Ви хочете, щоб Karma переглядала всі файли та запускала тести на зміну?

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

Відповідь: Тож просто відповідьте так.

Інший вміст файлу karma.conf.js

# 1) basePath : Ця конфігурація містить ім'я будь-якої папки, яка повинна використовуватися для визначення інформації про шлях, надану для тестових та вихідних файлів.

# 2) препроцесори : Це носить назву програмних файлів, які слід використовувати для обробки вихідних та тестових файлів перед завантаженням їх у браузер.

Навіщо це потрібно?

З появою стилю кодування ES6, який ще не зрозумілий браузерами, існує необхідність перевести код із формату ES6 на ES5, який браузер може зрозуміти, отже, може бути вказаний препроцесор Babel для Karma, який буде використовуватися для транпіляції код із ES6 на ES5 перед завантаженням у браузер.

Існують інші способи використання препроцесора, Наприклад публікація випуску тесту коду на coveralls.io, див тут для більш детальної інформації.

# 3) репортери : Цей параметр конфігурації визначає пакет, який буде використовуватися для звітування про результати тесту. Є декілька репортерів, які повідомляють про випробування коду; Наприклад охоплення. Але за замовчуванням він налаштований на прогрес. Зверніть увагу, що це масив, отже, ви можете додати й інших репортерів.

# 4) порт : Вказує порт, на якому закручено браузер.

# 5) кольори : Вказує, чи повинні репортери видавати звіти з розмальовками.

# 6) logLevel : Визначає рівень реєстрації. За замовчуванням для нього встановлено config.LOG_INFO, що означає, що реєструється лише інформація.

# 7) singleRun : Це вказує, чи має Карма вийти після одного разу запуску тесту. Якщо встановлено значення true, Карма запускає тест і виходить із статусом 0 або 1 залежно від того, пройшов тест або пройшов, інакше Карма не зупиняється.

Ця конфігурація необхідна для тестування безперервної інтеграції з використанням таких інструментів, як TravisCI та CircleCI.

# 8) паралельність : Це вказує, скільки браузерів Karma повинна запускати одночасно. За замовчуванням встановлено нескінченність.

Клацніть тут для отримання детальної інформації про параметри конфігурації Karma.

Якщо ви спостережливий учень, ви, мабуть, бачили ці три рядки.

23 03 2017 15:47:54.912:WARN (init): Failed to install 'Karma-firefox-launcher' Please install it manually. 23 03 2017 15:47:54.913:WARN (init): Failed to install 'Karma-chrome-launcher' Please install it manually. 23 03 2017 15:47:54.914:WARN (init): Failed to install 'Karma-phantomjs-launcher' Please install it manually.

Давайте вивчимо це в розділі нижче.

Запуск браузера Karma

Karma-firefox-launcher, Karma-chrome-launcher і Karma-phantomjs-launcher загалом можна назвати запусковими програмами браузера для Karma.

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

Таким чином, вони є програмами запуску браузера Karma для firefox, chrome та phantomjs відповідно. Карма з’являє ці заяви, щоб повідомити нас про свою неможливість встановити ці вимоги, а потім просить нас встановити її самостійно вручну.

Для цього ми скористаємося диспетчером пакетів вузлів і запустимо ці команди з командного рядка: npm встановити Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

У всіх нас повинні бути встановлені браузери chrome та firefox, а phantomjs не встановлені. Якщо це правда, то вам потрібно встановити її, див тут для деталей та натисніть тут для швидкого старту.

Висновок

У цьому посібнику ми спробували зрозуміти, що таке фронтальне тестування модулів. Ми також представили основний інтерфейсний інструмент тестування модулів для програмного забезпечення JavaScript, відомий як Karma, який є вузловим інструментом. Ми також представили основні параметри конфігурації файлу Karma.conf.js та їх значення.

Винос

  • Модульне тестування - це різновид методу тестування програмного забезпечення, при якому тестується кожна окрема та незалежна частина вихідного коду, щоб визначити, чи достатньо він для використання.
  • Коли ми проводимо це модульне тестування на інтерфейсному (на стороні клієнта) програмному забезпеченні, це відоме як інтерфейсне модульне тестування.
  • Karma - це тестовий інструмент на основі вузлів, який дозволяє протестувати свої коди JavaScript у кількох реальних браузерах. Отже, його називають тестовим бігуном.
  • Nodejs - це асинхронний JavaScript, керований подіями, який робить побудову масштабованих мережевих програм простими та можливими.
  • Менеджер пакетів вузлів (npm) - це менеджер пакетів JavaScript, який використовується для встановлення інших попередньо побудованих програм або модулів на основі вузлів, які, можливо, вам доведеться повторно використовувати у власному додатку.

Наступний підручник

Карма сама по собі не може автоматизувати інтерфейсне тестування модульних додатків JavaScript, їй також потрібно працювати з іншими інструментами тестування, такими як тестова структура, яка полегшить написання наших тестових кейсів.

У нашому майбутньому навчальному посібнику ми розповімо про Jasmine та пакет Jasmine-Jquery, який розширює функціональні можливості Jasmine, щоб мати можливість тестувати пристосування HTML, які використовують бібліотеку JavaScript: Jquery.

Рекомендована література

^