Тестування плагінів для Apache Cordova

Я збираюся розповісти про одну з тем, що стосуються Apache Cordova, яка практично не освітлена в рунеті - як тестувати свій плагін для Apache Cordova.

Трохи теорії

Отже, як здійснюється тестування плагінів для Apache Cordova. Насамперед, архітектура тестів складається з двох частин:

Власне тести, які використовують ту чи іншу бібліотеку для тестування.
Так звана test harness, або частина коду, відповідальна за запуск тестів і генерацію результатів тесту.

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

Найпростішим способом тут буде використання cordova-plugin-test-framework — ще одного плагіна, який додає додаток інтерфейс для запуску тестів у вигляді окремої сторінки з елементами управління для запуску, зупинки та вибору тестів для запуску, а також здійснює завантаження всіх оголошених тестів під час роботи програми та їх запуск.

Ось як це виглядає у роботі:

Крім того, test-framework надає можливість швидко створити т.зв. ручні тести — створити кілька кнопок на окремій сторінці з описом дій, пов'язаних із натисканням на кожну кнопку та очікуваної поведінки програми.

README плагін описує, як він працює і як потрібно додавати тести, щоб test-framework підхопив їх, проте містить деякі неточності, тому коротко наведу основні тези тут.

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

Корисно також додати cordova-plugin-test-framework - а можливо ще й тестований плагін - в залежності від ваших тестів, щоб вонивстановлювалися автоматично разом із тестами. Це робиться додаванням наступних елементів до tests/plugin.xml :

Створюємо каркас плагіна

Отже, після того, як все підготовлено для написання, каркас плагіна має виглядати приблизно так:

plugin.xml виглядатиме так:

Це можна зробити вручну у $EDITOR , а можна використовувати plugman — ще один інструмент для роботи з плагінами Apache Cordova:

щоб згенерувати каркас плагіна та відредагувати файли вручну.

Пишемо автоматичні тести

Тепер перейдемо безпосередньо до написання тестів. Ті, хто вже знайомі з BDD і jasmine можуть пропустити цей розділ, т.к. нічого нового тут не буде, і перейти до наступного.

Приклади далі в цій статті ґрунтуються на простому плагіні, написаному за 10 хвилин у демонстраційних цілях. Код плагіна можна знайти на GitHub.

Отже, спочатку створюємо каркас тестового плагіна, як описано у попередньому розділі та починаємо наповнювати його тестами.

Поки що цього достатньо. Тепер створимо тестовий додаток та запустимо наші тести. Для цього виконуємо наступні команди в папці з плагіном, що тестується:

і правимо елемент у файлі config.xml всередині нашого тестового додатку - змінюємо значення на cdvtests/index.html. Це необхідно, щоб замість основної стартової сторінки при запуску програми відкрилася сторінка плагіна і завантажився test-framework.

Тепер запускаємо додаток:

і бачимо сторінку плагіна. Натискаємо "Autotests" і практично відразу бачимо звіт jasmine про успішне завершення тестів.

Додаємо ручні тести

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

З ручними тестами все працює трохи інакше. test-framework передбачає, що кожному тесту належить окрема кнопка в інтерфейсі і загальне всім тестів полі у яке можна вивести свої результати. Це параметри createActionButton і content відповідно до функції defineManualTests .

createActionButton це функція, яка створює кнопку, додає її до DOM всередину вказаного елемента та виконує вказану функцію при натисканні кнопки. Параметри функції виглядають так:

content це контейнер на сторінці, всередині якого можна помістити інформацію про тест і описати процес верифікації для тестувальника.

Для прикладу додамо один ручний тест:

Тепер нам потрібно перезбирати програму з оновленим плагіном. Для цього просто видалимо плагін із програми та спробуємо запустити програму.

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

Запускаємо тести на CI

Перезбирати додаток для того, щоб запустити тести ще раз - досить рутинне заняття, яке звичайно хочеться робити автоматично. Замість того, щоб винаходити власний велосипед, скористаємося готовим рішенням - cordova-paramedic. Ця програма написана спеціально для того, щоб автоматизувати запуск тестів для плагінів у т.ч. та для CI. Ось що воно робить:

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

Для того щоб почати використовувати paramedic, встановимо його і додамо в package.json нашого плагіна:

та додамо пару команд для запуску тестів для iOS та Android.

Всі. Тепер замість того, щоб збирати додаток вручну, правити його config.xml , запускати і потім дивитися як з'являються точки і хрестики пройдених і тестів, що впали, просто запускаємо відповідний скрипт, наприклад для Android:

І через деякий час отримуємо результати тестів на консоль:

Тепер стає дуже просто запускати тести на машині CI. Візьмемо для прикладу Travis CI та Circle CI:

Потім йдемо в панель керування відповідного сервісу, включаємо інтеграцію з GitHub та насолоджуємось:

Висновок

Отже, тепер ми маємо плагін покритий автоматичними тестами, вміємо створювати та запускати тестовий додаток буквально одним-двома рядками в терміналі, і знаємо стан коду, що оновлюється per-commit.