Angular.js Unit Testing

Um dos recursos mais importantes do Angular.js é a feature de testes. Quando os desenvolvedores do Google desenvolveram o Angular, eles mantiveram os testes em mente e garantiram que toda a estrutura do Angular fosse testável.

No Angular, os testes são realizados usando o Karma, um framework com funcionalidades robustas para testar o código Angular, fazendo sentido usar esse framework.

Instalação do framework Karma

A primeira etapa para usar o Karma é instalar o Karma. O Karma é instalado via npm (que é um gerenciador de pacotes usado para facilitar a instalação de módulos em uma máquina local).

A instalação do Karma via npm é feita em um processo de duas etapas.

Etapa 1. Execute a linha abaixo na linha de comando:

1. npm é o utilitário de linha de comando para o Node Package Manager, usado para instalar módulos personalizados em qualquer máquina.
   
2. O parâmetro install instrui o utilitário de linha de comando npm que a instalação é necessária.
   
3. Existem 3 bibliotecas sendo especificadas na linha de comando que são necessárias para trabalhar com Karma.

• Karma é a biblioteca principal que será usada para fins de teste.
• karma-chrome-launcher é uma biblioteca separada que permite que os comandos Karma sejam reconhecidos pelo navegador Chrome.
• karma-jasmine – Isso instala o jasmine, uma estrutura dependente do Karma.
  

Etapa 2. Instalar o utilitário de linha de comando Karma. Isso é necessário para executar comandos Karma. O utilitário de linha de comandos Karma será usado para inicializar o ambiente Karma para teste.

Para instalar o utilitário de linha de comando, execute a linha abaixo na linha de comando:

Karma-cli é usado para instalar a interface de linha de comando para Karma, que será usada para escrever os comandos na interface de linha de comando.

Configuração do framework Karma

O próximo passo é configurar no Karma o que pode ser feito através do comando:

Depois que a etapa acima for executada, o Karma criará um arquivo karma.conf.js. O arquivo provavelmente se parecerá com o código:

Os arquivos de configuração acima informam ao mecanismo de runtime karma as seguintes informações:

1. ‘Nome do seu aplicativo’ – Isso será substituído pelo nome do seu aplicativo.
2. ‘Your application Name’/AngularJS/AngularJS.js’ – Isso informa ao karma que seu aplicativo depende dos módulos principais do Angular.
3. ‘Your application Name’/AngularJS-mocks/AngularJS-mocks.js’ – Diz ao Karma para usar a funcionalidade Unit Testing para Angular do arquivo Angular.JS-mocks.js.
4. Todos os arquivos principais do aplicativo ou da lógica de negócios estão presentes na pasta lib do seu aplicativo.
5. A pasta de testes conterá todos os testes de unidade.
   

Para verificar se o Karma está funcionando, crie um arquivo chamado sample.js, insira o código abaixo e coloque-o no diretório test.

O código acima tem os seguintes aspectos:

• A função describe é usada para fornecer uma descrição do teste. No nosso caso, estamos dando a descrição sample test para o nosso teste.
• A função 'it' é usada para dar um nome ao teste. No nosso caso, estamos dando o nome do nosso teste como The condition is true. O nome do teste precisa ser significativo.
• A combinação das palavras-chave 'expect' e 'toBe' indica qual é o valor esperado e real do resultado do teste. Se o valor real e o esperado forem iguais, o teste será aprovado, caso contrário, falhará.
  

Quando você executar a seguinte linha no prompt de comando, ele executará o arquivo de teste acima:

A saída abaixo é retirada do IDE Webstorm, no qual as etapas acima foram executadas.

1. A saída vem no Karma Explorer dentro do Webstorm. Esta janela mostra a execução de todos os testes definidos na estrutura Karma.
2. Aqui você pode ver que a descrição do teste executado é mostrada, que é Sample test.
3. Em seguida, você pode ver que o próprio teste que tem o nome de Condição é verdadeira é executado.
4. Observe que, como todos os testes têm o ícone verde Ok ao lado, o que simboliza que todos os testes foram aprovados.
   

Testando Angular.js Controllers

A estrutura de teste Karma também tem a funcionalidade de testar controllers de ponta a ponta. Isso inclui o teste do objeto $scope que é usado nos Controllers.

Vejamos um exemplo de como podemos conseguir isso.

Primeiro precisaríamos definir um controller para executar as etapas abaixo mencionadas.

1. Crie uma variável de ID e atribua o valor 5 a ela.
2. Atribua a variável ID ao objeto $scope.
   

Nosso teste testará a existência desse controller e também testará se a variável ID do objeto $scope está definida como 5.

Primeiro, precisamos garantir que o seguinte pré-requisito esteja em vigor.

Instale a biblioteca Angular.JS-mocks via npm. Isso pode ser feito executando a linha abaixo no prompt de comando:

Em seguida, modifique o arquivo karma.conf.js para garantir que os arquivos corretos sejam incluídos para o teste. O segmento abaixo mostra apenas a parte dos arquivos do karma.conf.js que precisa ser modificada.

• O parâmetro files basicamente informa ao Karma todos os arquivos necessários para a execução dos testes.
• Os arquivos AngularJS.js e AngularJS-mocks.js são necessários para executar testes de unidade Angular.
• O arquivo index.js conterá nosso código para o controlador.
• A pasta test conterá todos os nossos testes Angular.
  

Abaixo está o nosso código Angular que será armazenado como um arquivo index.js na pasta de teste da nossa aplicação.

O código abaixo apenas faz as seguintes ações:

• Cria um módulo Angular chamado sampleApp;
• Cria um controlador chamado AngularJSController;
• Cria uma variável chamada ID, dê a ela um valor de 5 e atribua-a ao objeto $scope.
  

Depois que o código acima for executado com sucesso, a próxima etapa será criar um Caso de Teste para garantir que o código foi escrito e executado corretamente.

O código para o nosso teste será o mostrado abaixo.

O código estará em um arquivo separado chamado ControllerTest.js, que será colocado na pasta test. O código abaixo apenas faz as seguintes ações:

1. Função beforeEach – Esta função é usada para carregar nosso módulo AngularJS.JS chamado sampleApp antes da execução do teste. Observe que este é o nome do módulo em um arquivo index.js.
2. O objeto $controller é criado como um objeto mockup para o controlador Angular JSController que é definido em nosso arquivo index.js. Em qualquer tipo de teste de unidade, um objeto simulado representa um objeto fictício que será realmente usado para o teste. Este objeto fictício realmente simulará o comportamento do nosso controlador.
3. BeforeEach(inject(function(_$controller_) – Isso é usado para injetar o objeto simulado em nosso teste para que ele se comporte como o controlador real.
4. Var $scope = {}; - Este é um objeto fictício sendo criado para o objeto $scope.
5. Var controller = $controller(‘AngularJSController’, { $scope: $scope }); – Aqui estamos verificando a existência de um controlador chamado Angular.JSController. Aqui também estamos atribuindo todas as variáveis ​​de nosso objeto $scope em nosso controller no arquivo index.js para o objeto $scope em nosso arquivo de teste.
6. Finalmente, estamos comparando $scope.ID com 5.
   

O teste acima será executado no navegador Karma e fornecerá o mesmo resultado de aprovação mostrado no tópico anterior.

Testando Angular.js Directives

A estrutura de teste Karma também tem a funcionalidade de testar diretivas customizadas. Isso inclui os templateURLs que são usados ​​nas diretivas customizadas.

Vejamos um exemplo de como podemos conseguir isso.

Em nosso exemplo, primeiro definiremos uma diretiva personalizada que faz o seguinte:

1. Crie um módulo Angular chamado sampleApp;
2. Crie uma diretiva personalizada com o nome – MyDirective;
3. Crie uma função que retorne um modelo com uma tag de cabeçalho que exiba o texto This is AngularJS Testing.

Depois que o código acima for executado com sucesso, a próxima etapa será criar um caso de teste para garantir que o código foi escrito e executado corretamente. O código para o nosso teste será como mostrado abaixo.

O código estará em um arquivo separado chamado DirectiveTest.js, que será colocado na pasta test. O código abaixo apenas faz as seguintes coisas importantes:

1. Função beforeEach – Esta função é usada para carregar nosso módulo Angular chamado sampleApp antes da execução do teste.
   
2. O serviço $compile é usado para compilar a diretiva. Este serviço é obrigatório e precisa ser declarado para que Angular possa usá-lo para compilar nossa diretiva customizada.
   
3. O $rootscope é o escopo principal de qualquer aplicativo Angular. Vimos o objeto $scope do controlador em capítulos anteriores. Bem, o objeto $scope é o objeto filho do objeto $rootscope. A razão pela qual isso é declarado aqui é porque estamos fazendo uma alteração em uma tag HTML real no DOM por meio de nossa diretiva personalizada. Portanto, precisamos usar o serviço $rootscope que realmente escuta ou sabe quando qualquer alteração ocorre em um documento HTML.
   
4. Var element = $compile(“<ng-MyDirective></ng-MyDirective>”) – Isso é usado para verificar se nossa diretiva é injetada como deveria. O nome de nossa diretiva customizada é MyDirective, e sabemos de nosso capítulo de diretivas customizadas que quando a diretiva é injetada em nosso HTML, ela será injetada como <ng-MyDirective></ng-MyDirective>. Portanto, esta instrução é usada para fazer essa verificação.
   
5. Expect(element.html()).toContain(“This is AngularJS Testing”) – Isso é usado para instruir a função expect que ela deve encontrar o elemento (no nosso caso, a tag div) para conter o texto innerHTML de This is AngularJS Testing.

O teste acima será executado no navegador Karma e fornecerá o mesmo resultado de aprovação mostrado no tópico anterior.

Testando aplicações AngularJS End to End

A estrutura de teste Karma junto com uma estrutura chamada Protractor tem a funcionalidade de testar um aplicativo da web de ponta a ponta.

Portanto, não é apenas testar diretivas e controladores, mas também testar qualquer outra coisa que possa aparecer em uma página HTML.

Vejamos um exemplo de como podemos conseguir isso.

Em nosso exemplo abaixo, teremos uma aplicação Angular que cria uma tabela de dados usando a diretiva ng-repeat.

1. Estamos primeiro criando uma variável chamada tutorial e atribuindo a ela alguns pares chave-valor em uma etapa. Cada par chave-valor será usado como dados ao exibir a tabela. A variável tutorial é então atribuída ao objeto de escopo para que possa ser acessada de nossa visão.
   
2. Para cada linha de dados na tabela, estamos usando a diretiva ng-repeat. Essa diretiva passa por cada par chave-valor no objeto de escopo do tutorial usando a variável ptutor.
   
3. Por fim, estamos usando a tag <td> juntamente com os pares chave-valor (ptutor.Name e ptutor.Description) para exibir os dados da tabela.
   

O teste acima será executado no navegador Karma e fornecerá o mesmo resultado de aprovação mostrado no tópico anterior.

Depois que o código acima for executado com sucesso, a próxima etapa será criar um caso de teste para garantir que o código foi escrito e executado corretamente. O código para o nosso teste será como mostrado abaixo.

Nosso teste vai, na verdade, testar a diretiva ng-repeat e garantir que ela contenha 3 linhas de dados como deveria no exemplo acima.

Primeiro, precisamos garantir que o seguinte pré-requisito esteja em vigor.

Instale a biblioteca do protractor via npm. Isso pode ser feito executando a linha abaixo no prompt de comando:

O código para o nosso teste será o mostrado abaixo.

O código estará em um arquivo separado chamado CompleteTest.js, que será colocado na pasta test. O código abaixo apenas faz as seguintes ações:

1. A função do navegador é fornecida pela biblioteca do protractor e assume que nosso aplicativo Angular (com o código mostrado acima) está sendo executado na URL do nosso site:  http://localhost:8080/MySite/.
   
2. Var list=element.all(by.repeater(ptutor no tutorial')); - Esta linha de código está realmente buscando a diretiva ng-repeat que é preenchida pelo código ptutor no tutorial. O elemento e by.repeater são palavras-chave especiais fornecidas pela biblioteca protractor que nos permite obter detalhes da diretiva ng-repeat.
   
3. Expect(list.count()).toEqual(3); – Por fim, estamos usando a função expect para ver se realmente estamos obtendo 3 itens sendo preenchidos em nossa tabela como resultado da diretiva ng-repeat.
   

O teste acima será executado no navegador Karma e fornecerá o mesmo resultado de aprovação mostrado no tópico anterior.

Resumo

• O teste no Angular é feito usando o Karma framework, desenvolvido pelo próprio Google.
  
• A estrutura Karma é instalada usando o node package manager. Os principais módulos que devem ser instalados para testes básicos são karma, karma-chrome-launcher, karma-jasmine e karma-cli.
  
• Os testes são escritos em arquivos js separados, normalmente mantidos na pasta de testes de sua aplicação. A localização desses arquivos de teste deve ser mencionada em um arquivo de configuração especial chamado karma.conf.js. O Karma usa este arquivo de configuração ao executar todos os testes.
  
• Karma também pode ser usado para testar controladores e diretivas personalizadas.
  
• Para um teste da Web de ponta a ponta, outra estrutura chamada protractor precisa ser instalada por meio do npm. Essa estrutura fornece métodos especiais que podem ser usados ​​para testar todos os elementos em uma página HTML.

Até logo!