Testes AngularJS: Guia Completo para Serviços e Controladores

By arpita 16 Min Read
Contents
IntroduçãoPrincipais Ferramentas de Teste para AngularJSAplicações AngularJS — Principais Componentes1. Controllers2. Views3. Models4. Services5. ModulesTestes Unitários em AngularJSFundamentos dos Testes Unitários em AngularJSIsole as DependênciasAAA — Arrange, Act, AssertUma Asserção por TesteTorne os Testes IndependentesMantenha Testes Curto e LegíveisConfigurando Seu Ambiente1. Instale os Pré-requisitos2. Crie a Estrutura do Projeto3. Inicialize o Projeto e Instale Dependências4. Configure o KarmaTestes End-to-End (E2E) em AngularJS com Protractor ou CypressBenefícios dos Testes End-to-End1. Configurando o Cypress para Testes E2E2. Instalando o Protractor para Testes E2E3. Testes de Integração em AngularJSConfigurando um Teste de Integração AngularPasso 1: Criar um Novo Projeto AngularPasso 2: Aproveitar os Arquivos de Teste Gerados AutomaticamentePasso 3: Criar e Configurar um Test SuitePasso 4: Escrever o Teste de IntegraçãoPasso 5: Executar o TesteTestando Serviços no AngularJSTestando Controladores no AngularJSInjetando Serviços em Controladores AngularJS1. Array Inline2. Propriedade $injectConclusão do Nosso Tutorial de Testes AngularJS

Introdução

Bem-vindo a este tutorial prático de testes em AngularJS para iniciantes!

Testar é essencial para criar aplicações AngularJS robustas, mas muitos desenvolvedores acham essa etapa complicada. Este tutorial foi criado para tornar o processo de testar código Angular simples e direto, usando exemplos práticos que você pode aplicar imediatamente.

Seguindo princípios fundamentais de testes — como isolamento, mocking e organização — você ganhará experiência prática para criar testes mantáveis que identificam problemas rapidamente.
Ao final, você terá as habilidades essenciais para construir aplicações AngularJS em nível de produção, atendendo a requisitos de funcionalidade, compatibilidade, confiabilidade e desempenho.

Com foco em simplicidade e aplicação no mundo real, este AngularJS Testing Tutorial dará a você a confiança necessária para criar aplicações AngularJS livres de bugs.

Então, vamos começar!

Principais Ferramentas de Teste para AngularJS

  • Cypress – Framework de testes end-to-end que roda diretamente em navegadores modernos.

  • Karma – Test runner para testes unitários de código AngularJS.

  • Protractor – Framework de testes E2E voltado para aplicações AngularJS.

Aplicações AngularJS — Principais Componentes

Ao criar aplicações AngularJS, os desenvolvedores trabalham com diversos componentes fundamentais que formam a estrutura e a funcionalidade do app. Esses elementos atuam juntos para montar a lógica, a camada visual e os serviços que suportam a experiência do usuário.

1. Controllers

Controllers são funções JavaScript que fornecem a lógica de negócios por trás das views. No padrão MVC, eles representam o “controlador”: processam a entrada do usuário, manipulam dados e decidem o conteúdo exibido.
Na prática, desenvolvedores criam controllers para conectar os scopes às views no AngularJS.

2. Views

As views são definidas em HTML e exibem dados vindos de controllers e models.
O grande diferencial é a data-binding, que atualiza automaticamente a interface quando os dados mudam — eliminando atualizações manuais de DOM.

3. Models

Models podem ser simples objetos JavaScript ou estruturas vindas de soluções como Firebase.
Seu objetivo é representar conceitos de dados da aplicação de forma facilmente utilizável pelas views.

4. Services

Services no AngularJS executam tarefas como chamadas a APIs sem poluir o código dos controllers.
Além disso, podem ser compartilhados pela aplicação inteira, aumentando modularidade e reutilização.

5. Modules

Módulos são definidos usando ng-app e funcionam como contêineres para dependências e componentes iniciais.
Isso organiza melhor o código e mantém separação clara de responsabilidades.

Aproveitando esses componentes, desenvolvedores conseguem construir aplicações AngularJS escaláveis, com camadas bem separadas e experiências ricas e dinâmicas.

Testes Unitários em AngularJS

Os testes unitários em AngularJS são essenciais para criar aplicações de alta qualidade, porque validam se componentes individuais — como controllers, directives e services — funcionam exatamente como deveriam.

Os principais benefícios incluem: identificar bugs cedo, permitir refatorações seguras no código e simplificar a integração de trechos desenvolvidos por equipes diferentes.
Portanto, antes que uma aplicação AngularJS seja considerada pronta para produção, ela deve passar por testes unitários completos para detectar problemas o mais cedo possível.

Como resultado, testes unitários sólidos levam a aplicações mais confiáveis, melhor otimizadas e mais alinhadas aos requisitos do negócio. Eles também facilitam o diagnóstico e a correção rápida de erros, o que aumenta a confiança dos usuários nas funcionalidades da aplicação.

Fundamentos dos Testes Unitários em AngularJS

Ao escrever testes unitários para seu código AngularJS, seguir alguns fundamentos essenciais garantirá que sua suíte de testes permaneça robusta, organizada e sustentável mesmo à medida que a aplicação cresce:

Isole as Dependências

Cada teste unitário deve avaliar apenas um componente específico, sem depender de outros módulos ou serviços externos. Use mocks, spies e stubs para simular dependências.

AAA — Arrange, Act, Assert

Estruture cada teste em três partes bem definidas:

  • Arrange: configure dados e entradas necessárias

  • Act: execute a lógica que será testada

  • Assert: valide que a saída corresponde ao esperado

Uma Asserção por Teste

Cada caso deve validar apenas um comportamento. Isso torna mais fácil identificar o que falhou quando ocorre um erro.

Torne os Testes Independentes

Cada teste deve configurar seus próprios dados.
Assim, eles podem rodar em qualquer ordem e até em paralelo, sem depender uns dos outros.

Mantenha Testes Curto e Legíveis

Quebre casos longos em funções menores que testem subcomportamentos específicos, tornando a suíte mais limpa e compreensível.

Seguir essas diretrizes fundamentais garantirá que sua suíte de testes AngularJS permaneça forte, confiável e fácil de expandir conforme a complexidade da aplicação aumenta.

Configurando Seu Ambiente

Para começar com testes unitários, basta seguir estes passos:

1. Instale os Pré-requisitos

  • Instale o Node.js no seu computador, pois ele será a base do ambiente.

  • Abra seu editor favorito (Visual Studio Code, Brackets ou Sublime Text).

2. Crie a Estrutura do Projeto

  • Crie uma pasta chamada “unit-testing” usando o comando mkdir.

  • Abra a pasta unit-testing no editor e depois abra um terminal dentro dela.

3. Inicialize o Projeto e Instale Dependências

Crie o arquivo package.json e instale os pacotes necessários:

npm init
npm i angular –save
npm i -g karma –save-dev
npm i karma-jasmine jasmine-core –save-dev
npm i angular-mocks –save-dev
npm i karma-chrome-launcher –save-dev

4. Configure o Karma

  • Na pasta unit-testing, crie duas pastas: app e test.

  • Em seguida, crie um arquivo chamado karma.config.js.

  • Abra o arquivo e execute: karma init

Esse comando cria um repositório inicial com configurações padrão.
Responda às perguntas conforme suas preferências — os valores padrão funcionam bem.

Testes End-to-End (E2E) em AngularJS com Protractor ou Cypress

Os testes end-to-end simulam exatamente como um usuário real interage com sua aplicação, do início ao fim. Enquanto os testes unitários se limitam a avaliar partes individuais do código em isolamento, os testes E2E são essenciais para identificar problemas que surgem quando todos esses blocos são combinados em fluxos completos e reais.

Por exemplo, testes unitários podem validar que um formulário de login funciona e que uma consulta ao banco de dados retorna o resultado correto.
No entanto, os testes E2E vão além: eles realizam login com credenciais reais, clicam nos elementos da interface, navegam entre páginas e verificam dados reais retornados pelo servidor.

Assim, os testes end-to-end fornecem a confiança de que sua aplicação funciona de forma fluida sob condições reais de uso, encontrando lacunas que ficam entre testes unitários e testes de integração.

Benefícios dos Testes End-to-End

Realizar testes E2E completos traz uma série de benefícios importantes:

  • Identifica mais bugs antecipadamente, resultando em software de maior qualidade.

  • Garante que todos os componentes funcionem de maneira harmoniosa.

  • Reproduz fluxos reais de usuários, elevando a experiência final.

  • Economiza tempo e reduz custos ao corrigir problemas mais cedo.

  • Incentiva colaboração entre equipes responsáveis por diferentes partes do sistema.

  • Automatiza tarefas repetitivas, aumentando a produtividade.

  • Acelera o tempo de lançamento ao diminuir defeitos antes da produção.

Em resumo, os testes E2E entregam software mais robusto e confiável, atendendo às necessidades de negócio e às expectativas dos usuários ao validar qualidade de ponta a ponta.

1. Configurando o Cypress para Testes E2E

Configurar o Cypress é bem simples:

  • Crie uma nova pasta de projeto e inicialize-a com:
    npm init

  • Instale o Cypress dentro da pasta do projeto:
    npm install cypress --save-dev ou yarn add cypress --dev

E pronto! Com o Cypress instalado, você já pode começar a criar e executar testes end-to-end para sua aplicação.

2. Instalando o Protractor para Testes E2E

Pré-requisito: Node.js instalado.

Abra o terminal e execute:
npm install -g protractor

Isso instalará duas ferramentas de linha de comando:

  • protractor — o executor de testes

  • webdriver-manager — gerencia o Selenium WebDriver

Verifique se foi instalado com:
protractor --version

Agora você tem a versão mais recente do Protractor instalada globalmente, pronta para uso em testes E2E.

3. Testes de Integração em AngularJS

Os testes de integração validam se diferentes unidades ou componentes funcionam corretamente quando combinados.

É importante diferenciar esse tipo de teste de outros:

  • Testes unitários avaliam unidades individuais em isolamento.

  • Testes E2E simulam fluxos completos do usuário.

  • Testes de integração, por sua vez, verificam se a interação direta entre módulos integrados está funcionando adequadamente.

Por exemplo, um teste de integração pode verificar se a camada de interface (UI) chama corretamente um serviço que consulta uma API e exibe os dados no navegador.

Assim, enquanto os testes unitários cuidam dos pequenos blocos e os E2E validam o fluxo completo, os testes de integração se concentram nas conexões e interações entre componentes que trabalham em conjunto.

Configurando um Teste de Integração Angular

Passo 1: Criar um Novo Projeto Angular

Para criar um novo projeto Angular, digite o seguinte comando no terminal:

ng new angular-todo-app

Aguarde enquanto o Angular configura automaticamente o novo projeto para você.

Passo 2: Aproveitar os Arquivos de Teste Gerados Automaticamente

O Angular gera automaticamente arquivos de teste (*.spec.ts) para componentes criados com TypeScript.
Para o nosso teste de integração, utilizaremos o arquivo padrão app.component.spec.ts, que é gerado dentro da pasta app e já vem totalmente preparado para testes.

Esse arquivo está vinculado ao componente principal app.component.ts e já possui toda a configuração inicial necessária.

Passo 3: Criar e Configurar um Test Suite

Abra o arquivo app.component.spec.ts e crie um novo test suite com o seguinte código:

describe('TodoList Integration', () => {
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let service: TodoService;beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [FormsModule],
declarations: [AppComponent, TodoComponent],
providers: [
{
provide: TodoService,
useValue: {
getTasks: () => {
return dummyTodos;
}
}
}
]
}).compileComponents();

fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
service = TestBed.inject(TodoService);
});
});

const dummyTodos = [
{
id: 1,
title: ‘Todo 1’,
completed: false
},
{
id: 2,
title: ‘Todo 2’,
completed: false
}
];

Essa configuração inclui:

  • Setup assíncrono do ambiente de teste

  • Compilação do módulo de teste

  • Criação do componente

  • Injeção do serviço

  • Dados fictícios configurados para validar interações

Tudo isso prepara a base para um teste de integração realmente funcional.

Passo 4: Escrever o Teste de Integração

Adicione o seguinte teste:

it('should load todos from service', async(() => {
fixture.detectChanges();
expect(component.todos.length).toBe(2);
expect(service.getTasks()).toEqual(dummyTodos);
}));

Esse teste:

  • Dispara a detecção de mudanças

  • Valida o carregamento da lista de tarefas

  • Compara a saída do serviço com os dados fictícios

  • Garante que o componente está exibindo corretamente as informações

Passo 5: Executar o Teste

Para rodar os testes de integração, vá até a raiz do projeto no terminal e execute:

ng test

Ou, caso queira executar apenas um arquivo específico:

ng test --include app.component.spec.ts

O Angular configurará automaticamente o ambiente de testes e exibirá os resultados no console ou navegador, dependendo da configuração entralizado.

Testando Serviços no AngularJS

Os serviços são um dos blocos de construção mais importantes nas aplicações AngularJS, fornecendo lógica de negócios reutilizável. Mas como garantir que seus serviços tenham uma cobertura de testes realmente robusta?

Esta seção apresenta as melhores práticas para escrever testes unitários para seus serviços, permitindo que você:

  • Configure o framework de testes do AngularJS a partir do zero.

  • Faça o mock de maneira eficaz das dependências com as quais seus serviços interagem.

  • Valide o comportamento dos serviços por meio de especificações de teste bem estruturadas.

  • Identifique casos de uso relevantes para maximizar a cobertura.

Testar serviços adequadamente revela falhas logo no início e garante confiança de que as regras de negócios realmente preservam a integridade dos dados.

Testando Controladores no AngularJS

Os controladores são a espinha dorsal do comportamento dinâmico das aplicações AngularJS, conectando a interface do usuário à lógica subjacente. Portanto, testar controladores de forma completa evita problemas futuros na interface.

Uma suíte de testes confiável permite simular interações do usuário e validar que os controladores transformam e apresentam os dados corretamente.

Injetando Serviços em Controladores AngularJS

Ao realizar testes unitários de controladores, você precisará fazer o mock de suas dependências. Existem duas maneiras padrão de injetar essas dependências:

1. Array Inline

Defina um array inline listando as dependências — útil para casos simples:

angular.module('myApp')
.controller('MyController', ['$scope', 'MyService', function($scope, MyService) {
// ...
}]);

2. Propriedade $inject

Como alternativa, defina uma propriedade $inject na função do controlador:

angular.module('myApp')
.controller('MyController', MyController);MyController.$inject = [‘$scope’, ‘MyService’];

function MyController($scope, MyService) {
// …
}

Ambas as abordagens funcionam para mocking em testes. O ponto essencial é listar explicitamente as dependências para garantir que sejam resolvidas corretamente após a minificação do código.

Conclusão do Nosso Tutorial de Testes AngularJS

Parabéns por chegar ao final do nosso tutorial de testes AngularJS! Agora você possui o conhecimento fundamental e as habilidades necessárias para começar a construir suítes de testes robustas para suas aplicações AngularJS.

Embora testar possa parecer intimidador no início, insistir na prática gera enormes benefícios em estabilidade da aplicação, rapidez de entrega e experiência aprimorada do usuário. Lembre-se de aplicar práticas recomendadas de testes, como isolamento, mocking e organização legível dos testes.

Este foi apenas o começo. Há muito mais para explorar, como testar diretivas, testes de regressão visual e técnicas avançadas para cenários de teste complexos.

O segredo é manter-se positivo, começar a testar cedo, refatorar regularmente e buscar ajuda sempre que necessário. O mais importante: a prática contínua solidificará o que você aprendeu e construirá confiança real.

Share This Article
Leave a comment
Lost your password?