1. зміст
2. Створення зразка додатка HTML5
3. Використання відладчика JavaScript
4. Виконання тестів JS Unit
5. Налагодження тестів JS Unit
6. висновок
7. Див. також

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

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

IDE також дозволяє легко налаштувати і запускати тестування модулів для файлів JavaScript за допомогою платформи тестування Jasmine і сервера JS Test Driver. Можна налаштувати запуск 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 '.

   Після натискання кнопки 'Готово' середу 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 дозволяє легко налаштовувати сервер JS Test Driver для виконання тестів модулів. У цьому навчальному курсі ви будете використовувати тести модулів JavaScript, що входять до складу зразка проекту, і використовувати платформу тестування Jasmine.

JS Test Driver являє собою сервер, що надає адресу URL, який є цільовим для запуску тестів модулів JavaScript. При запуску тестів сервер запускається і чекає виконання тестів. У вікні браузера відобразиться зелене повідомлення про стан, яке підтверджує, що сервер працює і знаходиться в режимі очікування. 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.

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, але можна змінити список, щоб вказати місце розташування інших файлів, які необхідно загрузітьдля запуску тестів.

   Папка модулів проекту 'Навчальний курс по телефонному довіднику AngularJS' містить чотири файли JavaScript з тестами модулів.

   

   Щоб запустити тести модулів, також можна додати розташування файлів JavaScript, які необхідно протестувати, і бібліотеки Angular JavaScript в список завантаження.

10. Додайте наступні місця розташування (виділені напівжирним шрифтом) в розділ load файлу конфігурації. Збережіть зміни. load: - test / lib / jasmine / jasmine.js - test / lib / jasmine-jstd-adapter / JasmineAdapter.js - test / unit / *. js - app / lib / angular / angular.js - app / lib / angular /angular-*.js - app / js / *. js - test / lib / angular / angular-mocks.js
11. Вимкніть всі точки зупинки, задані в проекті.

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

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

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

    

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

    

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

    На вкладці 'Виконання тестування модулів JS' в 'Вихідних даних' відображаються вихідні дані чотирьох виконаних тестів. Тести розташовані в файлах controllerSpec.js і filtersSpec.js. (У файлів servicesSpec.js і directivesSpec.js в папці unit відсутні тести.)

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

    У вікні з'явиться повідомлення, що всі тести пройшли успішно.

    

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

Налагодження тестів JS Unit

Ця вправа демонструє, як можна використовувати IDE для налагодження файлів JavaScript при помилці тестування модуля.

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 см. Наступну документацію: