| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>Тестирование и отладка JavaScript в приложениях HTML5 - учебный курс по NetBeans</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="A tutorial demonstrating support for debugging JavaScript and testing using JS Test Driver in the NetBeans IDE"> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, JavaScript, debugging, testing, HTML5, JS Test Driver"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>Отладка и тестирование JavaScript в приложениях HTML5</h1> |
| |
| <p>В IDE NetBeans 7.3 представлен новый тип проектов, который можно использовать для разработки приложений HTML5. Приложения HTML5 обычно сочетают HTML, CSS и JavaScript для создания приложений, которые запускаются в браузерах и которые отображаются на различных устройствах, включая смартфоны, планшеты и ноутбуки. В настоящем документе показано, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.</p> |
| |
| <p>Если необходимо выполнять отладку файлов JavaScript в приложении HTML5, рекомендуется установить расширение NetBeans Connector для браузера Chrome. Поддержка отладки включается автоматически при запуске приложения в браузере и установке расширения.</p> |
| <p>IDE также позволяет легко настроить и запускать тестирование модулей для файлов JavaScript с помощью платформы тестирования Jasmine и сервера JS Test Driver. Можно настроить запуск JS Test Driver для различных модулей для разнообразных браузеров и быстро указать библиотеки, сценарии и тесты JavaScript, которые должны загружаться в IDE при запуске тестов. В случае ошибки теста можно воспользоваться отладчиком для поиска кода с ошибкой. |
| </p> |
| |
| <p class="tips">Подробнее об установке расширения NetBeans Connector для браузера Chrome см. в учебном курсе <a href="html5-gettingstarted_ru.html">Начало работы с приложениями HTML5</a>.</p> |
| |
| <p class="tips">Обзор функций редактирований JavaScript в IDE см. в разделе <a href="../ide/javascript-editor_ru.html">Редактирование JavaScript в IDE NetBeans.</a>.</p> |
| <p class="tips">Для просмотра демонстрационного ролика этого учебного курса см. раздел <a href="../../docs/web/html5-javascript-screencast.html">Видеоролик по тестированию и отладке JavaScript в приложениях HTML5</a>.</p> |
| |
| <h3>Содержание</h3> |
| <img alt="Содержимое на этой странице применимо к IDE NetBeans 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="Содержимое этой страницы применимо к IDE NetBeans 7.3"> |
| |
| <ul class="toc"> |
| <li><a href="#createproject">Создание приложения HTML5 NetBeans</a></li> |
| <li><a href="#debugger">Использование отладчика JavaScript</a></li> |
| <li><a href="#unittest">Выполнение тестов JS Unit</a></li> |
| <li><a href="#debugtest">Отладка тестов JS Unit</a></li> |
| <li><a href="#summary">Заключение</a></li> |
| <li><a href="#seealso">См. также</a></li> |
| </ul> |
| |
| <h4>Для выполнения этого учебного курса потребуются следующие материалы.</h4> |
| |
| <table id="requiredSoftware"> |
| |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Программное обеспечение или ресурс</th> |
| <th class="tblheader" scope="col">Требуемая версия</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">IDE NetBeans, Java</a></td> |
| <td class="tbltd1">7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Комплект для разработчика на языке Java (JDK)</a></td> |
| <td class="tbltd1">Версия 6 или 7</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.google.com/chrome">Браузер Chrome</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon">Расширение NetBeans Connector для Chrome</a></td> |
| <td class="tbltd1">1.0.0</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://code.google.com/p/js-test-driver/">Драйвер теста JS JAR</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">Примечания.</strong></p> |
| |
| <ul> |
| <li>В этом документе используется сервер JS Test Driverдля запуска тестов модулей JavaScript. Рекомендуется ознакомиться со свойствами сервера в разделе <a href="http://code.google.com/p/js-test-driver/">Домашняя страница проекта драйвера JS Test</a>.</li> |
| |
| <li>Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript.</li> |
| </ul> |
| |
| |
| <!-- ++++++++++++++++ Creating the Application ++++++++++++++++ --> |
| <a name="createproject"></a> |
| <h2>Создание образца приложения HTML5</h2> |
| <p>Произведите следующие действия, чтобы создать образец приложения HTML5 с помощью шаблона сайта.</p> |
| <ol> |
| <li>Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.</li> |
| <li>Разверните узел <strong>Образцы</strong> в мастере создания новых проектов и выберите категорию <strong>HTML5</strong>.</li> |
| <li>Выберите проект <strong>Учебный курс по телефонному справочнику AngularJS</strong>. Нажмите кнопку 'Далее'.<br> <img alt="снимок экрана образца проекта в мастере создания проектов" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-newproject.png" title="Образец проекта 'Учебный курс по телефонному справочнику AngularJS' в мастере создания новых файлов"> |
| |
| </li> |
| <li>Укажите местоположение проекта. Нажмите кнопку 'Готово'. |
| |
| <p>После нажатия кнопки 'Готово' среда IDE создаст проект и откроет файл <tt>index.html</tt> в редакторе. В окне 'Проекты' отобразится проект, содержащий <tt>index.html</tt> и различные таблицы стилей CSS, а также файлы и библиотеки JavaScript. </p> |
| <img alt="снимок экрана узла проектов в окне 'Проекты'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-projectswindow.png" title="Узлы проекта 'Учебный курс по телефонному справочнику AngularJS' в окне 'Проекты'"> |
| |
| <p>Проект также включает в себя несколько модулей тестирования JavaScript и файлов конфигурации, которые были созданы по умолчанию. </p></li> |
| <li>Убедитесь, что на панели инструментов в раскрывающимся списке выбран Chrome с NetBeans Integration.<br> <img alt="снимок экрана раскрывающегося списка на панели инструментов" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-selectbrowser.png" title="Браузер, выбранный в раскрывающемся списке на панели инструментов."></li> |
| <li>Нажмите кнопку 'Выполнить' на панели инструментов (F6) или щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Выполнить'. </li> |
| </ol> |
| <p>Когда вы запустите проект с помощью кнопки 'Выполнить', первая страница приложения HTML5 откроется в браузере Chrome и там отобразится список мобильных телефонов. При нажатии на имя мобильного телефона на странице отображаются сведения о телефоне.</p> |
| <img alt="снимок экрана приложения в окне браузера" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-runproject1.png" title="Приложение 'Учебный курс по телефонному справочнику AngularJS' в окне браузера"> |
| |
| <p>Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.</p> |
| |
| <p class="alert">При закрытии желтой полосы или щелчка 'Отмена' разрывается соединение между IDE и браузером. При разрыве соединения необходимо повторно запустить приложение HTML5 из IDE для использования отладчика JavaScript.</p> |
| |
| <p>Также следует отметить, что значок NetBeans отображается в местоположении адреса URL поля браузера. Вы можете щелкнуть значок, чтобы открыть меню, которое предоставляет различные варианты для изменения размера изображения в браузере и для включения режима проверки в режиме NetBeans.</p> |
| |
| <!-- ++++++++++++++++ Using the JavaScript Debugger ++++++++++++++++ --> |
| |
| <a name="debugger"></a> |
| <h2>Использование отладчика JavaScript</h2> |
| <p>В этом упражнении описывается размещение точки останова в файле JavaScript и повторный запуск приложения. Для быстрого просмотра значений переменных можно использовать подсказку редактора.</p> |
| <ol> |
| <li>Разверните узел <tt>js</tt> в окне 'Проекты' и дважды щелкните файл <tt>controllers.js</tt>, чтобы открыть файл в редакторе.</li> |
| <li>Поместите точку останова строки на 16 строке в <tt>controllers.js</tt>, щелкнув левую границу. <br> <img alt="снимок экрана точки останова, заданной в редакторе" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint1.png" title="Точка останова задана в редакторе"> |
| <p>Для просмотра точек останова, заданных в проекте, выберите 'Окно' > 'Отладка' > 'Точки останова', чтобы открыть окно точек останова.</p> |
| <img alt="снимок эрана точек останова в окне 'Точки останова'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint2.png" title="Список точек останова в окне 'Точки останова'"> |
| |
| </li> |
| |
| <li>Нажмите кнопку 'Выполнить' на панели инструментов, чтобы повторно запустить проект. |
| <p>При запуске проекта отобразится та же страница, поскольку не была достигнута заданная точка останова.</p></li> |
| |
| <li>В браузере нажмите на одну из записей на странице, например Motorola Atrix4G. |
| |
| <p>Вы увидите, что страница загружена частично и данные для телефона отсутствует, поскольку данные не были переданы в JavaScript и визуализированы.</p> |
| <img alt="снимок экрана страницы сведений в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-break-details.png" title="Страница сведений приложения частично будет загружена в браузер"> |
| </li> |
| |
| <li>В редакторе IDE вы можете видеть, что точка останова была достигнута и что счетчик программы находится в настоящее время в строке 16 файла <tt>controllers.js</tt>.</li> |
| <li>Подведите курсор к переменной <tt>phone</tt> для просмотра подсказки с информацией о переменной.<br> <img alt="снимок экрана подсказки переменной в редакторе" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-variables1.png" title="Подсказка переменной в редакторе"> |
| |
| <p>В подсказке отображается следующая информация: <tt>phone = (Resource) Resource</tt>.</p> |
| </li> |
| <li>Нажмите на подсказку, чтобы расширить ее и просмотреть список переменных и значений.<br> <img alt="снимок экрана расширенной подсказки переменной в редакторе" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-variables.png" title="Расширенная подсказка переменной в редакторе"> |
| <p>Например, при расширении узла <tt>android</tt> отображаются значения строк <tt>os</tt> и <tt>ui</tt>.</p> |
| <p class="tips">Также можно выбрать 'Окно' > 'Отладка' > 'Переменные' для просмотра списка в окне 'Переменные'.</p></li> |
| |
| <li>Используйте кнопки на панели инструментов для перехода между функциями JavaScript в библиотеке <tt>angular.js</tt> или щелкните 'Продолжить' (F5), чтобы возобновить работу приложения. </li> |
| </ol> |
| |
| |
| <!-- ++++++++++++++++ Running JS Unit Tests ++++++++++++++++ --> |
| <a name="unittest"></a> |
| <h2>Выполнение тестов JS Unit</h2> |
| <p>IDE позволяет легко настраивать сервер JS Test Driver для выполнения тестов модулей. В этом учебном курсе вы будете использовать тесты модулей JavaScript, входящие в состав образца проекта, и использовать платформу тестирования Jasmine. |
| </p> |
| |
| <p>JS Test Driver представляет собой сервер, предоставляющий адрес URL, который является целевым для запуска тестов модулей JavaScript. При запуске тестов сервер запускается и ожидает выполнения тестов. В окне браузера отобразится зеленое сообщение о состоянии, которое подтверждает, что сервер работает и находится в режиме ожидания. IDE обеспечивает диалоговое окно конфигурации для JS Test Driver, которое можно открыть из узла JS Test Driver в 'Службы'. Диалоговое окно конфигурации позволяет легко указать местоположение JAR сервера JS Test Driver и браузеры, в которых следует запускать браузеры. Узел JS Test Driver позволяет быстро определить, запущен ли сервер, а также запустить или остановить сервер.</p> |
| |
| <p>Подробнее о настройке сервера JS Test Driver см. в документации <a href="http://code.google.com/p/js-test-driver/wiki/GettingStarted">Начало работы с JsTestDriver</a>.</p> |
| |
| <ol> |
| <li>Загрузите <a href="http://code.google.com/p/js-test-driver/">JAR JS Test Driver</a> и сохраните файл JAR в локальной системе.</li> |
| <li>В окне 'Службы' щелкните правой кнопкой мыши узел JS Test Driver и выберите 'Настройка'. <br> <img alt="снимок экрана настройки узла 'jsTest Driver' в окне 'Службы'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-serviceswindow.png" title="Настройка узла 'jsTest Driver' в окне 'Службы'"></li> |
| <li>В диалоговом окне 'Настроить' щелкните 'Обзор' и найдите загруженный файл JAR JS Test Driver.</li> |
| <li>Выберите Chrome с помощью функции отладчика JS Debugger NetBeans. Нажмите кнопку ОК.<br> <img alt="снимок экрана диалогового окна 'Настройка узла jsTest Driver'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-configure.png" title="Диалоговое окно 'Настройка узла 'jsTest Driver'"> |
| <p class="notes"><strong>Примечание.</strong> Местоположение файла JAR для JS Test Driver нужно указывать только при первой настройке JS Test Driver.</p> |
| |
| <p>Список браузеров, которые могут быть захвачены и использованы для тестирования в браузерах, установленных в системе. Можно выбрать несколько браузеров, в качестве дополнительных, но для запуска тестов окно, которое может быть дополнительным для сервера, должно быть открыто для каждого браузера. Выбранные браузеры будут захвачены автоматически при запуске сервера из IDE.</p> |
| </li> |
| <li>Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "New > Other"(Создать > Другое). </li> |
| <li>Выберите <strong>Файл конфигурации jsTestDriver</strong> в категории 'Тестирование модулей'. Нажмите кнопку 'Далее'.</li> |
| <li>Убедитесь, что <strong>jsTestDriver</strong> задан как 'Имя файла'.</li> |
| <li>В поле 'Созданный файл' убедитесь, что файл находится в папке <tt>config</tt> проекта (<tt>AngularJSPhoneCat/config/jsTestDriver.conf</tt>). |
| <p class="notes"><strong>Примечание.</strong> Файлом конфигурации <tt>jsTestDriver.conf</tt> должна быть папка <tt>config</tt> проекта. Если местоположением созданного файла не явлется папка <tt>config</tt>, нажмите 'Обзор' и выберите папку <tt>AngularJSPhoneCat - Файлы конфигурации</tt> в диалоговом окне.</p> |
| </li> |
| <li>Убедитесь, что установлен флажок для загрузки библиотек Jasmine. Нажмите кнопку 'Готово'.<br> <img alt="снимок экрана мастера создания файлов конфигурации jsTestDriver" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-configfile.png" title="Мастер создания новых файлов конфигурации jsTestDriver"> |
| |
| <p class="notes"><strong>Примечание.</strong>Для запуска jsTestDriver необходимо загрузить библиотеки Jasmine. Если вы получаете уведомление о том, что IDE не удается загрузить библиотеки Jasmine, проверьте настройки прокси IDE в окне 'Параметры'.</p> |
| |
| <p>После нажатия кнопки 'Готово' среда IDE создаст файл конфигурации схемы <tt>jsTestDriver.conf</tt> и откроет файл в редакторе. В окне 'Проекты' отобразится, что файл конфигурации был создан в узле 'Файлы конфигурации'. Если развернуть папку <tt>lib</tt> в узле 'Тесты модулей', то будет видно, что к проекту были добавлены библиотеки Jasmine.</p> |
| <img alt="снимок экрана папки 'Тесты модулей' в окне 'Проекты'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-projectswindow.png" title="Папка 'Тесты модулей' в окне 'Проекты'"> |
| <p>В редакторе можно увидеть следующее содержимое файла конфигурации, которое создается по умолчанию:</p> |
| <pre class="examplecode">server: http://localhost:42442 |
| |
| load: |
| - test/lib/jasmine/jasmine.js |
| - test/lib/jasmine-jstd-adapter/JasmineAdapter.js |
| - test/unit/*.js |
| |
| exclude: |
| </pre> |
| <p>Файл конфигурации определяет местоположение по умолчанию на локальном сервере, который используется для запуска тестов. Также в файле указываются файлы, которые должны быть загружены. По умолчанию список включает в себя библиотеки Jasmine и все файлы JavaScript, которые находятся в папке <tt>unit</tt>. Тесты обычно находятся в папке <tt>unit</tt>, но можно изменить список, чтобы указать местоположение других файлов, которые необходимо загрузитьдля запуска тестов.</p> |
| <p>Папка <tt>модулей</tt> проекта 'Учебный курс по телефонному справочнику AngularJS' содержит четыре файла JavaScript с тестами модулей.</p> |
| <img alt="снимок экрана папки 'Тесты модулей' в окне 'Файлы'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-fileswindow.png" title="Папка 'Тесты модулей' в окне 'Файлы'"> |
| <p>Чтобы запустить тесты модулей, также можно добавить местоположение файлов JavaScript, которые необходимо протестировать, и библиотеки Angular JavaScript в список загружаемых файлов.</p> |
| </li> |
| <li>Добавьте следующие местоположения (выделены <strong>полужирным</strong> шрифтом) в раздел <tt>load</tt> файла конфигурации. Сохраните изменения. |
| |
| <pre class="examplecode"> |
| load: |
| - test/lib/jasmine/jasmine.js |
| - test/lib/jasmine-jstd-adapter/JasmineAdapter.js |
| - test/unit/*.js |
| <strong>- app/lib/angular/angular.js |
| - app/lib/angular/angular-*.js |
| - app/js/*.js |
| - test/lib/angular/angular-mocks.js</strong></pre> |
| </li> |
| <li>Отключите все точки останова, заданные в проекте. |
| <p>Точки останова можно отключить, сняв флажки для точек останова в окне 'Точки останова'.</p></li> |
| <li>Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Тестирование'. |
| |
| <p>После щелчка 'Тестировать IDE' автоматически открывается средство запуска JS Test в браузере Chrome и две вкладки в окне 'Выходные данные'.</p> |
| <img alt="снимок экрана jsTestDriver, запущенного в окне браузера" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-browserwindow.png" title="jsTestDriver запущен в окне браузера"> |
| <p>В окне браузера Chrome отображаетс сообщение о запуске сервера jsTestDriver. Отображается сообщение о том, что сервер запущен на <tt>localhost:42442</tt>. На вкладке 'Сервер js-test-driver' в окне 'Выходные данные' отображается состояние сервера.</p> |
| |
| <img alt="снимок экрана вкладки 'Сервер js-test-driver' в окне 'Выходные данные'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputstatus.png" title="вкладка 'Сервер js-test-driver' в окне 'Выходные данные'"> |
| |
| <p class="notes"><strong>Примечание.</strong> Для выполнения тестов модулей окно браузера должно быть открыто и сервер jsTestDriver должен быть запущен. Можно запустить сервер и открыть окно, щелкнув правой кнопкой мыши узел JS Test Driver в окне 'Службы' и выбрав 'Пуск'.</p> |
| |
| <p>На вкладке 'Выполнение тестирование модулей JS' в 'Выходных данных' отображаются выходные данные четырех выполненных тестов. Тесты расположены в файлах <tt>controllerSpec.js</tt> и <tt>filtersSpec.js</tt>. (У файлов <tt>servicesSpec.js</tt> и <tt>directivesSpec.js</tt> в папке <tt>unit</tt> отсутствуют тесты.)</p> |
| |
| <img alt="снимок экрана выполнения тестов JS Unit в окне 'Выходные данные'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow.png" title="Выполнение тестов JS Unit в окне 'Выходные данные'"> |
| </li> |
| <li>Выберите 'Окно' > 'Результаты' > 'Результаты тестов' в главном меню, чтобы открыть окно 'Результаты тестов'. |
| <p>В окне отображается сообщение, что все тесты прошли успешно.</p> |
| <img alt="Снимок экрана окна 'Результаты теста'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow.png" title="Окно 'Результаты теста'"> |
| |
| <p>Можно нажать зеленый флажок в левом границе окна, чтобы просмотреть расширенный список успешно пройденных тестов. </p></li> |
| </ol> |
| |
| |
| <!-- ++++++++++++++++ Debugging a JS Unit Test ++++++++++++++++ --> |
| <a name="debugtest"></a> |
| <h2>Отладка тестов JS Unit</h2> |
| |
| <p>Это упражнение демонстрирует, как можно использовать IDE для отладки файлов JavaScript при ошибке тестирования модуля.</p> |
| <ol> |
| <li>Разверните папку <tt>js</tt> в окне 'Проекты' и дважды щелкните файл <tt>controllers.js</tt>, чтобы открыть файл в редакторе.</li> |
| <li>Измените строку 7 в файле для внесения следующих изменений (выделены<strong>полужирным</strong> шрифтом). Сохраните изменения. |
| <pre class="examplecode">function PhoneListCtrl($scope, Phone) { |
| $scope.phones = Phone.query(); |
| $scope.orderProp = '<strong>name</strong>'; |
| }</pre> |
| <p>При сохранении изменений страница автоматически перезагружается в браузере. Отображается изменение порядка телефонов в списке.</p> |
| </li> |
| <li>Убедитесь, что сервер JS Test Driver запущен и что сообщение состояния отображается в окне браузера Chrome.</li> |
| <li>Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите команду 'Тестирование'.<br> <img alt="снимок экрана теста с ошибкой в окне 'Результаты теста'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow-fail.png" title="Тест с ошибкой в окне 'Результаты теста'"> |
| <p>При запуске теста можно увидеть, что в одном из тестов произошла ошибка с сообщением, что значение "name" было обнаружено вместо ожидаемого значения "age".</p></li> |
| <li>Откройте вкладку 'Выполнение тестов JS unit' в окне 'Выходные данные'.<br> <img alt="снимок экрана теста с ошибкой на вкладке 'Выполнение тестов JS Unit' в окне 'Выходные данные'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow-fail.png" title="Тест с ошибкой на вкладке 'Выполнениетестов JS Unit' в окне 'Выходные данные'"> |
| <p>Отображается сообщение о том, что <tt>orderProp</tt> должно быть <tt>age</tt> в строке 41.</p> |
| </li> |
| <li>Щелкните ссылку на вкладке 'Выполнение тестов модулей JS' для перехода к строке, в которой в тесте произошла ошибка. Файл теста <tt>controllersSpec.js</tt> открывается в редакторе в строке 41 (выделена <strong>полужирным</strong> шрифтом) |
| <pre class="examplecode">it('should set the default value of orderProp model', function() { |
| <strong>expect(scope.orderProp).toBe('age');</strong> |
| });</pre> |
| <p>Видно, что в тесте ожидалось "age" как значение <tt>scopeOrder.prop</tt>.</p> |
| </li> |
| <li>Установите точку останова в строке, где в тесте произошла ошибка (строка 41).</li> |
| <li>Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Тестирование'. |
| <p>При повторном запуске теста счетчик программы достигнет точки останова. При наведении курсора на <tt>scopeOrder.prop</tt> в подсказке видно, что переменная имеет значение "name" при достижении точки останова.</p> |
| <img alt="снимок экрана редактора, в котором отображается IDE, окна 'Оценка кода' и окна 'Переменные'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-evaluate.png" title="Редактор, в котором отображается IDE, окно 'Оценка кода' и окно 'Переменные'"> |
| <p>В качестве альтернативы можно выбрать 'Отладка' > 'Оценка выражений' в главном меню, чтобы открыть окно 'Оценка кода'. При вводе выражения <tt>scopeOrder.prop</tt> в окне и нажатии кнопки 'Оценить фрагмент кода' (<img alt="Кнопка 'Оценить выражение'" src="../../../images_www/articles/73/web/html5-js/evaluate-button.png" title="Кнопка 'Оценить выражение'">) (Ctrl-Enter) в отладчике отображается значение выражения в окне 'Переменные'.</p> |
| </li> |
| <li>Нажмите кнопку 'Продолжить' на панели инструментов, чтобы завершить выполнение теста.</li> |
| |
| </ol> |
| |
| |
| |
| <h2 id="summary">Заключение</h2> |
| |
| <p>В настоящем учебном курсе демонстрируется, как IDE предоставляет инструменты, которые могут использоваться при отладке и тестировании модулей в файлах JavaScript. Отладка включается автоматически для приложений HTML5 при запуске приложения в браузере Chrome при условии, что расширение NetBeans Connector включено. IDE также позволяет легко настроить и запускать тестирование модулей для файлов JavaScript с помощью платформы тестирования Jasmine и сервера JS Test Driver.</p> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Debugging%20and%20Testing%20JavaScript%20in%20HTML5%20Applications">Отправить отзыв по этому учебному курсу</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| <h2 id="seealso">См. также</h2> |
| |
| <p>Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте <a href="https://netbeans.org/">www.netbeans.org</a>:</p> |
| |
| <ul> |
| <li><a href="html5-gettingstarted_ru.html">Начало работы с приложениями HTML5</a>. Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5.</li> |
| <li><a href="html5-editing-css_ru.html">Работа со страницами стилей CSS в приложениях HTML5</a> Документ, который демонстрирует, как использовать некоторые из мастеров CSS и окон в IDE и режим проверки в браузере Chrome для визуального определения элементов в источниках проекта.</li> |
| <li><a href="../ide/javascript-editor_ru.html">Внесение изменений в код JavaScript</a>. В документе описаны основные возможности изменения кода JavaScript, предоставляемые в среде IDE.</li> |
| </ul> |
| |
| <p>Подробнее о запуске тестов модулей с помощью JS Test Driver см. следующую документацию:</p> |
| |
| <ul> |
| <li>Страница проекта JS Test Driver: <a href="http://code.google.com/p/js-test-driver/">http://code.google.com/p/js-test-driver/</a></li> |
| <li>Домашняя страница Jasmine: <a href="http://pivotal.github.com/jasmine/">http://pivotal.github.com/jasmine/</a></li> |
| <li><a href="http://transitioning.to/2012/07/magnum-ci-the-jenkins-chronicles-1-intro-to-jstestdriver/">Введение в JsTestDriver</a>. Введение в использование JsTestDriver с сервером непрерывной интеграции.</li> |
| </ul> |
| |
| |
| </body> |
| </html> |
