| <!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>Depurando e Testando JavaScript em Aplicações em HTML5 - Tutorial do 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>Depurando e Testando JavaScript em uma Aplicação em HTML5</h1> |
| |
| <p> |
| As aplicações em HTML5 costumam combinar HTML, CSS e JavaScript para criar aplicações executadas em um browser e exibidas em diversos dispositivos, incluindo smartphones, tablets e laptops. Este documento demonstra como o IDE oferece ferramentas que podem ajudá-lo a depurar e testar arquivos JavaScript no IDE.</p> |
| |
| <p>Quando você quiser depurar os arquivos JavaScript na sua aplicação HTML5, é recomendável que instale a extensão NetBeans Conector para o browser Chrome. A depuração é ativada automaticamente quando você executa a aplicação no browser e a extensão está instalada.</p> |
| <p>O IDE também permite configurar e executar facilmente testes de unidade em arquivos JavaScript usando o framework de teste Jasmine e os executores de teste Karma ou JS Test Driver. Você pode configurar o executor de teste para executar testes de unidade em diversos browsers, além de poder especificar rapidamente bibliotecas de JavaScript, scripts e testes que o IDE deverá carregar quando executar os testes. Quando um teste falhar, você pode usar o depurador para ajudá-lo a localizar o código problemático. |
| </p> |
| |
| <p class="tips">Para obter detalhes sobre como instalar a extensão NetBeans Connector para o browser Chrome, consulte o tutorial <a href="html5-gettingstarted.html">Conceitos Básicos sobre Aplicações em HTML5 </a>.</p> |
| |
| <p class="tips">Para obter mais informações sobre as funcionalidades de edição de JavaScript no IDE, consulte <a href="http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm#BACFIFIG">Criando Arquivos JavaScript</a> em <a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG">Desenvolvendo Aplicações com o NetBeans IDE - Guia do Usuário</a>.</p> |
| <p class="tips">Para assistir a um screencast deste tutorial, consulte<a href="../web/html5-javascript-screencast.html">Vídeo sobre Teste e Depuração de JavaScript em Aplicações HTML5 </a>.</p> |
| |
| <h3>Conteúdo</h3> |
| <img alt="O conteúdo desta página se aplica ao NetBeans IDE 8.0" class="stamp" src="../../../images_www/articles/80/netbeans-stamp.png" title="O conteúdo desta página se aplica ao NetBeans IDE 8.0"> |
| |
| <ul class="toc"> |
| <li><a href="#createproject">Criando a Aplicação do NetBeans em HTML5</a></li> |
| <li><a href="#debugger">Usando o Depurador JavaScript</a></li> |
| <li><a href="#unittests">Executando Testes em JS Unit</a> |
| <ul> |
| <li><a href="#karmatests">Como Executar Testes com Karma</a> |
| <li><a href="#jstestdriver">Como Executar Testes com JS Test Driver</a> |
| </ul> |
| </li> |
| <li><a href="#debugtest">Depurando um Teste de Unidade JS com JS Test Driver</a></li> |
| <li><a href="#summary">Resumo</a></li> |
| <li><a href="#seealso">Consulte Também</a></li> |
| </ul> |
| |
| <h4>Para concluir este tutorial, você precisará dos recursos a seguir:</h4> |
| |
| <table id="requiredSoftware"> |
| |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software ou Recurso</th> |
| <th class="tblheader" scope="col">Versão Necessária</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE, 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">JDK (Java Development Kit)</a></td> |
| <td class="tbltd1">7 ou 8</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.google.com/chrome">Browser 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">Extensão NetBeans Connector para Chrome</a></td> |
| <td class="tbltd1">1.x</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://code.google.com/p/js-test-driver/">JAR do JS Test Driver</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">Observações:</strong></p> |
| |
| <ul> |
| <li>Este documento usa o servidor JS Test Driver para executar testes de unidade em JavaScript. Você pode se familiarizar com a propriedades do servidor na <a href="http://code.google.com/p/js-test-driver/">página inicial do projeto JS Test Driver</a>.</li> |
| |
| <li>Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript.</li> |
| </ul> |
| |
| |
| <!-- ++++++++++++++++ Creating the Application ++++++++++++++++ --> |
| <a name="createproject"></a> |
| <h2>Criando a Aplicação de Exemplo do NetBeans em HTML5</h2> |
| <p>Execute as etapas a seguir para criar a aplicação de exemplo um modelo de site em HTML5.</p> |
| <ol> |
| <li>Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.</li> |
| <li>Expanda o nó <strong>Exemplos</strong> no assistente do Novo Projeto e selecione a categoria <strong>HTML5</strong>.</li> |
| <li>Selecione o projeto <strong>Tutorial do Catálogo de Telefone AngularJS</strong>. Clique em Próximo.<br> <img alt="tela do projeto de Exemplo no assistente de Novo Arquivo" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-newproject.png" title="Projeto Tutorial do Catálogo de Telefone AngularJS no assiste de Novo Arquivo"> |
| |
| </li> |
| <li>Selecione uma localização para o projeto. Clique em Finalizar. |
| <p class="notes"><strong>Observação.</strong> Observe que o URL do modelo é github. O IDE precisa acessar a rede para recuperar o archive do modelo. Verifique as definições de proxy na janela Opções se você encontrar problemas ao fazer download do archive.</p> |
| <p>Quando você clica em Finalizar, o IDE cria o projeto e abre o arquivo <tt>index.html</tt> no editor. Na janela Projetos, você pode ver que o projeto contém <tt>index.html</tt> e várias folhas de estilo de CSS e arquivos e bibliotecas JavaScript. </p> |
| <img alt="tela dos nós do projeto na janela Projetos" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-projectswindow.png" title="Nós do projeto Tutorial do Catálogo de Telefones AngularJS na janela Projetos"> |
| |
| <p>O projeto também inclui vários arquivos de configuração e teste de unidade JavaScript gerados por default. </p></li> |
| <li>Confirme que Chrome com Conector do NetBeans está selecionado na lista drop-down, na barra de ferramentas.<br> <img alt="tela da lista drop-down na barra de ferramentas" class="margin-around b-all" src="../../../images_www/articles/74/web/html5-js/html5-js-selectbrowser.png" title="Browser selecionado na lista drop-down na barra de ferramentas"></li> |
| <li>Clique no botão Executar na barra de ferramentas (F6) ou clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Executar. </li> |
| </ol> |
| <p>Quando você executa o projeto, a página frontal da aplicação em HTML5 é aberta no browser Chrome e você pode ver uma lista de telefones celulares. Quando você clica no nome de um telefone celular, a página exibe os detalhes do telefone.</p> |
| <img alt="tela da aplicação na janela do browser" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-runproject1.png" title="Aplicação Tutorial do Catálogo de Telefones AngularJS na janela do browser"> |
| |
| <p>Você perceberá que há uma barra amarela na guia do browser que o notifica que o NetBeans Connector está depurando a guia. O IDE e o browser são conectados e podem se comunicar um com o outro quando a barra amarela está visível. Quando você inicializa uma aplicação HTML5 do IDE, o depurador JavaScript é ativado automaticamente. Quando você salva as alterações em um arquivo ou faz alterações em uma folha de estilos CSS, não precisa recarregar a página, pois a janela do browser será atualizada automaticamente para exibir as alterações.</p> |
| |
| <p class="alert">Se você fechar a barra amarela ou clicar em Cancelar, quebrará a conexão entre o IDE e o browser. Se você interromper a conexão, será necessário executar novamente a aplicação em HTML5 a partir do IDE para usar o depurador JavaScript.</p> |
| |
| <p>Você obsevará também que o ícone do NetBeans ficará visível no campo do local do URL do browser. É possível clicar no ícone para abrir um menu que oferece várias opções para alterar o tamanho de exibição do browser e para ativar o modo Inspecionar no NetBeans.</p> |
| |
| <!-- ++++++++++++++++ Using the JavaScript Debugger ++++++++++++++++ --> |
| |
| <a name="debugger"></a> |
| <h2>Usando o Depurador JavaScript</h2> |
| <p>Neste exercício, você colocará um ponto de interrupção em um arquivo JavaScript e executará a aplicação. Você pode usar a dica de ferramenta no editor para ver rapidamente os valores de variáveis.</p> |
| <ol> |
| <li>Expanda o nó <tt>js</tt> na janela Projetos e clique duas vezes em <tt>controllers.js</tt> para abrir o arquivo no editor.</li> |
| <li>Coloque um ponto de interrupção de linha na linha 16 de <tt>controllers.js</tt> clicando na margem esquerda <br> <img alt="tela de ponto de interrupção definido no editor" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint1.png" title="Ponto de interrupção definido no editor"> |
| <p>Você pode exibir os pontos de interrupção definidos no projeto escolhendo Janela > Depuração > Pontos de Interrupção para abrir a janela Pontos de Interrupção.</p> |
| <img alt="tela de pontos de interrupção na janela Pontos de Interrupção" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint2.png" title="Lista de pontos de interrupção na janela Pontos de Interrupção"> |
| |
| </li> |
| |
| <li>Clique no botão Executar na barra de ferramentas para executar o projeto novamente. |
| <p>Quando você executar o projeto, verá a mesma página, porque o ponto de interrupção que você definiu não foi atingido.</p></li> |
| |
| <li>No browser, clique em uma das entradas na página, por exemplo, Motorola Atrix4G. |
| |
| <p>Você verá que a página foi parcialmente carregada, mas que os dados do telefone estão ausentes, pois eles não foram transmitidos para o JavaScript e renderizados.</p> |
| <img alt="tela da página de detalhes no browser" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-break-details.png" title="Página Detalhes da aplicação parcialmente carregada no browser"> |
| </li> |
| |
| <li>No editor no IDE, você pode ver que o ponto de interrupção foi atingido e que o Contador do Programa está atualmente na linha 16 de <tt>controllers.js</tt>.</li> |
| <li>Passe o cursor na variável <tt>phone</tt> para exibir uma dica de ferramenta com informações sobre a variável.<br> <img alt="tela de dica de ferramenta das variáveis no editor" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-variables1.png" title="Dica de ferramentas no editor"> |
| |
| <p>Na dica de ferramentas, você pode ver as seguintes informações: <tt>telefone = (Recurso) Recurso</tt>.</p> |
| </li> |
| <li>Clique na dica de ferramenta para expandi-la e exibir uma lista das variáveis e valores.<br> <img alt="tela de dica de ferramenta das variáveis expandida no editor" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-variables.png" title="Dica de ferramenta das variáveis expandida no editor"> |
| <p>Por exemplo, quando você expande o nó <tt>android</tt>, pode ver os valores das strings <tt>os</tt> e <tt>ui</tt>..</p> |
| <p class="tips">Você também pode escolher Janela > Depuração > Variáveis para exibir a lista na janela Variáveis.</p></li> |
| |
| <li>Use os botões de etapas da barra de ferramentas para avançar nas funções de JavaScript na biblioteca <tt>angular.js</tt> ou clique no botão Continuar (F5) para continuar a aplicação. </li> |
| </ol> |
| |
| |
| <!-- ++++++++++++++++ Running JS Unit Tests ++++++++++++++++ --> |
| <a name="unittests"></a> |
| <h2>Executando Testes em JS Unit</h2> |
| <p>Você pode configurar facilmente o IDE para usar o executor de teste Karma ou JS Test Driver na execução de testes de unidade. Karma e JS Test Driver são executores de teste que fornecem um URL de destino da execução dos testes de unidade JavaScript.</p> |
| |
| <p>Neste tutorial, você usará o Karma para executar os testes de unidade JavaScript que foram incluídos no projeto de amostra. O projeto de amostra já inclui um arquivo de configuração do Karma. Quando você executa seus testes, o servidor executor de teste é iniciado e aguarda para executar os testes. Seu browser é aberto e exibe uma mensagem de status na janela que confirma que o servidor está em execução e aguardando.</p> |
| |
| <a name="karmatests"></a> |
| <div class="indent"> |
| <h3>Como Executar Testes com Karma</h3> |
| <p>Para executar testes com Karma, é preciso primeiramente fazer download do Karma em seu sistema de arquivos local. Depois de instalar o Karma, será preciso criar um arquivo de configuração de Karma e depois especificar o local do arquivo de instalação e configuração na janela Propriedades do Projeto.</p> |
| <ol> |
| <li>Instale o Karma. |
| <p>Você pode escolher como e onde deseja instalar o Karma. A instalação deverá ser especificada posteriormente na configuração do projeto para usar o Karma. Encontre informações sobre as opções de instalação do Karma no <a href="http://karma-runner.github.io">site do Karma</a>.</p></li> |
| <li>Crie um arquivo de configuração de Karma. |
| <p>Neste tutorial, esta etapa é opcional porque a aplicação de amostra já inclui um arquivo de configuração de Karma. Você pode criar um arquivo de configuração de Karma base selecionando Arquivo de Configuração do Karma na categoria Testes de Unidade do assistente de Novo Arquivo.</p> |
| <img alt="captura de tela do novo Arquivo de Configuração do Karma no assistente de Novo Arquivo" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-new-config.png" title="Novo Arquivo de Configuração do Karma no assistente de Novo Arquivo"> |
| <p>Como alternativa, execute o comando <tt>init</tt> do Karma na linha de comandos. Consulte a documentação do Karma para obter mais detalhes sobre o uso do comando <tt>init</tt>.</p> |
| </li> |
| |
| <li>Expanda o nó Arquivos de Configuração na janela Projetos e clique duas vezes em <tt>karma.conf.js</tt> para abrir o arquivo no editor. Observe que a amostra inclui dois arquivos de configuração do Karma. |
| <p>No arquivo de configuração do Karma, você pode ver os arquivos que serão incluídos e excluídos na execução dos testes. Pode ver também os plug-ins do Karma que são exigidos para executar os testes com essa configuração.</p> |
| <img alt="captura de tela do arquivo de configuração do Karma no editor" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-plugins.png" title="Arquivo de configuração do Karma no editor"></li> |
| <li>Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades no menu pop-up.</li> |
| <li>Selecione a categoria Teste JavaScript no painel Categorias da janela Propriedades do Projeto.</li> |
| <li>Selecione Karma na lista drop-down Provedor de Testes. Clique em OK.</li> |
| <li>Abra a janela Propriedades do Projeto novamente e selecione Karma sob a categoria Teste JavaScript no painel Categorias.</li> |
| <li>Especifique o local da instalação do Karma. |
| <p>Se você tiver instalado o Karma no diretório de projetos, poderá clicar em Pesquisar e o IDE encontrará a instalação. Você também pode clicar em Procurar para localizar manualmente a instalação do Karma local.</p> |
| </li> |
| <li>Especifique o local do arquivo de configuração do Karma. Clique em OK. |
| <p>Neste tutorial, você pode clicar em Pesquisar e o IDE encontrará o arquivo de configuração padrão do Karma. Pode também clicar em Procurar para localizar manualmente um arquivo de configuração.</p> |
| <img alt="captura de tela da categoria Karma na janela Propriedades do Projeto" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-properties-window.png" title="Categoria Karma na janela Propriedades do Projeto"> |
| |
| <p>Ao clicar em OK, você vê que um nó Karma aparece sob o nó do projeto na janela Projetos. Clique com o botão direito do mouse no nó Karma e inicie/interrompa o servidor Karma e defina o arquivo de configuração no menu pop-up.</p> |
| </li> |
| <li>Na janela Projetos, clique com o botão direito do mouse no nó karma e escolha Iniciar no menu pop-up. |
| <p>Quando você clica em Iniciar o Karma, o servidor é iniciado e uma janela do browser é aberta exibindo o status do servidor.</p> |
| <img alt="captura de tela de status do servidor Karma na janela do browser Chrome" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-chrome.png" title="Status do servidor Karma na janela do browser Chrome"> |
| <p>Na janela Saída, você pode ver o status do servidor. É solicitada também a instalação dos plug-ins ausentes.</p> |
| <img alt="tela do nó Configurar JS Test Driver na janela Serviços" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-output1.png" title="Nó Configurar JS Test Driver na janela Serviços"> |
| <p class="notes"><strong>Observação.</strong> A janela do browser deve estar aberta e o servidor Karma deve estar em execução para executar os testes de unidade.</p> |
| </li> |
| <li>Clique com o botão direito do mouse no nó e escolha Definir Configuração > <tt>karma.conf.js</tt> para confirmar a seleção do arquivo de configuração correto. <img alt="tela do nó Configurar JS Test Driver na janela Serviços" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-node.png" title="Nó Configurar JS Test Driver na janela Serviços"></li> |
| <li>Desative quaisquer pontos de interrupção definidos no projeto. |
| <p>Você pode desativar pontos de interrupção desmarcando a caixa de seleção para pontos de interrupção na janela Pontos de Interrupção.</p></li> |
| <li>Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes. |
| <p>Quando você escolhe Testar, o executor de teste executa os testes de unidade nos arquivos. O IDE abre a janela Resultados do Teste e exibe os resultados.</p> |
| <img alt="tela da janela Resultados de Teste" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-test-results.png" title="Resultados do teste do Karma"> |
| </li> |
| |
| </ol> |
| |
| <a name="jstestdriver"></a> |
| <h3>Como Executar Teste com JS Test Driver</h3> |
| <p>Se você quiser usar o JS Test Driver, o IDE oferece uma caixa de diálogo de configuração para o JS Test Driver que você pode abrir no nó JS Test Driver nos Serviços. Essa caixa de diálogo permite que você especifique facilmente o local do JAR do servidor JS Test Driver e os browsers em que você quer executar os testes. O nó JS Test Driver permite facilmente ver se o servidor está em execução e iniciar e parar o servidor.</p> |
| |
| |
| <p>Para obter mais detalhes sobre como configurar o JS Test Driver, consulte a documentação <a href="http://code.google.com/p/js-test-driver/wiki/GettingStarted">Conceitos Básicos sobre JsTestDriver</a>.</p> |
| |
| <ol> |
| <li>Faça download de <a href="http://code.google.com/p/js-test-driver/">JAR do JS Test Driver</a> e salve o JAR no sistema local.</li> |
| <li>Na janela Serviços, clique com o botão direito do mouse no nó JS Test Driver e escolha Configurar. <br> <img alt="tela do nó Configurar JS Test Driver na janela Serviços" class="margin-around b-all" src="../../../images_www/articles/74/web/html5-js/html5-js-testdriver-serviceswindow.png" title="Nó Configurar JS Test Driver na janela Serviços"></li> |
| <li>Na caixa de diálogo Configurar, clique em Procurar e localize o JAR do JS Test Driver que você obteve por download.</li> |
| <li>Selecione Chrome com Conector NetBeans (no NetBeans IDE 7.3, selecione Chrome com Depurador JS do NetBeans) para o browser. Clique em OK.<br> <img alt="tela da caixa de diálogo Configurar js Test Driver" class="margin-around b-all" src="../../../images_www/articles/74/web/html5-js/html5-js-testdriver-configure.png" title="Caixa de diálogo Configurar JS Test Driver"> |
| <p class="notes"><strong>Observações.</strong> Você só precisa especificar o local do JAR do JS Test Driver. na primeira vez que configurar o JS Test Driver.</p> |
| |
| <p>A lista de browsers que pode ser obtida e usada para teste se baseia nos browsers instalados no seu sistema. Você pode selecionar vários browsers como slaves, mas para executar o teste, é necessário abrir uma janela que possa ser um slave para o servidor para cada browser. O browsers selecionados serão capturados automaticamente, quando você iniciar o servidor do IDE.</p> |
| <p>A seleção do Chrome com NetBeans Connector permite depurar os testes executados com o JS Test Driver.</p> |
| |
| </li> |
| <li>Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Novo > Outro.</li> |
| <li>Selecione o <strong>Arquuivo de Configuração jsTestDriver</strong> na categoria Testes da Unidade. Clique em Próximo.</li> |
| <li>Confirme se <strong>jsTestDriver</strong> é o Nome do Arquivo.</li> |
| <li>No campo Criar Arquivo, confirme se o local dos arquivos é a pasta <tt>config</tt> do projeto (<tt>AngularJSPhoneCat/config/jsTestDriver.conf</tt>). |
| <p class="notes"><strong>Observação.</strong> O arquivo de configuração <tt>jstestdriver.conf</tt> deve estar no <tt>config folder</tt> do projeto. Se o local do arquivo criado não for a <tt>pasta config</tt>, clique em Procurar e selecione <tt>AngularJSPhoneCat - Arquivos de Configuração</tt> na caixa de diálogo.</p> |
| </li> |
| <li>Confirme se a caixa de seleção para fazer download das bibliotecas do Jasmine está selecionada. Clique em Finalizar.<br> <img alt="tela do assistente do Novo Arquivo de Configuração jsTestDriver" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-configfile.png" title="Assistente do Novo Arquivo de Configuração jsTestDriver"> |
| |
| <p class="notes"><strong>Observação.</strong>É necessário fazer download das bibliotecas do Jasmine para executar o jsTestDriver. Se você for notificado de que o IDE não pode fazer download das bibliotecas do Jasmine, verifique as configurações de proxy do IDE na janela Opções.</p> |
| |
| <p>Quando você clicar em Finalizar, o IDE irá gerar um arquivo de configuração de estrutura <tt>jsTestDriver.conf</tt> e abrirá o arquivo no editor. Na janela Projetos, você poderá ver se o arquivo de configuração foi criado no nó Arquivos de Configuração. Se você expandir a pasta <tt>lib</tt> sob Testes de Unidade, poderá ver que as bibliotecas do Jasmine foram adicionados ao projeto.</p> |
| <img alt="tela da pasta Testes de Unidade na janela Projetos" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-projectswindow.png" title="Pasta Testes de Unidade na janela Projetos"> |
| <p>No editor, você pode ver o seguinte conteúdo do arquivo de configuração gerado por default:</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>O arquivo de configuração especifica a localização default do servidor local que é usado para executar os testes. O arquivo também deve listar os arquivos que precisam ser carregados. Por default, a lista inclui bibliotecas do Jasmine e quaisquer arquivos JavaScript da pasta <tt>unidade</tt>. Os testes geralmente se localizam na pasta <tt>unidade</tt>, mas você pode modificar a lista para especificar as localizações de outros arquivos que devem ser carregados para executar os testes. Para executar os testes de unidade. você também precisa adicionar a localização dos arquivos JavaScript que deseja testar e as bibliotecas JavaScript do Angular à lista de arquivos que serão carregados.</p> |
| <p>Neste tutorial, se você quiser executar testes usando o JS Test Driver, adicione os seguintes arquivos (em negrito) à lista de arquivos carregados.</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>Depois de atualizar o arquivo de configuração, na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Testar. |
| |
| <p>Quando você clica em Testar, o IDE abre automaticamente o executor JS Test no browser Chrome e duas guias na janela de Saída.</p> |
| <img alt="tela de jsTestDriver em execução na janela do browser" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-browserwindow.png" title="jsTestDriver em execução na janela do browser"> |
| <p>A janela do browser Chrome exibe uma mensagem quando o servidor jsTestDriver está sendo executado. Você pode ver que o servidor está sendo executado no <tt>localhost:42442</tt>. Na guia Servidor do js-test-driver, na janela de Saída, você pode ver o status do servidor.</p> |
| <p>Observe que o JsTestDriver está em execução em uma guia do browser e o NetBeans Connector está depurando a guia. Você poderá depurar suas unidades de teste se executar testes com o JS Test Driver e selecionar o Chrome com NetBeans Connector como um dos browsers de destino.</p> |
| <img alt="tela da guia Servidor do js-test-driver na janela de Saída" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputstatus.png" title="Guia Servidor do js-test-driver na janela de Saída"> |
| |
| <p class="notes"><strong>Observação.</strong> A janela do browser deve estar aberta e o servidor jsTestDriver deve estar em execução para executar os testes de unidade. Você pode iniciar o servidor e abrir a janela clicando com o botão direito do mouse no nó JS Test Driver na janela Serviços e escolhendo Iniciar.</p> |
| |
| |
| |
| <img alt="tela da guia Executando testes de unidade JS na janela de Saída" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow.png" title="Guia Executando testes de unidade JS na janela de Saída"> |
| </li> |
| <li>Escolha Janela > Saída > Resultados do Teste no menu principal para abrir a janela Resultados do Teste e ver os resultados.<br> <img alt="tela da janela Resultados de Teste" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/html5-js-testdriver-testresultswindow.png" title="Janela Resultados do Teste"> |
| |
| <p>Você pode clicar no ícone de marcação verde na margem esquerda da janela para exibir as a lista expandida dos testes aprovados. </p></li> |
| </ol> |
| |
| </div> |
| |
| <!-- ++++++++++++++++ Debugging a JS Unit Test ++++++++++++++++ --> |
| <a name="debugtest"></a> |
| <h2>Depurando um Teste de Unidade JS com JS Test Driver</h2> |
| |
| <p>Este exercício demonstra como usar o IDE e o JS Test Driver para depurar unidades de teste.</p> |
| <p class="notes"><strong>Observação.</strong> O NetBeans IDE 8.0 não suporta depuração testes feitos com o executor de teste Karma.</p> |
| <ol> |
| <li>Expanda a pasta <tt>js</tt> na janela Projetos e clique duas vezes em <tt>controllers.js</tt> para abrir o arquivo no editor.</li> |
| <li>Modifique a linha 7 no arquivo para fazer as alterações a seguir (em <strong>negrito</strong>). Salve as alterações. |
| <pre class="examplecode">function PhoneListCtrl($scope, Phone) { |
| $scope.phones = Phone.query(); |
| $scope.orderProp = '<strong>name</strong>'; |
| }</pre> |
| <p>Quando você salva as alterações, a página no web browser é recarregada automaticamente. Você pode ver que a ordem dos telefones na lista foi alterada.</p> |
| </li> |
| <li>Confirme se o servidor JS Test Driver está sendo executado e se a mensagem de status está visível na janela do browser Chrome.</li> |
| <li>Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes.<br> <img alt="tela da janela teste reprovado nos Resultados de Teste" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow-fail.png" title="Janela Teste Reprovado nos Resultados de Teste"> |
| <p>Quando você executar o teste, poderá ver que um dos testes falhou com a mensagem que o valor "nome" foi encontrado em vez de o valor esperado "idade".</p></li> |
| <li>Abra a guia Executando testes de unidade JS na janela de Saída.<br> <img alt="tela da guia Teste Reprovado na Execução dos testes de unidade JS na janela de Saída" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow-fail.png" title="Guia Teste Reprovado na Execução dos testes de unidade JS na janela de Saída"> |
| <p>Você poderá ver a mensagem de que é esperado que <tt>orderProp</tt> seja <tt>idade</tt> na linha 41.</p> |
| </li> |
| <li>Clique no link na guia Executando testes de unidade JS para navegar até a linha em que o teste falhou. O arquivo de teste <tt>controllersSpec.js</tt> será aberto no editor na linha 41 (em <strong>negrito</strong>) |
| <pre class="examplecode">it('should set the default value of orderProp model', function() { |
| <strong>expect(scope.orderProp).toBe('age');</strong> |
| });</pre> |
| <p>Você pode ver que o teste esperava "idade" como o valor de <tt>scopeOrder.prop</tt>.</p> |
| </li> |
| <li>Defina um ponto de interrupção na linha em que ocorreu a falha no teste (linha 41).</li> |
| <li>Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes. |
| <p>Quando você executar o teste novamente, o contador do programa atingirá o limite de ponto de interrupção. Se você passar o cursor sobre <tt>scopeOrder.prop</tt>, poderá ver na dica de ferramenta que o valor da variável é "nome" quando o ponto de interrupção for atingido.</p> |
| <img alt="tela de IDE mostrando editor, janela Avaliar Código e janela Variáveis" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-evaluate.png" title="IDE mostrando editor, janela Avaliar Código e janela Variáveis"> |
| <p>Como alternativa, você poderá selecionar Depurar > Avaliar Expressão no menu principal para abrir a janela Avaliar Código. Se você digitar a expressão <tt>scopeOrder.prop</tt> na janela e clicar no botão Avaliar Fragmento do Código (<img alt="Botão Avaliar Expressão" src="../../../images_www/articles/73/web/html5-js/evaluate-button.png" title="Botão Avaliar Expressão">)(Ctrl-Enter), o depurador exibirá o valor da expressão na janela Variáveis.</p> |
| </li> |
| <li>Clique em Continuar na barra de ferramentas para finalizar a execução do teste.</li> |
| |
| </ol> |
| |
| |
| |
| <h2 id="summary">Resumo</h2> |
| |
| <p>Neste tutorial, você aprendeu que o IDE oferece ferramentas que podem ajudá-lo a depurar e executar testes de unidade em arquivos JavaScript. A depuração é automaticamente ativada para aplicações em HTML5 quando você executa a aplicação no browser Chrome e a extensão NetBeans Connector está ativada. O IDE também permite configurar e executar facilmente testes de unidade em arquivos JavaScript usando o framework de teste Jasmine e o servidor 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">Enviar Feedback neste Tutorial</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| <h2 id="seealso">Consulte Também</h2> |
| |
| <p>Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em <a href="https://netbeans.org/">netbeans.org</a>:</p> |
| |
| <ul> |
| <li><a href="html5-gettingstarted.html">Conceitos Básicos sobre Aplicações em HTML5</a>. Um documento que demonstra como instalar a extensão NetBeans Connector para Chrome e criar e executar uma aplicação simples em HTML5.</li> |
| <li><a href="html5-editing-css.html">Trabalhando com Folhas de Estilo de CSS em Aplicações em HTML5</a>. Um documento que demonstra como usar alguns assistentes de CSS e janelas do IDE e como usar o modo Inspecionar no browser Chrome para localizar visualmente os elementos nas origens do projeto.</li> |
| <li>Capítulo <a href="http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm">Desenvolvendo Aplicações HTML5</a> em <a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG">Desenvolvendo Aplicações com o NetBeans IDE - Guia do Usuário</a> </li> |
| </ul> |
| |
| <p>Para obter mais informações sobre a execução de testes de unidade usando JS Driver Test, consulte a seguinte documentação:</p> |
| |
| <ul> |
| <li>Página do Projeto JS Test Driver: <a href="http://code.google.com/p/js-test-driver/">http://code.google.com/p/js-test-driver/</a></li> |
| <li>Página Inicial do 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/">Introdução ao JsTestDriver</a>. Uma introdução ao uso do JsTestDriver com um servidor de integração contínua.</li> |
| </ul> |
| |
| |
| </body> |
| </html> |
