Depurando e Testando JavaScript em uma Aplicação 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.

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.

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.

Para obter detalhes sobre como instalar a extensão NetBeans Connector para o browser Chrome, consulte o tutorial Conceitos Básicos sobre Aplicações em HTML5 .

Para obter mais informações sobre as funcionalidades de edição de JavaScript no IDE, consulte Criando Arquivos JavaScript em Desenvolvendo Aplicações com o NetBeans IDE - Guia do Usuário.

Para assistir a um screencast deste tutorial, consulteVídeo sobre Teste e Depuração de JavaScript em Aplicações HTML5 .

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 8.0

Para concluir este tutorial, você precisará dos recursos a seguir:

Software ou Recurso Versão Necessária
NetBeans IDE, Java 8.0
JDK (Java Development Kit) 7 ou 8
Browser Chrome --
Extensão NetBeans Connector para Chrome 1.x
JAR do JS Test Driver --

Observações:

  • 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 página inicial do projeto JS Test Driver.
  • Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript.

Criando a Aplicação de Exemplo do NetBeans em HTML5

Execute as etapas a seguir para criar a aplicação de exemplo um modelo de site em HTML5.

  1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.
  2. Expanda o nó Exemplos no assistente do Novo Projeto e selecione a categoria HTML5.
  3. Selecione o projeto Tutorial do Catálogo de Telefone AngularJS. Clique em Próximo.
    tela do projeto de Exemplo no assistente de Novo Arquivo
  4. Selecione uma localização para o projeto. Clique em Finalizar.

    Observação. 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.

    Quando você clica em Finalizar, o IDE cria o projeto e abre o arquivo index.html no editor. Na janela Projetos, você pode ver que o projeto contém index.html e várias folhas de estilo de CSS e arquivos e bibliotecas JavaScript.

    tela dos nós do projeto na janela Projetos

    O projeto também inclui vários arquivos de configuração e teste de unidade JavaScript gerados por default.

  5. Confirme que Chrome com Conector do NetBeans está selecionado na lista drop-down, na barra de ferramentas.
    tela da lista drop-down na barra de ferramentas
  6. 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.

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.

tela da aplicação na janela do browser

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.

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.

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.

Usando o Depurador JavaScript

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.

  1. Expanda o nó js na janela Projetos e clique duas vezes em controllers.js para abrir o arquivo no editor.
  2. Coloque um ponto de interrupção de linha na linha 16 de controllers.js clicando na margem esquerda
    tela de ponto de interrupção definido no editor

    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.

    tela de pontos de interrupção na janela Pontos de Interrupção
  3. Clique no botão Executar na barra de ferramentas para executar o projeto novamente.

    Quando você executar o projeto, verá a mesma página, porque o ponto de interrupção que você definiu não foi atingido.

  4. No browser, clique em uma das entradas na página, por exemplo, Motorola Atrix4G.

    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.

    tela da página de detalhes no browser
  5. 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 controllers.js.
  6. Passe o cursor na variável phone para exibir uma dica de ferramenta com informações sobre a variável.
    tela de dica de ferramenta das variáveis no editor

    Na dica de ferramentas, você pode ver as seguintes informações: telefone = (Recurso) Recurso.

  7. Clique na dica de ferramenta para expandi-la e exibir uma lista das variáveis e valores.
    tela de dica de ferramenta das variáveis expandida no editor

    Por exemplo, quando você expande o nó android, pode ver os valores das strings os e ui..

    Você também pode escolher Janela > Depuração > Variáveis para exibir a lista na janela Variáveis.

  8. Use os botões de etapas da barra de ferramentas para avançar nas funções de JavaScript na biblioteca angular.js ou clique no botão Continuar (F5) para continuar a aplicação.

Executando Testes em JS Unit

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.

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.

Como Executar Testes com Karma

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.

  1. Instale o Karma.

    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 site do Karma.

  2. Crie um arquivo de configuração de Karma.

    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.

    captura de tela do novo Arquivo de Configuração do Karma no assistente de Novo Arquivo

    Como alternativa, execute o comando init do Karma na linha de comandos. Consulte a documentação do Karma para obter mais detalhes sobre o uso do comando init.

  3. Expanda o nó Arquivos de Configuração na janela Projetos e clique duas vezes em karma.conf.js para abrir o arquivo no editor. Observe que a amostra inclui dois arquivos de configuração do Karma.

    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.

    captura de tela do arquivo de configuração do Karma no editor
  4. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades no menu pop-up.
  5. Selecione a categoria Teste JavaScript no painel Categorias da janela Propriedades do Projeto.
  6. Selecione Karma na lista drop-down Provedor de Testes. Clique em OK.
  7. Abra a janela Propriedades do Projeto novamente e selecione Karma sob a categoria Teste JavaScript no painel Categorias.
  8. Especifique o local da instalação do Karma.

    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.

  9. Especifique o local do arquivo de configuração do Karma. Clique em OK.

    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.

    captura de tela da categoria Karma na janela Propriedades do Projeto

    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.

  10. Na janela Projetos, clique com o botão direito do mouse no nó karma e escolha Iniciar no menu pop-up.

    Quando você clica em Iniciar o Karma, o servidor é iniciado e uma janela do browser é aberta exibindo o status do servidor.

    captura de tela de status do servidor Karma na janela do browser Chrome

    Na janela Saída, você pode ver o status do servidor. É solicitada também a instalação dos plug-ins ausentes.

    tela do nó Configurar JS Test Driver na janela Serviços

    Observação. A janela do browser deve estar aberta e o servidor Karma deve estar em execução para executar os testes de unidade.

  11. Clique com o botão direito do mouse no nó e escolha Definir Configuração > karma.conf.js para confirmar a seleção do arquivo de configuração correto. tela do nó Configurar JS Test Driver na janela Serviços
  12. Desative quaisquer pontos de interrupção definidos no projeto.

    Você pode desativar pontos de interrupção desmarcando a caixa de seleção para pontos de interrupção na janela Pontos de Interrupção.

  13. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes.

    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.

    tela da janela Resultados de Teste

Como Executar Teste com JS Test Driver

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.

