| <!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>O NetBeans IDE 7.3 introduz um novo tipo de projeto para ajudá-lo a desenvolver aplicações em HTML5. 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 o servidor JS Test Driver. Você pode configurar o JS Test Driver para executar testes de unidade em diversos browsers, e pode especificar rapidamente as bibliotecas de JavaScript, scripts e testes que quer que o IDE carregue 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_pt_BR.html">Conceitos Básicos sobre Aplicações em HTML5 </a>.</p> |
| |
| <p class="tips">Para obter uma visão geral das funcionalidades de edição de JavaScript no IDE, consulte <a href="../ide/javascript-editor_pt_BR.html">Editando JavaScript no NetBeans IDE.</a>.</p> |
| <p class="tips">Para assistir a um screencast deste tutorial, consulte<a href="../../docs/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 aplica-se ao NetBeans IDE 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="O conteúdo desta página se aplica ao NetBeans IDE 7.3"> |
| |
| <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="#unittest">Executando Testes em JS Unit</a></li> |
| <li><a href="#debugtest">Depurando um Teste no JS Unit </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">7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">6 ou 7</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.0.0</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>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 Integração 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/73/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="unittest"></a> |
| <h2>Executando Testes em JS Unit</h2> |
| <p>O IDE permite configurar facilmente o servidor JS Test Driver para executar seus testes de unidade. Neste tutorial você usará os testes de unidade JavaScript que estiverem incluídos no projeto de exemplo e usará o framework de teste Jasmine. |
| </p> |
| |
| <p>O JS Test Driver é um servidor que oferece um URL que é o destino de execução dos testes de unidade em JavaScript. Quando você executa seus testes, o servidor é iniciado e aguarda para executar os testes. Você verá uma mensagem de status verde na janela do browser que confirma que o servidor está em execução e espera. 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. A caixa de diálogo permite que você especifique facilmente o local do JAR do servidor do 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/73/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 a opção Depurador JS para Chrome com NetBeans. 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/73/web/html5-js/html5-js-testdriver-configure.png" title="Caixa de diálogo Configurar JS Test Driver"> |
| <p class="notes"><strong>Observação.</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> |
| </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.</p> |
| <p>A pasta <tt>unidade</tt> do projeto Tutorial do Catálogo de Telefones AngularJS contém quatro arquivos JavaScript com testes de unidade.</p> |
| <img alt="tela da pasta Testes de Unidade na janela Arquivos" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-fileswindow.png" title="Pasta Testes de Unidade na janela Arquivos"> |
| <p>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> |
| </li> |
| <li>Adicione os seguintes locais (em <strong>negrito</strong>) à seção <tt>carregar</tt> do arquivo de configuração: Salve as alterações. |
| |
| <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>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ê clica em Testar, o IDE abre automaticamente o executor JS Test no browser Chrome e duas guias na janela 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 Saída, você pode ver o status do servidor.</p> |
| |
| <img alt="tela da guia Servidor do js-test-driver na janela 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 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> |
| |
| <p>Na guia Executando testes de unidade JS, na Saída, você pode ver o resultado dos quatro testes realizados. Os testes estão localizados nos arquivos <tt>controllerspec.js</tt> e <tt>filtersspec.js</tt>. (Os arquivos <tt>directivesspec.js</tt> e <tt>servicesspec.js</tt> na pasta <tt>unidade</tt> não têm testes.)</p> |
| |
| <img alt="tela da guia Executando testes de unidade JS na janela 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 Saída"> |
| </li> |
| <li>Escolha Janela > Saída > Resultados do Teste no menu principal para abrir a janela Resultados do Teste. |
| <p>Na janela, você pode ver a mensagem de que todos os testes foram aprovados.</p> |
| <img alt="tela da janela Resultados de Teste" class="margin-around b-all" src="../../../images_www/articles/73/web/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> |
| |
| |
| <!-- ++++++++++++++++ Debugging a JS Unit Test ++++++++++++++++ --> |
| <a name="debugtest"></a> |
| <h2>Depurando um Teste no JS Unit</h2> |
| |
| <p>Este exercício demonstra como você pode usar o IDE para depurar os arquivos JavaScript quando um teste de unidade falhar.</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 Saída.<br> <img alt="tela da guia Teste Reprovado na Execução dos testes de unidade JS na janela 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 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_pt_BR.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_pt_BR.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><a href="../ide/javascript-editor_pt_BR.html">Editando JavaScript</a>. Um documento que descreve as funcionalidades básicas de edição JavaScript fornecidas pelo IDE.</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> |
