Тестування та налагодження JavaScript у додатках HTML5 - навчальний курс з NetBeans
Зміст
Для цього навчального курсу знадобляться такі материалы.
| IDE NetBeans, Java | 8.0 |
| Комплект для розробника мовою Java (JDK) | 7 або 8 |
| Браузер Chrome | - |
| Розширення NetBeans Connector для Chrome | 1.x |
| Драйвер тесту JS JAR | - |
Створення зразка програми HTML5
Виконайте такі дії, щоб створити зразок HTML5 за допомогою шаблону сайту.
Натисніть кнопку 'Виконати' на панелі інструментів, щоб повторно запустити проект.
При запуску проекту з'явиться та сама сторінка, оскільки не було досягнуто заданої точки зупинки.
У браузері натисніть один із записів на сторінці, наприклад Motorola Atrix4G.
У підказці відображається така інформація: phone = (Resource) Resource.
Наприклад, при розширенні вузла android відображаються значення рядків os та ui.
Виконання тестів JS Unit
Виконання тестів за допомогою Karma
Для виконання тестів за допомогою Karma насамперед необхідно завантажити Karma та зберегти файл на локальному комп'ютері. Після встановлення Karma потрібно створити файл конфігурації Karma, а потім вказати папку установки та шлях до файлу конфігурації у вікні "Властивості проекту".
Ви можете вибрати спосіб та папку призначення для встановлення Karma.Папку інсталяції можна вказати пізніше при налаштуванні проекту для роботи з Karma. Інформацію про установки Karma можна знайти на веб-сайті Karma.
Створіть конфігураційний файл Karma.
Також можна виконати команду Karma init у командному рядку. Для отримання додаткових відомостей про використання команди Karma init див. документацію Karma.
У файлі конфігурації Karma перелічені файли, які потрібно обробляти або виключати під час тестів. Також тут перераховані модулі Karma, що підключаються, які потрібні для виконання тестів у даній конфігурації.
Якщо інсталяція Karma була виконана в каталогі проекту, можна натиснути "Пошук", і IDE виявить папку установки автоматично. Також можна натиснути кнопку "Огляд" та вибрати папку установки Karma вручну.
Вкажіть шлях до конфігураційного файлу Karma. Натисніть кнопку OK.
В рамках цього навчального курсу ви можете натиснути кнопку "Пошук", і IDE виявить файл конфігурації Karma, який використовується за замовчуванням. Також можна натиснути кнопку "Огляд" та вибрати файл конфігурації вручну.
При натисканні на кнопку ОК під вузлом проекту у вікні Проекти з'явиться вузол Karma. Клацніть правою кнопкою миші вузол Karma, щоб запустити/зупинити сервер Karma або вибрати файл конфігурації.
Клацніть правою кнопкою миші вузол Karma у вікні Проекти та виберіть пункт меню Запуск.
В результаті буде запущено сервер Karma та відкриється вікно браузера з повідомленням про статус сервера.
У вікні "Результати" відображаються відомості про статус сервера. Також програма пропонує встановити відсутні модулі (якщо потрібно).
Примітка. Для виконання тестів має бути відкрито вікно браузера тазапущено сервер Karma.
Точки зупинки можна вимкнути, знявши прапорці для точок зупинки у вікні 'Точки зупинки'.
Клацніть правою кнопкою миші вузол проекту у вікні 'Проекти' та виберіть 'Тестування'.
Якщо вибрати пункт меню "Тестування", виконавець тестів запускає модульні тести для файлів. В IDE відкривається вікно "Результати тестів", де відображаються результати тестування.
Виконання тестів за допомогою JS Test Driver
Параметри використання JS Test Driver в IDE можна налаштувати у діалоговому вікні конфігурації JS Test Driver, яке можна відкрити, вибравши вузол JS Test Driver у вікні "Служби". У діалоговому вікні конфігурації можна вказати розташування JAR-сервера JS Test Driver і вибрати браузери для виконання тестів. Вузол JS Test Driver дозволяє швидко визначити, чи запущено сервер, а також запустити або зупинити сервер.
- Завантажте JAR JS Test Driver та збережіть файл JAR у локальній системі.
- У вікні 'Служби' клацніть правою кнопкою миші вузол JS Test Driver і виберіть 'Налаштування'.
- У діалоговому вікні 'Налаштувати' клацніть 'Огляд' і знайдіть завантажений файл JAR JS Test Driver.
- Виберіть Chrome з NetBeans Connector (в NetBeans IDE 7.3 - Chrome з NetBeans JS Debugger) як браузер. Натисніть кнопку ОК.
Примітки. Розташування файлу JAR для JS Test Driver потрібно вказувати лише при першому налаштуванні JS Test Driver.
Список браузерів, які можуть бути захоплені тавикористані для тестування у браузерах, встановлених у системі. Можна вибрати кілька браузерів, як додаткові, але для запуску тестів вікно, яке може бути додатковим для сервера, має бути відкрито для кожного браузера. Вибрані браузери будуть захоплені автоматично під час запуску сервера з IDE.
Якщо вибрано параметр "Chrome з модулем NetBeans, що підключається", з'являється можливість налагодження тестів, що виконуються за допомогою JS Test Driver.
Примітка. Файлом конфігурації jsTestDriver.conf має бути папка config проекту. Якщо місцезнаходженням створеного файлу не є папка config, натисніть 'Огляд' і виберіть папку AngularJSPhoneCat - Файли конфігурації у діалоговому вікні.
Перевірте, чи встановлено прапорець для завантаження бібліотек Jasmine. Натисніть кнопку 'Готово'.
Примітка. Для запуску jsTestDriver необхідно завантажити бібліотеки Jasmine. Якщо ви отримуєте сповіщення про те, що IDE не вдається завантажити бібліотеки Jasmine, перевірте параметри проксі IDE у вікні 'Параметри'.
В рамках цього навчального курсу для виконання тестів за допомогою JS Test Driver потрібно додати до списку файлів, що завантажуються, наступні файли (виділені напівжирним шрифтом).
Після оновлення файлу конфігурації можна клацнути правою кнопкою миші вузол проекту у вікні "Проекти" та вибрати "Тестування".
Після клацання 'Тестувати IDE' автоматично відкривається засіб запуску JS Test у браузері Chrome та дві вкладки у вікні 'Вихідні дані'.
У вікні браузера Chrome відображається повідомлення про запуск сервера jsTestDriver. Відобразиться повідомлення про те, що сервер запущено на localhost:42442. На вкладці 'Сервер js-test-driver' у вікні 'Вихідні дані'відображається стан сервера.
Зверніть увагу, що JsTestDriver виконується на вкладці браузера, а модуль NetBeans, що підключається, виконує налагодження вкладки. Можливість налагодження модульних тестів стає доступною при виконанні тестів за допомогою JS Test Driver, якщо в якості одного з цільових браузерів вибрано варіант "Chrome з модулем NetBeans".
Примітка. Для виконання тестів модулів вікно браузера має бути відкрито і сервер jsTestDriver має бути запущений. Можна запустити сервер і відкрити вікно, клацнувши правою кнопкою миші вузол JS Test Driver у вікні Служби і вибравши Пуск.
Налагодження модульних тестів JS за допомогою JS Test Driver
У цій вправі показано, як виконувати налагодження модульних тестів у IDE за допомогою JS Test Driver.
Примітка. NetBeans IDE 8.0 не підтримує налагодження тестів Karma.
При запуску тесту можна побачити, що в одному з тестів виникла помилка з повідомленням, що значення "name" було виявлено замість очікуваного значення "age".
Перейдіть на вкладку 'Виконання тестів JS unit' у вікні 'Вихідні дані'.
Відображається повідомлення про те, що orderProp має бути age у рядку 41.
Видно, що у тесті очікувалося "age" як значення scopeOrder.prop.
Приповторному запуску тесту лічильник програми досягне точки зупинки. При наведенні курсору на scopeOrder.prop у підказці видно, що змінна має значення "name" при досягненні точки зупинки.
В якості альтернативи можна вибрати 'Налагодження' > 'Оцінка виразів' у головному меню, щоб відкрити вікно 'Оцінка коду'. При введенні виразу scopeOrder.prop у вікні та натисканні кнопки 'Оцінити фрагмент коду' ( ) (Ctrl-Enter) у налагоджувачі відображається значення виразу у вікні 'Змінні'.
Висновок
- Початок роботи з програмами HTML5. Документ, який показує, як встановити розширення NetBeans Connector для Chrome, а також виконати створення та запуск простої програми HTML5.
- Робота зі сторінками стилів CSS у додатках HTML5 Документ, який демонструє, як використовувати деякі з майстрів CSS та вікон у IDE та режим перевірки у браузері Chrome для візуального визначення елементів у джерелах проекту.
- Розділ Розробка додатків HTML5 у документі Посібник з розробки додатків у IDE NetBeans