Para obter mais detalhes sobre como configurar o JS Test Driver, consulte a documentação Conceitos Básicos sobre JsTestDriver.

  1. Faça download de JAR do JS Test Driver e salve o JAR no sistema local.
  2. Na janela Serviços, clique com o botão direito do mouse no nó JS Test Driver e escolha Configurar.
    tela do nó Configurar JS Test Driver na janela Serviços
  3. Na caixa de diálogo Configurar, clique em Procurar e localize o JAR do JS Test Driver que você obteve por download.
  4. Selecione Chrome com Conector NetBeans (no NetBeans IDE 7.3, selecione Chrome com Depurador JS do NetBeans) para o browser. Clique em OK.
    tela da caixa de diálogo Configurar js Test Driver

    Observações. Você só precisa especificar o local do JAR do JS Test Driver. na primeira vez que configurar o JS Test Driver.

    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.

    A seleção do Chrome com NetBeans Connector permite depurar os testes executados com o JS Test Driver.

  5. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Novo > Outro.
  6. Selecione o Arquuivo de Configuração jsTestDriver na categoria Testes da Unidade. Clique em Próximo.
  7. Confirme se jsTestDriver é o Nome do Arquivo.
  8. No campo Criar Arquivo, confirme se o local dos arquivos é a pasta config do projeto (AngularJSPhoneCat/config/jsTestDriver.conf).

    Observação. O arquivo de configuração jstestdriver.conf deve estar no config folder do projeto. Se o local do arquivo criado não for a pasta config, clique em Procurar e selecione AngularJSPhoneCat - Arquivos de Configuração na caixa de diálogo.

  9. Confirme se a caixa de seleção para fazer download das bibliotecas do Jasmine está selecionada. Clique em Finalizar.
    tela do assistente do Novo Arquivo de Configuração  jsTestDriver

    Observação.É 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.

    Quando você clicar em Finalizar, o IDE irá gerar um arquivo de configuração de estrutura jsTestDriver.conf 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 lib sob Testes de Unidade, poderá ver que as bibliotecas do Jasmine foram adicionados ao projeto.

    tela da pasta Testes de Unidade na janela Projetos

    No editor, você pode ver o seguinte conteúdo do arquivo de configuração gerado por default:

    server: http://localhost:42442
    
    load:
      - test/lib/jasmine/jasmine.js
      - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
      - test/unit/*.js
    
    exclude:
    

    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 unidade. Os testes geralmente se localizam na pasta unidade, 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.

    Neste tutorial, se você quiser executar testes usando o JS Test Driver, adicione os seguintes arquivos (em negrito) à lista de arquivos carregados.

    load:
        - test/lib/jasmine/jasmine.js
        - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
    
        - 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
    
        - test/unit/*.js
  10. 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.

    Quando você clica em Testar, o IDE abre automaticamente o executor JS Test no browser Chrome e duas guias na janela de Saída.

    tela de jsTestDriver em execução na janela do browser

    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 localhost:42442. Na guia Servidor do js-test-driver, na janela de Saída, você pode ver o status do servidor.

    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.

    tela da guia Servidor do js-test-driver na janela de Saída

    Observação. 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.

    tela da guia Executando testes de unidade JS na janela de Saída
  11. Escolha Janela > Saída > Resultados do Teste no menu principal para abrir a janela Resultados do Teste e ver os resultados.
    tela da janela Resultados de Teste

    Você pode clicar no ícone de marcação verde na margem esquerda da janela para exibir as a lista expandida dos testes aprovados.

Depurando um Teste de Unidade JS com JS Test Driver

Este exercício demonstra como usar o IDE e o JS Test Driver para depurar unidades de teste.

Observação. O NetBeans IDE 8.0 não suporta depuração testes feitos com o executor de teste Karma.

  1. Expanda a pasta js na janela Projetos e clique duas vezes em controllers.js para abrir o arquivo no editor.
  2. Modifique a linha 7 no arquivo para fazer as alterações a seguir (em negrito). Salve as alterações.
    function PhoneListCtrl($scope, Phone) {
      $scope.phones = Phone.query();
      $scope.orderProp = 'name';
    }

    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.

  3. Confirme se o servidor JS Test Driver está sendo executado e se a mensagem de status está visível na janela do browser Chrome.
  4. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes.
    tela da janela teste reprovado nos Resultados de Teste

    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".

  5. Abra a guia Executando testes de unidade JS na janela de Saída.
    tela da guia Teste Reprovado na Execução dos testes de unidade JS na janela de Saída

    Você poderá ver a mensagem de que é esperado que orderProp seja idade na linha 41.

  6. Clique no link na guia Executando testes de unidade JS para navegar até a linha em que o teste falhou. O arquivo de teste controllersSpec.js será aberto no editor na linha 41 (em negrito)
    it('should set the default value of orderProp model', function() {
          expect(scope.orderProp).toBe('age');
        });

    Você pode ver que o teste esperava "idade" como o valor de scopeOrder.prop.

  7. Defina um ponto de interrupção na linha em que ocorreu a falha no teste (linha 41).
  8. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Testes.

    Quando você executar o teste novamente, o contador do programa atingirá o limite de ponto de interrupção. Se você passar o cursor sobre scopeOrder.prop, poderá ver na dica de ferramenta que o valor da variável é "nome" quando o ponto de interrupção for atingido.

    tela de IDE mostrando editor, janela Avaliar Código e janela Variáveis

    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 scopeOrder.prop na janela e clicar no botão Avaliar Fragmento do Código (Botão Avaliar Expressão)(Ctrl-Enter), o depurador exibirá o valor da expressão na janela Variáveis.

  9. Clique em Continuar na barra de ferramentas para finalizar a execução do teste.

Resumo

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.



Consulte Também

Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em netbeans.org:

Para obter mais informações sobre a execução de testes de unidade usando JS Driver Test, consulte a seguinte documentação:

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo