1. зміст
2. Створення зразка додатка HTML5
3. Використання відладчика JavaScript
4. Виконання тестів JS Unit
5. Виконання тестів за допомогою Karma
6. Виконання тестів за допомогою JS Test Driver
7. Налагодження модульних тестів JS за допомогою JS Test Driver
8. висновок
9. Див. також

Додатки HTML5 зазвичай поєднують HTML, CSS і JavaScript для створення додатків, які запускаються в браузерах і які відображаються на різних пристроях, включаючи смартфони, планшети і ноутбуки. У цьому документі показано, як IDE надає інструменти, які можуть використовуватися в налагодженні і тестуванні файлів сценаріїв JAVA в IDE.

Якщо необхідно виконувати налагодження файлів JavaScript у додатку HTML5, рекомендується встановити розширення NetBeans Connector для браузера Chrome. Підтримка налагодження включається автоматично при запуску програми в браузері і встановити розширення.

IDE також дозволяє з легкістю налаштовувати і виконувати тестування модулів для файлів JavaScript на тестовій платформі Jasmine за допомогою виконавців тестів Karma або JS Test Driver. Виконавці тестів можна налаштувати для виконання модульних тестів з використанням різних браузерів. Крім того, в них можна миттєво вибрати бібліотеки, сценарії і тести JavaScript, які необхідно завантажувати в IDE при виконанні тестів. У разі помилки тесту можна скористатися отладчиком для пошуку коду з помилкою.

Детальніше про встановлення розширення NetBeans Connector для браузера Chrome см. В навчальному курсі Початок роботи з додатками HTML5 .

Додаткову інформацію про функції редагування JavaScript в IDE см. В розділі Створення файлів JavaScript в документі Керівництво по розробці додатків в IDE NetBeans .

Як переглянути демонстраційний ролика цього навчального курсу см. Розділ Відеоролик з тестування і налагодження JavaScript в додатках HTML5 .

зміст

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

Примітки.

• У цьому документі використовується сервер JS Test Driverдля запуску тестів модулів JavaScript. Рекомендується ознайомитися з властивостями сервера в розділі Домашня сторінка проекту драйвера JS Test .
• Передбачається, що читач має базові знання або досвід програмування на HTML, CSS і JavaScript.

Створення зразка додатка HTML5

Проведіть наступні дії, щоб створити зразок додатка HTML5 за допомогою шаблону сайту.

1. Виберіть 'Файл'> 'Новий проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в головному меню, щоб відкрити майстер створення проектів.
2. Розгорніть вузол Зразки в майстра створення нових проектів і виберіть категорію HTML5.
3. Виберіть проект Навчальний курс по телефонному довіднику AngularJS. Натисніть кнопку "Далі'.
   
4. Вкажіть місце розташування проекту. Клацніть по кнопці Finish '.

   Примітка. Зверніть увагу, що в якості URL-адреси шаблону вказано значення github. Для отримання архіву шаблону IDE потрібен доступ в мережу. У разі виникнення проблем із завантаженням архіву перевірте налаштування проксі-сервера у вікні "Параметри".

   Після натискання кнопки 'Готово' середу IDE створить проект і відкриє файл index.html в редакторі. У вікні 'Проекти' відобразиться проект, що містить index.html і різні таблиці стилів CSS, а також файли і бібліотеки JavaScript.

   

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

5. Переконайтеся, що в списку на панелі інструментів обраний Chrome з NetBeans Connector.
   
6. Натисніть кнопку 'Виконати' на панелі інструментів (F6) або клацніть правою кнопкою миші вузол проекту у вікні 'Проекти' і виберіть 'Виконати'.

Коли ви запустите проект за допомогою кнопки 'Виконати', перша сторінка додатка HTML5 відкриється в браузері Chrome і там з'явиться список мобільних телефонів. При натисканні на ім'я мобільного телефону на сторінці відображаються відомості про телефон.

