| <!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> |
| Приложения HTML5 обычно сочетают HTML, CSS и JavaScript для создания приложений, которые запускаются в браузерах и которые отображаются на различных устройствах, включая смартфоны, планшеты и ноутбуки. В настоящем документе показано, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.</p> |
| |
| <p>Если необходимо выполнять отладку файлов JavaScript в приложении HTML5, рекомендуется установить расширение NetBeans Connector для браузера Chrome. Поддержка отладки включается автоматически при запуске приложения в браузере и установке расширения.</p> |
| <p>IDE также позволяет с легкостью настраивать и выполнять тестирование модулей для файлов JavaScript на тестовой платформе Jasmine с помощью исполнителей тестов Karma или JS Test Driver. Исполнители тестов можно настроить для выполнения модульных тестов с использованием различных браузеров. Кроме того, в них можно мгновенно выбрать библиотеки, сценарии и тесты JavaScript, которые необходимо загружать в IDE при выполнении тестов. В случае ошибки теста можно воспользоваться отладчиком для поиска кода с ошибкой. |
| </p> |
| |
| <p class="tips">Подробнее об установке расширения NetBeans Connector для браузера Chrome см. в учебном курсе <a href="html5-gettingstarted.html">Начало работы с приложениями HTML5</a>.</p> |
| |
| <p class="tips">Дополнительные сведения о функциях редактирования JavaScript в IDE см. в разделе <a href="http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm#BACFIFIG">Создание файлов JavaScript</a> в документе <a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG">Руководство по разработке приложений в IDE NetBeans</a>.</p> |
| <p class="tips">Для просмотра демонстрационного ролика этого учебного курса см. раздел <a href="../web/html5-javascript-screencast.html">Видеоролик по тестированию и отладке JavaScript в приложениях HTML5</a>.</p> |
| |
| <h3>Содержание</h3> |
| <img alt="Содержимое на этой странице применимо к IDE NetBeans 8.0" class="stamp" src="../../../images_www/articles/80/netbeans-stamp.png" title="Содержимое на этой странице применимо к IDE NetBeans 8.0"> |
| |
| <ul class="toc"> |
| <li><a href="#createproject">Создание приложения HTML5 NetBeans</a></li> |
| <li><a href="#debugger">Использование отладчика JavaScript</a></li> |
| <li><a href="#unittests">Выполнение тестов JS Unit</a> |
| <ul> |
| <li><a href="#karmatests">Выполнение тестов с помощью Karma</a> |
| <li><a href="#jstestdriver">Выполнение тестов с помощью JS Test Driver</a> |
| </ul> |
| </li> |
| <li><a href="#debugtest">Отладка модульных тестов JS с помощью JS Test Driver</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">8.0</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">7 или 8</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.x</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 class="notes"><strong>Примечание.</strong> Обратите внимание, что в качестве URL-адреса шаблона указано значение github. Для получения архива шаблона IDE требуется доступ в сеть. В случае возникновения проблем с загрузкой архива проверьте настройки прокси-сервера в окне "Параметры".</p> |
| <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 Connector.<br> <img alt="снимок экрана раскрывающегося списка на панели инструментов" class="margin-around b-all" src="../../../images_www/articles/74/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="unittests"></a> |
| <h2>Выполнение тестов JS Unit</h2> |
| <p>IDE можно с легкостью настроить для выполнения модульного тестирования с помощью исполнителей тестов Karma или JS Test Driver. Karma и JS Test Driver - исполнители тестов, предоставляющие целевой URL-адрес для выполнения модульных тестов JavaScript.</p> |
| |
| <p>В этом учебном курсе показано, как выполнять модульные тесты JavaScript, включенные в состав образца проекта, с помощью исполнителя тестов Karma. В образец проекта уже включен файл конфигурации Karma. При запуске тестов запускается тестовый сервер и ожидает выполнения тестов. В окне браузера отображается статусное сообщение сервера, указывающее на то, что сервер запущен и находится в режиме ожидания.</p> |
| |
| <a name="karmatests"></a> |
| <div class="indent"> |
| <h3>Выполнение тестов с помощью Karma</h3> |
| <p>Для выполнения тестов с помощью Karma прежде всего необходимо загрузить Karma и сохранить файл на локальном компьютере. После установки Karma потребуется создать файл конфигурации Karma, а затем указать папку установки и путь к файлу конфигурации в окне "Свойства проекта".</p> |
| <ol> |
| <li>Установите Karma. |
| <p>Вы можете выбрать способ и папку назначения для установки Karma. Папку установки можно указать позже при настройке проекта для работы с Karma. Сведения о вариантах установки Karma можно найти на <a href="http://karma-runner.github.io">веб-сайте Karma</a>.</p></li> |
| <li>Создайте файл конфигурации Karma. |
| <p>В рамках данного учебного курса этот этап можно пропустить, так как файл конфигурации Karma уже включен в состав образца приложения. Чтобы создать структуру файла конфигурации Karma, выберите "Файл конфигурации Karma" в категории "Модульные тесты" мастера создания файлов.</p> |
| <img alt="снимок нового файла конфигурации Karma в мастере создания файлов" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-new-config.png" title="Новый файл конфигурации Karma в мастере создания файлов"> |
| <p>Также можно выполнить команду Karma <tt>init</tt> в командной строке. Дополнительные сведения об использовании команды Karma <tt>init</tt> см. в документации Karma.</p> |
| </li> |
| |
| <li>Разверните узел "Файлы конфигурации" в окне "Проекты" и дважды щелкните файл <tt>karma.conf.js</tt>, чтобы открыть его в редакторе. Обратите внимание, что образец проекта включает в себя два файла конфигурации Karma. |
| <p>В файле конфигурации Karma перечислены файлы, которые необходимо обрабатывать или исключать при выполнении тестов. Также здесь перечислены подключаемые модули Karma, которые требуются для выполнения тестов в данной конфигурации.</p> |
| <img alt="снимок файла конфигурации Karma в редакторе" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-plugins.png" title="Файл конфигурации Karma в редакторе"></li> |
| <li>Правой кнопкой мыши щелкните узел проекта в окне "Проекты" и выберите "Свойства" во всплывающем меню.</li> |
| <li>Выберите категорию "Тестирование JavaScript" в разделе "Категории" окна "Свойства проекта".</li> |
| <li>В списке "Тестовый провайдер" выберите Karma. Нажмите OK.</li> |
| <li>Снова откройте окно "Свойства проекта" и выберите Karma в категории "Тестирование JavaScript" в разделе "Категории".</li> |
| <li>Укажите путь к папке установки Karma. |
| <p>Если установка Karma была выполнена в каталог проекта, можно нажать "Поиск", и IDE обнаружит папку установки автоматически. Также можно нажать кнопку "Обзор" и выбрать папку установки Karma вручную.</p> |
| </li> |
| <li>Укажите путь к файлу конфигурации Karma. Нажмите OK. |
| <p>В рамках данного учебного курса вы можете нажать кнопку "Поиск", и IDE обнаружит файл конфигурации Karma, используемый по умолчанию. Также можно нажать кнопку "Обзор" и выбрать файл конфигурации вручную.</p> |
| <img alt="снимок категории "Karma" в окне "Свойства проекта"" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-properties-window.png" title="Категория "Karma" в окне "Свойства проекта""> |
| |
| <p>При нажатии на кнопку ОК под узлом проекта в окне "Проекты" появится узел Karma. Щелкните узел Karma правой кнопкой мыши, чтобы запустить/остановить сервер Karma или выбрать файл конфигурации.</p> |
| </li> |
| <li>Щелкните правой кнопкой мыши узел "Karma" в окне "Проекты" и выберите пункт меню "Запуск". |
| <p>В результате будет запущен сервер Karma и откроется окно браузера с сообщением о статусе сервера.</p> |
| <img alt="снимок статуса сервера Karma в окне браузера Chrome" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-chrome.png" title="Статус сервера Karma в окне браузера Chrome"> |
| <p>В окне "Результаты" отображаются сведения о статусе сервера. Также программа предлагает установить отсутствующие модули (если необходимо).</p> |
| <img alt="снимок экрана настройки узла 'jsTest Driver' в окне 'Службы'" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-output1.png" title="Настройка узла 'jsTest Driver' в окне 'Службы'"> |
| <p class="notes"><strong>Примечание.</strong> Для выполнения тестов должно быть открыто окно браузера и запущен сервер Karma.</p> |
| </li> |
| <li>Щелкните правой кнопкой мыши узел Karma и выберите "Выбрать конфигурацию > <tt>karma.conf.js</tt>", чтобы программа использовала верный файл конфигурации. <img alt="снимок экрана настройки узла 'jsTest Driver' в окне 'Службы'" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-node.png" title="Настройка узла 'jsTest Driver' в окне 'Службы'"></li> |
| <li>Отключите все точки останова, заданные в проекте. |
| <p>Точки останова можно отключить, сняв флажки для точек останова в окне 'Точки останова'.</p></li> |
| <li>Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Тестирование'. |
| <p>Если выбрать пункт меню "Тестирование" исполнитель тестов запускает модульные тесты для файлов. В IDE открывается окно "Результаты тестов", в котором отображаются результаты тестирования.</p> |
| <img alt="Снимок экрана окна 'Результаты теста'" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-test-results.png" title="Результаты тестирования Karma"> |
| </li> |
| |
| </ol> |
| |
| <a name="jstestdriver"></a> |
| <h3>Выполнение тестов с помощью JS Test Driver</h3> |
| <p>Параметры использования JS Test Driver в 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/74/web/html5-js/html5-js-testdriver-serviceswindow.png" title="Настройка узла 'jsTest Driver' в окне 'Службы'"></li> |
| <li>В диалоговом окне 'Настроить' щелкните 'Обзор' и найдите загруженный файл JAR JS Test Driver.</li> |
| <li>Выберите Chrome с NetBeans Connector (в NetBeans IDE 7.3 - Chrome с NetBeans JS Debugger) в качестве браузера. Нажмите кнопку ОК.<br> <img alt="снимок экрана диалогового окна 'Настройка узла jsTest Driver'" class="margin-around b-all" src="../../../images_www/articles/74/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> |
| <p>Если выбран вариант "Chrome с подключаемым модулем NetBeans", появляется возможность отладки тестов, выполняемых с помощью JS Test Driver.</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>, но можно изменить список, чтобы указать местоположение других файлов, которые необходимо загрузитьдля запуска тестов. Чтобы запустить тесты модулей, также можно добавить местоположение файлов JavaScript, которые необходимо протестировать, и библиотеки Angular JavaScript в список загружаемых файлов.</p> |
| <p>В рамках данного учебного курса для выполнения тестов с помощью JS Test Driver потребуется добавить в список загружаемых файлов следующие файлы (выделены полужирным шрифтом).</p> |
| <pre class="examplecode">load: |
| - test/lib/jasmine/jasmine.js |
| - test/lib/jasmine-jstd-adapter/JasmineAdapter.js |
| <strong> |
| - 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 |
| </strong> |
| - test/unit/*.js</pre> |
| </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> |
| <p>Обратите внимание, что JsTestDriver выполняется на вкладке браузера, а подключаемый модуль NetBeans выполняет отладку вкладки. Возможность отладки модульных тестов становится доступна при выполнении тестов с помощью JS Test Driver, если в качестве одного из целевых браузеров выбран вариант "Chrome с подключаемым модулем NetBeans".</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> |
| |
| |
| |
| <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>Выберите "Окно > Результаты > Результаты тестов" в главном меню, чтобы открыть окно "Результаты тестов" и просмотреть итоги выполнения. <br> <img alt="Снимок экрана окна 'Результаты теста'" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/html5-js-testdriver-testresultswindow.png" title="Окно 'Результаты теста'"> |
| |
| <p>Можно нажать зеленый флажок в левом границе окна, чтобы просмотреть расширенный список успешно пройденных тестов. </p></li> |
| </ol> |
| |
| </div> |
| |
| <!-- ++++++++++++++++ Debugging a JS Unit Test ++++++++++++++++ --> |
| <a name="debugtest"></a> |
| <h2>Отладка модульных тестов JS с помощью JS Test Driver</h2> |
| |
| <p>В этом упражнении показано, как выполнять отладку модульных тестов в IDE с помощью JS Test Driver.</p> |
| <p class="notes"><strong>Примечание.</strong> NetBeans IDE 8.0 не поддерживает отладку тестов, выполняемых с помощью Karma.</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.html">Начало работы с приложениями HTML5</a>. Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5.</li> |
| <li><a href="html5-editing-css.html">Работа со страницами стилей CSS в приложениях HTML5</a> Документ, который демонстрирует, как использовать некоторые из мастеров CSS и окон в IDE и режим проверки в браузере Chrome для визуального определения элементов в источниках проекта.</li> |
| <li>Глава <a href="http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm">Разработка приложений HTML5</a> в документе <a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG">Руководство по разработке приложений в IDE NetBeans</a> </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> |
