Introdução ao teste de unidade AngularJS

Usando o AngularJS, você pode criar interfaces de usuário incríveis, mas quando a complexidade do seu projeto aumenta, o teste de unidade se torna uma parte importante. Para melhorar a qualidade do seu código, o teste é muito importante. No teste de unidade, testamos uma funcionalidade de componente isoladamente, sem nenhum recurso externo, como banco de dados, arquivos, etc. Os testes de unidade são fáceis de escrever e mais rápidos na execução. Nos testes de unidade, não testamos a funcionalidade de um aplicativo, portanto, baixa confiança. O AngularJS consiste em vários blocos de construção, como serviços, componentes, diretivas, etc. Para cada um deles, precisamos escrever casos de teste separados.

Fundamentos do teste de unidade

  1. Precisamos seguir práticas de codificação limpas.
  2. Aplique os mesmos princípios que o código funcional.
  3. Os casos de teste são uma pequena função / método de 10 linhas ou menos.
  4. Use uma convenção de nomenclatura adequada.
  5. Eles têm apenas uma única responsabilidade, ou seja, testam apenas uma coisa.

Ferramentas de teste do AngularJS

1) Jasmim

Estrutura de desenvolvimento para testar o código javascript. Ele fornece funções que ajudam na estruturação de casos de teste. À medida que os projetos se tornam complexos e os testes crescem, é importante mantê-los bem estruturados e documentados, e o Jasmine ajuda a conseguir isso. Para usar o Jasmine com Karma, use o corredor de teste karma-jasmine.

2) Karma

Um corredor de teste para escrever e executar testes de unidade durante o desenvolvimento do aplicativo AngularJS. Aumenta a produtividade dos desenvolvedores. Gerará um servidor da Web que carrega o código do aplicativo e executa os casos de teste.
É um aplicativo NodeJS instalado através do npm / yarn. Ele pode ser configurado para ser executado em vários navegadores para garantir que o aplicativo funcione em todos os navegadores disponíveis.

3) Zombarias angulares

O AngularJS fornece o módulo ngMock, que nos fornece testes simulados. Eles são usados ​​para injetar e simular serviços do AngularJS em testes de unidade.

Configuração do ambiente

  1. Instale o NodeJS no seu sistema. (https://nodejs.org/en/download/).
  2. Instale qualquer IDE (como código VS, colchetes, etc.).
  3. Crie uma pasta vazia ($ mkdir unit testing) em seu diretório.
  4. Abra a pasta de teste de unidade no seu IDE. Em seguida, abra o terminal (prompt de comando) dentro da pasta de testes da unidade.
  5. No terminal, siga os comandos abaixo, um por um:
    Crie o package.json:
    npm initInstall Angular:
    npm i angular - saveInstall Karma:
    npm i -g karma –save -devInstale o Jasmine:
    npm i karma-jasmine jasmine-core –save -devInstalar zombarias angulares:
    Instale o navegador Karma Chrome:
    npm i karma-chrome-launcher - save-dev
  6. Crie duas pastas nomeadas como aplicativo e teste dentro da pasta de teste da unidade.
  7. Crie karma.config.js. No terminal, dê o seguinte comando:
    karma init
    Ele fará um conjunto de perguntas. Selecione as respostas abaixo para isso.
    -> Selecione a estrutura de teste como Jasmine.
    -> Selecione Chrome como um navegador.
    -> Especifique o caminho para seus arquivos js e spec (app / * js and tests / *. Spec.js)
    -> Depois de mais algumas perguntas, isso será feito.
    -> Abra arquivos karma.config.js, caminho e plugins, como mostrado abaixo. Abaixo está o arquivo karma.config.js.

// Karma configuration
module.exports = function(config) (
config.set((
// base path is used to resolve all patterns
basePath: '',
plugins:('karma-jasmine', 'karma-chrome-launcher'),
frameworks: ('jasmine'),
// list of files to load in the browser
files: (
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'tests/*.spec.js'
),
// list of files to exclude
exclude: (),
preprocessors: (),
reporters: ('progress'),
// server port
port: 9876,
// enable / disable colors in output
colors: true,
logLevel: config.LOG_INFO,
// enable / disable watch mode for files
autoWatch: true,
browsers: ('Chrome'),
singleRun: false,
// how many browser should start simultaneous
concurrency: Infinity
))
)

A pasta estruturada após estas etapas deve ser como abaixo:

Exemplo com implementação

Testando um filtro

Filtros são métodos que alteram dados para um formato legível por humanos. Neste módulo, criaremos um filtro e escreveremos testes de unidade para esse filtro e verificaremos se está funcionando conforme o esperado.
Passos:

Crie um arquivo chamado filter.js na pasta do aplicativo.

filter.js

angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))

Agora, vamos escrever os casos de teste de unidade para verificar se o filtro está funcionando conforme o esperado ou não.

Métodos de estrutura do Jasmine

  • Descrever (): define um conjunto de testes - um grupo de testes relacionados.
  • It (): define uma especificação ou teste.
  • Expect (): aceita um valor real como parâmetro e é encadeado com uma função de correspondência.
  • Função Matcher: assume o valor esperado como parâmetros. É responsável por relatar ao Jasmine se a expectativa é verdadeira ou falsa.

Exemplo:

toBe ('valor'), toContain ('valor'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().

Crie um arquivo chamado filter.spec.js na pasta tests.

filter.spec.js

//1. Describe the object type
describe('Filters', function () (
//2. Load the Angular App
beforeEach(module('MyApp'));
//3. Describe the object by name
describe('compute', function () (
var compute;
//4. Initialize the filter
beforeEach(inject(function ($filter) (
compute = $filter('compute', ());
)));
//5. Write the test in the it block along with expectations.
it('Should return 0 if input is negative', function () (
const result = compute(-1);
expect(result).toBe(0); //pass
));
it('Should increment the input if input is positive', function () (
const result = compute(1);
expect(result).toBe(2);//pass
//expect(compute(3)).toBe(5);//fail
));
));
));

Para executar o teste, dê o comando abaixo no terminal da pasta de teste de unidade.
Começo do karma
ou você pode definir "karma start" no script de teste package.json e fornecer o comando abaixo.
teste npm

Isso abrirá o navegador Chrome.

Saída no terminal:

Testando um controlador e serviço

O AngularJS mantém a lógica separada da camada de visualização, facilitando o teste de controladores e serviços.
Passos:
1. Crie um arquivo chamado controller.js na pasta do aplicativo.

controller.js

var app = angular.module('Myapp', ())
app.service('calcService', (
function()(
function square(o1)(
return o1*o1;
)
return (square:square);
)
));
app.controller('MyController', function MyController($scope) (
$scope.title = "Hello MyController";
$scope.square = function() (
$scope.result = calcService.square($scope.number);
)
));

2. Crie um arquivo chamado controller.spec.js na pasta tests.

controller.spec.js

describe('MyController', function() (
var controller, scope;
beforeEach(angular.mock.module('Myapp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) (
scope = $rootScope.$new();
controller = $controller('MyController', ( $scope : scope ));
)));
it('Title should be defined', inject(function ($rootScope, $controller) (
expect(scope.title).toBeDefined();
)));
it('Title as Hello MyController', inject(function ($rootScope, $controller) (
expect(scope.title).toEqual('Hello MyController');
)));
));
describe('square', function()(
var calcService;
beforeEach(function()(
module('Myapp');
inject( function($injector)(
calcService = $injector.get('calcService');
));
));
it('should square the number', function()(
var result = calcService.square(3);
expect(result).toBe(9);
));
));

Saída no terminal:

Conclusão

Os aplicativos AngularJS são compostos de módulos. No nível do aplicativo, esses são os módulos AngularJS. No nível do módulo, são serviços, fábricas, componentes, diretivas e filtros. Cada um deles é capaz de se comunicar através de sua interface externa. Escrever casos de teste de unidade para seu aplicativo AngularJS acelera seu processo de depuração e desenvolvimento.

Artigos recomendados

Este é um guia para o teste de unidade AngularJS. Aqui discutimos a introdução e os Fundamentos do teste de unidade, juntamente com as ferramentas de teste do AngularJS e o exemplo com a implementação. Você também pode consultar os seguintes artigos para saber mais -

  1. Carreira no AngularJS
  2. ReactJs vs AngularJs
  3. Aplicação JS angular
  4. Carreira no DevOps

Categoria:

Desenvolvimento de software