Зверніть увагу, що на вкладці браузера є жовта смуга, яка є повідомленням про те, NetBeans Connector виконує налагодження вкладки. IDE і браузер пов'язані і мають можливість взаємодіяти один з одним в тих випадках, коли жовта смуга видна. При запуску програми HTML5 з IDE відладчик JavaScript включається автоматично. Після збереження змін у файлі або внесення змін в таблицю стилів CSS не потрібно перезавантажувати сторінку, тому що вікно браузера автоматично оновлюється з урахуванням змін.

При закритті жовтої смуги або клацання 'Скасувати' розривається з'єднання між IDE і браузером. При розриві з'єднання необхідно повторно запустити додаток HTML5 з IDE для використання відладчика JavaScript.

Також слід зазначити, що значок NetBeans відображається в місці розташування адреси URL поля браузера. Ви можете клацнути значок, щоб відкрити меню, яке надає різні варіанти для зміни розміру зображення в браузері і для включення режиму перевірки в режимі NetBeans.

Використання відладчика JavaScript

У цій вправі описується розміщення точки зупину в файлі JavaScript і повторний запуск програми. Для швидкого перегляду значень змінних можна використовувати підказку редактора.

1. Розгорніть вузол js у вікні 'Проекти' і двічі клацніть файл controllers.js, щоб відкрити файл в редакторі.
2. Помістіть точку зупину рядки на 16 рядку в controllers.js, клацнувши ліву кордон.
   

   Для перегляду точок зупину, заданих в проекті, виберіть 'Вікно'> 'Налагодження'> 'Точки зупинки', щоб відкрити вікно точок зупину.

   

3. Натисніть кнопку 'Виконати' на панелі інструментів, щоб повторно запустити проект.

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

4. У браузері натисніть на одну із записів на сторінці, наприклад Motorola Atrix4G.

   Ви побачите, що сторінка завантажена частково і дані для телефону відсутній, оскільки дані не були передані в JavaScript і візуалізовані.

   

5. У редакторі IDE ви можете бачити, що точка зупинки була досягнута і що лічильник програми знаходиться в даний час в рядку 16 файлу controllers.js.
6. Підведіть курсор до змінної phone для перегляду підказки з інформацією про змінну.
   

   У підказці можна побачити наступне: phone = (Resource) Resource.

7. Натисніть на підказку, щоб розширити її і переглянути список змінних і значень.
   

   Наприклад, при розширенні вузла android відображаються значення рядків os і ui.

   Також можна вибрати 'Вікно'> 'Налагодження'> 'Змінні' для перегляду списку у вікні 'Змінні'.

8. Використовуйте кнопки на панелі інструментів для переходу між функціями JavaScript в бібліотеці angular.js або клацніть 'Продовжити' (F5), щоб відновити роботу програми.

Виконання тестів JS Unit

IDE можна з легкістю налаштувати для виконання модульного тестування за допомогою виконавців тестів Karma або JS Test Driver. Karma і JS Test Driver - виконавці тестів, що надають цільової URL-адресу для виконання модульних тестів JavaScript.

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

Виконання тестів за допомогою Karma

Для виконання тестів за допомогою Karma перш за все необхідно завантажити Karma і зберегти файл на локальному комп'ютері. Після установки Karma буде потрібно створити файл конфігурації Karma, а потім вказати папку установки і шлях до файлу конфігурації в вікні "Властивості проекту".

1. Встановіть Karma.

   Ви можете вибрати спосіб і папку призначення для установки Karma. Папку установки можна вказати пізніше під час налаштування проекту для роботи з Karma. Відомості про варіанти установки Karma можна знайти на веб-сайті Karma .

2. Створіть файл конфігурації Karma.

   В рамках даного навчального курсу цей етап можна пропустити, так як файл конфігурації Karma вже включений до складу зразка додатка. Щоб створити структуру файлу конфігурації Karma, виберіть "Файл конфігурації Karma" в категорії "Модульні тести" майстра створення файлів.

   

   Також можна виконати команду Karma init в командному рядку. Додаткові відомості про використання команди Karma init см. В документації Karma.

3. Розгорніть вузол "Файли конфігурації" в вікні "Проекти" і двічі клацніть файл karma.conf.js, щоб відкрити його в редакторі. Зверніть увагу, що зразок проекту включає в себе два файли конфігурації Karma.

   У файлі конфігурації Karma перераховані файли, які необхідно обробляти або виключати при виконанні тестів. Також тут перераховані модулі Karma, які потрібні для виконання тестів в даній конфігурації.

   

4. Правою кнопкою миші вузол проекту у вікні "Проекти" і виберіть "Властивості" у спливаючому меню.
5. Виберіть категорію "Тестування JavaScript" в розділі "Категорії" вікна "Властивості проекту".
6. У списку "Тестовий провайдер" виберіть Karma. Натисніть OK.
7. Знову відкрийте вікно "Властивості проекту" і виберіть Karma в категорії "Тестування JavaScript" в розділі "Категорії".
8. Вкажіть шлях до папки установки Karma.

   Якщо установка Karma була виконана в каталог проекту, можна натиснути "Пошук", і IDE виявить папку установки автоматично. Також можна натиснути кнопку "Огляд" і вибрати папку установки Karma вручну.

9. Вкажіть шлях до файлу конфігурації Karma. Натисніть OK.

   В рамках даного навчального курсу ви можете натиснути кнопку "Пошук", і IDE виявить файл конфігурації Karma, який використовується за умовчанням. Також можна натиснути кнопку "Огляд" і вибрати файл конфігурації вручну.

   

   При натисканні на кнопку ОК під вузлом проекту у вікні "Проекти" з'явиться вузол Karma. Клацніть вузол Karma правою кнопкою миші, щоб запустити / зупинити сервер Karma або вибрати файл конфігурації.

10. Клацніть правою кнопкою миші вузол "Karma" у вікні "Проекти" і виберіть пункт меню "Запуск".

    В результаті буде запущено сервер Karma і відкриється вікно браузера з повідомленням про статус сервера.

    

    У вікні "Результати" відображаються відомості про статус сервера. Також програма пропонує встановити відсутні модулі (якщо необхідно).

    

    Примітка. Для виконання тестів має бути відкрито вікно браузера і запущений сервер Karma.

11. Клацніть правою кнопкою миші вузол Karma і виберіть "Вибрати конфігурацію> karma.conf.js", щоб програма використовувала вірний файл конфігурації.
12. Вимкніть всі точки зупинки, задані в проекті.

    Точки зупинки можна відключити, знявши прапорці для точок зупинки у вікні 'точки зупину'.

13. Клацніть правою кнопкою миші вузол проекту у вікні 'Проекти' і виберіть 'Тестування'.

    Якщо вибрати пункт меню "Тестування" виконавець тестів запускає модульні тести для файлів. В IDE відкривається вікно "Результати тестів", в якому відображаються результати тестування.

    

Виконання тестів за допомогою JS Test Driver

Параметри використання JS Test Driver в IDE можна налаштувати в діалоговому вікні конфігурації JS Test Driver, яке можна відкрити, вибравши вузол JS Test Driver в вікні "Служби". У діалоговому вікні конфігурації можна вказати місце розташування JAR-сервера JS Test Driver і вибрати браузери для виконання тестів. Вузол JS Test Driver дозволяє швидко визначити, чи запущений сервер, а також запустити або зупинити сервер.

Детальніше про налаштування сервера JS Test Driver см. В документації Початок роботи з JsTestDriver .

1. завантажте JAR JS Test Driver і збережіть файл із розширенням JAR в локальній системі.
2. У вікні 'Служби' клацніть правою кнопкою миші вузол JS Test Driver і виберіть 'Налаштування'.
   
3. У діалоговому вікні 'Налаштувати' клацніть 'Огляд' і знайдіть завантажений файл JAR JS Test Driver.
4. Виберіть Chrome з NetBeans Connector (в NetBeans IDE 7.3 - Chrome з NetBeans JS Debugger) в якості браузера. Натисніть кнопку ОК.
   

   Примітки. Місцезнаходження файлу JAR для JS Test Driver потрібно вказувати тільки при першому налаштуванні JS Test Driver.

   Список браузерів, які можуть бути захоплені і використані для тестування в браузерах, встановлених в системі. Можна вибрати кілька браузерів, в якості додаткових, але для запуску тестів вікно, яке може бути додатковим для сервера, повинне бути відкрито для кожного браузера. Вибрані браузери будуть захоплені автоматично при запуску сервера з IDE.

   У разі вибору параметра "Chrome з тим, що підключається модулем NetBeans", з'являється можливість налагодження тестів, що виконуються за допомогою JS Test Driver.

5. Клацніть правою кнопкою миші вузол проекту у вікні "Проекти" і виберіть "New> Other" (Створити> Інша).
6. Виберіть Файл конфігурації jsTestDriver в категорії 'Тестування модулів'. Натисніть кнопку "Далі'.
7. Переконайтеся, що jsTestDriver заданий як 'Файл'.
8. В поле 'Створений файл' переконайтеся, що файл знаходиться в папці config проекту (AngularJSPhoneCat / config / jsTestDriver.conf).

   Примітка. Файлом конфігурації jsTestDriver.conf повинна бути папка config проекту. Якщо місцем розташування створеного файлу не явлется папка config, натисніть 'Огляд' і виберіть папку AngularJSPhoneCat - Файли конфігурації в діалоговому вікні.

9. Переконайтеся, що встановлено прапорець для завантаження бібліотек Jasmine. Клацніть по кнопці Finish '.
   

   Примітка. Для запуску jsTestDriver необхідно завантажити бібліотеки Jasmine. Якщо ви отримуєте повідомлення про те, що IDE не вдається завантажити бібліотеки Jasmine, перевірте налаштування проксі IDE у вікні 'Параметри'.

   Після натискання кнопки 'Готово' середу IDE створить файл конфігурації схеми jsTestDriver.conf і відкриє файл в редакторі. У вікні 'Проекти' відобразиться, що файл конфігурації був створений в вузлі 'Файли конфігурації'. Якщо розгорнути папку lib в вузлі 'Тести модулів', то буде видно, що до проекту були додані бібліотеки Jasmine.

   

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

   server: http: // localhost: 42442 load: - test / lib / jasmine / jasmine.js - test / lib / jasmine-jstd-adapter / JasmineAdapter.js - test / unit / *. js exclude:

   Файл конфігурації визначає місце розташування за замовчуванням на локальному сервері, який використовується для запуску тестів. Також в файлі вказуються файли, які повинні бути завантажені. За замовчуванням список включає в себе бібліотеки Jasmine і всі файли JavaScript, які знаходяться в папці unit. Тести зазвичай знаходяться в папці unit, але можна змінити список, щоб вказати місце розташування інших файлів, які необхідно загрузітьдля запуску тестів. Щоб запустити тести модулів, також можна додати розташування файлів JavaScript, які необхідно протестувати, і бібліотеки Angular JavaScript в список завантаження.

   В рамках даного навчального курсу для виконання тестів за допомогою JS Test Driver потрібно додати в список завантаження наступні файли (виділені напівжирним шрифтом).

   load: - test / lib / jasmine / jasmine.js - test / lib / jasmine-jstd-adapter / JasmineAdapter.js - app / lib / angular / angular.js - app / lib / angular / angular-mocks.js - app /lib/angular/angular-route.js - app / lib / angular / angular-animate.js - app / lib / angular / angular-resource.js - app / js / *. js - test / unit / *. js
10. Після поновлення файлу конфігурації можна натиснути правою кнопкою миші вузол проекту у вікні "Проекти" і вибрати "Тестування".

    Після клацання 'Тестувати IDE' автоматично відкривається засіб запуску JS Test в браузері Chrome і дві вкладки у вікні 'Вихідні дані'.

    

    У вікні браузера Chrome отображаетс повідомлення про запуск сервера jsTestDriver. Відображається повідомлення про те, що сервер запущений на localhost: 42442. На вкладці 'Сервер js-test-driver' у вікні 'Вихідні дані' відображається стан сервера.

    Зверніть увагу, що JsTestDriver виконується на вкладці браузера, а модуль NetBeans виконує налагодження вкладки. Можливість налагодження модульних тестів стає доступна при виконанні тестів за допомогою JS Test Driver, якщо в якості одного з цільових браузерів обраний варіант "Chrome з тим, що підключається модулем NetBeans".

    

    Примітка. Для виконання тестів модулів вікно браузера має бути відкрито і сервер jsTestDriver повинен бути запущений. Можна запустити сервер і відкрити вікно, клацнувши правою кнопкою миші вузол JS Test Driver у вікні 'Служби' і вибравши 'Пуск'.

    

11. Виберіть "Вікно> Результати> Результати тестів" в головному меню, щоб відкрити вікно "Результати тестів" і переглянути підсумки виконання.
    

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

Налагодження модульних тестів JS за допомогою JS Test Driver

У цій вправі показано, як виконувати налагодження модульних тестів в IDE за допомогою JS Test Driver.

Примітка. NetBeans IDE 8.0 не підтримує налагодження тестів, що виконуються за допомогою Karma.

1. Розгорніть папку js у вікні 'Проекти' і двічі клацніть файл controllers.js, щоб відкрити файл в редакторі.
2. Змініть рядок 7 в файлі для внесення наступних змін (виділені напівжирним шрифтом). Збережіть зміни. function PhoneListCtrl ($ scope, Phone) {$ scope.phones = Phone.query (); $ scope.orderProp = 'name'; }

   При збереженні змін сторінка автоматично перезавантажується в браузері. Відображається зміна порядку телефонів в списку.

3. Переконайтеся, що сервер JS Test Driver запущений і що повідомлення стану відображається у вікні браузера Chrome.
4. Клацніть правою кнопкою миші вузол проекту у вікні 'Проекти' і виберіть команду 'Тестування'.
   

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

5. Відкрийте вкладку 'Виконання тестів JS unit' у вікні 'Вихідні дані'.
   

   Відображається повідомлення про те, що orderProp має бути age в рядку 41.

6. Клацніть посилання на вкладці 'Виконання тестів модулів JS' для переходу до рядка, в якій в тесті сталася помилка. Файл тесту controllersSpec.js відкривається в редакторі в рядку 41 (виділена напівжирним шрифтом) it ( 'should set the default value of orderProp model', function () {expect (scope.orderProp) .toBe ( 'age');});

   Видно, що в тесті очікувалося "age" як значення scopeOrder.prop.

7. Встановіть точку зупинки в рядку, де в тесті сталася помилка (рядок 41).
8. Клацніть правою кнопкою миші вузол проекту у вікні 'Проекти' і виберіть 'Тестування'.

   При повторному запуску тесту лічильник програми досягне точки зупину. При наведенні курсора на scopeOrder.prop в підказці видно, що змінна має значення "name" при досягненні точки зупину.

   

   В якості альтернативи можна вибрати 'Налагодження'> 'Оцінка виразів' в головному меню, щоб відкрити вікно 'Оцінка коду'. При введенні виразу scopeOrder.prop у вікні і натисканні кнопки 'Оцінити фрагмент коду' ( ) (Ctrl-Enter) в отладчике відображається значення виразу у вікні 'Змінні'.

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

висновок

У цьому навчальному курсі демонструється, як IDE надає інструменти, які можуть використовуватися при налагодженні і тестуванні модулів в файлах JavaScript. Налагодження включається автоматично для додатків HTML5 під час запуску програми в браузері Chrome за умови, що розширення NetBeans Connector включено. IDE також дозволяє легко налаштувати і запускати тестування модулів для файлів JavaScript за допомогою платформи тестування Jasmine і сервера JS Test Driver.

Див. також

Детальніше про підтримку додатків HTML5 в IDE см. В наступних матеріалах на сайті www.netbeans.org :

Детальніше про запуск тестів модулів за допомогою JS Test Driver см. Наступну документацію: