Teste de unidade AngularJS: Tutorial Karma Jasmine

Por: James Hartmann James Hartmann
Hours Atualização do

Um dos recursos mais brilhantes do Angular.JS é o Testes aspecto. Quando os desenvolvedores do Google desenvolveram o AngularJS, eles tiveram em mente os testes e garantiram que toda a estrutura do AngularJS fosse testável.

No AngularJS, os testes normalmente são realizados usando Karma (framework). O teste Angular JS pode ser realizado sem Karma, mas a estrutura Karma tem uma funcionalidade tão brilhante para testar o código AngularJS que faz sentido usar esta estrutura.

  • No AngularJS, podemos realizar Teste de Unidade separadamente para controladores e diretivas.
  • Também podemos realizar testes de ponta a ponta do AngularJS, que são testes da perspectiva do usuário.

Introdução e instalação da estrutura Karma

carma é um ferramenta de automação de testes criado pela equipe Angular JS do Google. O primeiro passo 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).

Instalação do Karma

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

Passo 1) Execute a linha abaixo na linha de comando

npm install karma karma-chrome-launcher karma-jasmine

Em que,

  1. npm é o utilitário de linha de comando para o gerenciador de pacotes de nós 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 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 comandos karma sejam reconhecidos pelo navegador Chrome.
    • karma-jasmine – Instala o jasmim, que é uma estrutura dependente do Karma.

Passo 2) A próxima etapa é instalar o utilitário de linha de comando karma. Isso é necessário para executar comandos da linha karma. O utilitário karma line 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

npm install karma-cli

