Teste de unidade AngularJS: Tutorial de Karma Jasmine

Índice:

Anonim

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

No AngularJS, o teste é normalmente realizado usando Karma (framework). O teste do Angular JS pode ser realizado sem o Karma, mas o framework Karma tem uma funcionalidade tão brilhante para testar o código AngularJS, que faz sentido usar este framework.

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

Neste tutorial, você aprenderá-

  • Introdução e instalação do framework Karma
    • Instalação do Karma
    • Configuração da estrutura Karma
  • Testando controladores AngularJS
  • Testando diretivas AngularJS
  • Teste de ponta a ponta de aplicativos AngularJS JS

Introdução e instalação do framework Karma

Karma é uma ferramenta de automação de testes criada pela equipe Angular JS do Google. O primeiro passo para usar o Karma é instalar o Karma. Karma é instalado via npm (que é um gerenciador de pacotes usado para fácil instalação de módulos em uma máquina local).

Instalação do Karma

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

Etapa 1) Execute a linha abaixo a partir da 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 do nó 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 central que será usada para fins de teste.
    • karma-chrome-launcher é uma biblioteca separada que permite que os comandos do karma sejam reconhecidos pelo navegador Chrome.
    • karma-jasmine - Instala o jasmim, que é uma estrutura dependente do Karma.

Etapa 2) A próxima etapa é instalar o utilitário de linha de comando karma. Isso é necessário para executar comandos de linha de carma. O utilitário de linha de carma será usado para inicializar o ambiente de carma para teste.

Para instalar o utilitário de linha de comando, execute a linha abaixo a partir da linha de comando

npm install karma-cli

em que,

  1. karma-cli é usado para instalar a interface da linha de comando do karma, que será usada para escrever os comandos do karma na interface da 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"

Depois que a etapa acima for executada, o karma criará um arquivo karma.conf.js. O arquivo provavelmente será semelhante ao 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 execução do karma as seguintes coisas

  1. 'Nome do seu aplicativo' - Será substituído pelo nome do seu aplicativo.
  2. ' Nome do seu aplicativo' / AngularJS / AngularJS.js ' - Isso diz ao karma que seu aplicativo depende dos módulos principais do AngularJS
  3. 'Nome do seu aplicativo' / AngularJS-mocks / AngularJS-mocks.js ' - Diz ao karma para usar a funcionalidade de Teste de Unidade para AngularJS do arquivo Angular.JS-mocks.js.
  4. Todos os aplicativos principais ou arquivos de lógica de negócios estão presentes na pasta lib de 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 test.

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 fornecendo a descrição 'Teste de amostra' para o nosso teste.
  2. A função 'it' é usada para dar um nome ao teste. Em nosso caso, estamos nomeando nosso teste como 'A 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 o valor esperado forem iguais, o teste será aprovado, caso contrário, ele falhará.

Ao executar a seguinte linha no prompt de comando, ele executará o arquivo de teste acima

KARMA start

A saída a seguir foi obtida do IDE Webstorm no qual as etapas acima foram realizadas.

  1. A saída vem no explorador de Karma dentro do Webstorm. Esta janela mostra a execução de todos os testes definidos na estrutura do 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 de "A condição é verdadeira", é executado.
  4. Observe que todos os testes têm o ícone verde "Ok" próximo a ele, que simboliza que todos os testes foram aprovados.

Testando controladores AngularJS

A estrutura de teste de carma também tem 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 realizaria as etapas mencionadas abaixo

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

Nosso teste irá testar a existência deste controlador e também testar para ver se a variável de ID do objeto $ scope está definida como 5.

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

    1. 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
  1. Em seguida, é necessário modificar 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 precisam ser modificados 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • O parâmetro 'arquivos' basicamente informa ao Karma todos os arquivos que são 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 irá conter nosso código para o controlador
  • A pasta de teste irá 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 nosso aplicativo.

O código a seguir apenas faz o seguinte

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

Uma vez que o código acima é 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á mostrado abaixo.

O código estará em um arquivo separado denominado ControllerTest.js, que será colocado na pasta de teste. O código a seguir apenas faz as seguintes coisas importantes

  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 simulado que realmente será usado para o teste. Este objeto mock vai simular o comportamento do nosso controlador.

  3. beforeEach (inject (function (_ $ controller_) - Isso é usado para injetar o objeto mock em nosso teste para que ele se comporte como o controlador real.

  4. var $ scope = {}; Este é um objeto mock sendo criado para o objeto $ scope.

  5. var controlador = $ controlador ('AngularJSController', {$ escopo: $ escopo}); - 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 controlador no arquivo Index.js para o objeto $ scope em nosso arquivo de teste

  6. Finalmente, estamos comparando o $ scope.ID a 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 do karma e fornecerá o mesmo resultado de aprovação que foi mostrado no tópico anterior.

Testando diretivas AngularJS

A estrutura de teste de carma também tem a funcionalidade de testar diretivas personalizadas. Isso inclui o templateURL que é usado nas diretivas customizadas.

Vejamos um exemplo de como podemos conseguir isso.

Em nosso exemplo, vamos primeiro definir uma diretiva personalizada 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 retorna um modelo com uma tag de cabeçalho que exibe o texto "This is AngularJS Testing."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Assim 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 o nosso teste será como mostrado abaixo

O código estará em um arquivo separado chamado DirectiveTest.js, que será colocado na pasta de teste. O código a seguir apenas faz as seguintes coisas importantes

  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 usá-lo para compilar nossa diretiva personalizada.

  3. O $ rootscope é o escopo principal de qualquer aplicativo AngularJS.JS. Vimos o objeto $ scope do controlador nos capítulos anteriores. Bem, o objeto $ scope é o objeto filho do objeto $ rootscope. O motivo disso ser declarado aqui é porque estamos fazendo uma alteração em uma tag HTML real no DOM por meio de nossa diretiva personalizada. Conseqüentemente, precisamos usar o serviço $ rootscope que realmente escuta ou sabe quando qualquer mudança acontece em um documento HTML.

  4. var element = $ compile (" ") - Isso é usado para verificar se nossa diretiva é injetada como deveria. O nome de nossa diretiva customizada é Guru99, e sabemos de nosso capítulo de diretivas customizadas que quando a diretiva é 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") - É usado para instruir a função expect que 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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

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

Teste de ponta a ponta de aplicativos AngularJS JS

A estrutura de teste de carma junto com uma estrutura chamada Protractor 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 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 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 acessado de nossa visão.
  2. Para cada linha de dados na 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 a tag junto com os pares de valores-chave (ptutor.Name e ptutor.Description) para exibir os dados da tabela.


{{ ptutor.Name }}{{ ptutor.Description }}