em que,

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

    • Configuração da estrutura Karma

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

    "karma –init"

    Após a execução da etapa acima, o karma criará um arquivo karma.conf.js. O arquivo provavelmente será parecido com o trecho mostrado abaixo

    files: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

    Os arquivos de configuração acima informam ao mecanismo de tempo de execução do karma o seguinte

    1. 'Nome do seu aplicativo' – Será substituído pelo nome do seu aplicativo.
    2. 'Nome do seu aplicativo'/AngularJS/AngularJS.js' – Isso informa ao karma que seu aplicativo depende dos módulos principais do AngularJS
    3. 'Nome do seu aplicativo'/AngularJS-mocks/AngularJS-mocks.js' – Isso diz ao karma para usar a funcionalidade de teste de unidade para AngularJS do arquivo Angular.JS-mocks.js.
    4. Todos os arquivos principais do aplicativo ou de 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, coloque o código abaixo e coloque-o no diretório de teste.

    describe('Sample test', function() {
  it('Condition is true', function() {
    expect('AngularJS').toBe('AngularJS');
  });
});

    O código acima tem os seguintes aspectos

    1. A função de descrição é usada para fornecer uma descrição do teste. No nosso caso, estamos dando a descrição 'Teste de amostra' ao nosso teste.
    2. A função 'it' é usada para dar um nome ao teste. No nosso caso, damos o nome do nosso teste como 'Condição é verdadeira'. O nome do teste precisa ser significativo.
    3. 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 esperado forem iguais, o teste será aprovado, caso contrário, falhará.

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

    KARMA start

    A saída abaixo foi retirada do IDE Webstorm em que foram realizadas as etapas acima.

    Configuração da Estrutura Karma

    1. A saída vem no explorador Karma dentro Webstorm. Esta janela mostra a execução de todos os testes definidos na estrutura karma.
    2. Aqui você pode ver que é mostrada a descrição do teste executado que é “Teste de amostra”.
    3. A seguir, você pode ver que o próprio teste que tem o nome “Condição é verdadeira” é executado.
    4. Observe que todos os testes têm o ícone verde “Ok” próximo a eles, o que simboliza que todos os testes foram aprovados.

    ARTIGOS RELACIONADOS

    Testando controladores AngularJS

    A estrutura de teste de karma também possui a funcionalidade de testar Controladores de ponta a ponta. Isso inclui o teste do objeto $scope que é usado nos Controladores.

    Vejamos um exemplo de como podemos conseguir isso.

    Em nosso exemplo,

    Primeiro precisaríamos definir um controlador. Este controlador executaria as etapas mencionadas abaixo

    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 deste controlador 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

    npm install Angular JS-mocks

    O próximo passo é modificar o arquivo karma.conf.js para garantir que os arquivos corretos sejam incluídos para o teste. O segmento abaixo mostra apenas os arquivos que fazem parte do karma.conf.js que precisam ser modificados

    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
    • 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 AngularJS
    • O arquivo index.js conterá nosso código para o controlador
    • A pasta de teste conterá todos os nossos testes AngularJS

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

    O código abaixo apenas faz o seguinte

    1. Crie uma Módulo AngularJS chamado sampleApp
    2. Crie um controlador chamado AngularJSController
    3. Crie uma variável chamada ID, atribua a ela um valor 5 e atribua-a ao objeto $scope
    var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

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

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

    O código estará em um arquivo separado chamado ControllerTest.js, que será colocado na pasta de teste. O código abaixo apenas faz as seguintes coisas principais

    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 unitário, um objeto simulado representa um objeto fictício que será realmente usado para o teste. Este objeto simulado irá 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 $escopo = {}; Este é um objeto simulado 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 ​​do nosso objeto $scope em nosso controlador no arquivo Index.js ao objeto $scope em nosso arquivo de teste
    6. Finalmente, estamos comparando $scope.ID com 5
    describe('AngularJSController', function() {
    beforeEach(module('sampleApp'));

    var $controller;

    beforeEach(inject(function(_$controller_){
              $controller = _$controller_;
    }));

    describe('$scope.ID', function() {
        it('Check the scope object', function() {
            var $scope = {};
            var controller = $controller('AngularJSController', { $scope: $scope });
            expect($scope.ID).toEqual(5);
        });
    });
});

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

    Testando diretivas AngularJS

    A estrutura de teste de karma também possui a funcionalidade para testar diretivas personalizadas. Isso inclui os templateURLs que são usados ​​nas diretivas personalizadas.

    Vejamos um exemplo de como podemos conseguir isso.

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

    1. Crie um módulo AngularJS chamado sampleApp
    2. Crie uma diretiva personalizada com o nome – Guru99
    3. Crie uma função que retorne um modelo com uma tag de cabeçalho que exibe o texto “Este é o teste AngularJS”.
    var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

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

    O código estará em um arquivo separado chamado DirectivaTest.js, que será colocado na pasta de teste. O código abaixo apenas faz as seguintes coisas principais

    1. Função beforeEach – Esta função é usada para carregar nosso módulo Angular JS 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.JS possa utilizá-lo para compilar nossa diretiva customizada.
    3. O $rootscope é o escopo principal de qualquer aplicativo AngularJS.JS. 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 ocorre alguma alteração em um documento HTML.
    4. elemento var = $compile(“ ”) – Isso é usado para verificar se nossa diretiva foi injetada como deveria. O nome da nossa diretiva personalizada é Guru99, e sabemos pelo nosso capítulo de diretivas personalizadas que quando a diretiva for injetada em nosso HTML, ela será injetada como ' '. Portanto, esta declaraçã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 Teste AngularJS”.
    describe('Unit testing directives', function() {
  var $compile,
      $rootScope;
   beforeEach(module('sampleApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
 }));

 it('Check the directive', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("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.

    Teste de ponta a ponta de aplicativos AngularJS JS

    A estrutura de teste de carma, juntamente com uma estrutura chamada Transferidor, tem a funcionalidade de testar um aplicativo da web de ponta a ponta.

    Portanto, não se trata apenas de testar diretivas e controladores, mas também de 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 um aplicativo AngularJS que cria uma tabela de dados usando a diretiva ng-repeat.

    1. Primeiro, estamos criando uma variável chamada “tutorial” e atribuindo a ela alguns pares de valores-chave em uma única etapa. Cada par de valores-chave 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 a partir de nossa visualização.
    2. Para cada linha de dados da tabela, estamos usando a diretiva ng-repeat. Esta diretiva passa por cada par de valores-chave no objeto de escopo do tutorial usando a variável ptutor.
    3. Finalmente, estamos usando o tag junto com os pares de valores-chave (ptutor.Name e ptutor.Descriptíon) para exibir os dados da tabela.
    <table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

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

    Nosso teste irá, 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 transferidor via npm. Isso pode ser feito executando a linha abaixo no prompt de comando

    "npm install protractor"

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

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

    1. A função do navegador é fornecida pela biblioteca do transferidor e assume que nosso aplicativo AngularJS (com o código mostrado acima) está sendo executado na URL do nosso site – http://localhost:8080/Guru99/
    2. var list=element.all(by.repeater(ptutor no tutorial')); -Esta linha de código está na verdade 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 do transferidor que nos permitem obter detalhes da diretiva ng-repeat.
    3. esperar(lista.contagem()).toEqual(3); – Por último, estamos usando a função expect para ver se estamos realmente obtendo 3 itens sendo preenchidos em nossa tabela como resultado da diretiva ng-repeat.
    Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

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

    Resumo

    • O teste em AngularJS é feito usando o framework karma, um framework que foi desenvolvido pelo próprio Google.
    • A estrutura karma é instalada usando o gerenciador de pacotes do nó. 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 da sua aplicação. A localização desses arquivos de teste deve ser mencionada em um arquivo de configuração especial chamado karma.conf.js. 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 web ponta a ponta, outro framework chamado transferidor precisa ser instalado através do Node, gerenciador de pacotes. Esta estrutura fornece métodos especiais que podem ser usados ​​para testar todos os elementos de uma página HTML.

    Resuma esta postagem com: