Angular Academy · Aula

Simulando serviços e dependências

Forneça substitutos de teste por meio de DI.

Simulando serviços e dependências é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que simular dependências

Um teste de componente deve isolar o componente. Se ele injetar um serviço baseado em HttpClient, você não vai querer chamadas de rede reais. Em vez disso, forneça um substituto para teste: um objeto falso que retorna dados controlados para que os testes sejam rápidos e determinísticos.

Fornecendo um objeto falso com useValue

O substituto mais simples é um objeto comum fornecido com useValue. Forneça-o usando o mesmo token de injeção solicitado pelo componente.

const fakeApi = { getUser: () => of({ name: 'Ada' }) };
TestBed.configureTestingModule({
  imports: [ProfileComponent],
  providers: [{ provide: UserApi, useValue: fakeApi }],
});

Espiões do Jasmine

jasmine.createSpyObj cria um objeto falso com métodos espiões, permitindo tanto simular valores de retorno quanto verificar chamadas.

const apiSpy = jasmine.createSpyObj<UserApi>('UserApi', ['getUser']);
apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useValue: apiSpy }],
});

Verificando se o serviço foi chamado

Depois de interagir com o componente, verifique se o espião recebeu os argumentos esperados.

fixture.componentInstance.load(7);
fixture.detectChanges();
expect(apiSpy.getUser).toHaveBeenCalledWith(7);
expect(apiSpy.getUser).toHaveBeenCalledTimes(1);

Retornando Observables de objetos simulados

Os serviços frequentemente retornam Observables. Use of() do RxJS para sucessos síncronos e throwError() para falhas, para poder testar ambos os caminhos.

import { of, throwError } from 'rxjs';

apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));     // success
apiSpy.getUser.and.returnValue(throwError(() => new Error('boom'))); // error

useClass para objetos falsos reutilizáveis

Quando um objeto falso é reutilizado em várias especificações, defina uma classe e conecte-a com useClass.

class FakeUserApi {
  getUser() { return of({ name: 'Test' }); }
}
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useClass: FakeUserApi }],
});

Simulando HttpClient com HttpTestingController

Para testar serviços que fazem chamadas HTTP sem simular o serviço inteiro, importe provideHttpClientTesting() e descarregue as solicitações usando HttpTestingController.

import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';

TestBed.configureTestingModule({
  providers: [provideHttpClient(), provideHttpClientTesting()],
});

Descarregando uma solicitação HTTP

Espere uma solicitação, responda a ela com dados simulados e, em seguida, verifique se não restam chamadas inesperadas.

const http = TestBed.inject(HttpTestingController);
service.load();
const req = http.expectOne('/api/users/7');
expect(req.request.method).toBe('GET');
req.flush({ name: 'Ada' });
http.verify();

Substituindo um provedor por especificação

Às vezes, uma especificação precisa de uma simulação diferente. Use TestBed.overrideProvider() antes de createComponent.

TestBed.overrideProvider(UserApi, {
  useValue: { getUser: () => throwError(() => new Error('fail')) },
});
const fixture = TestBed.createComponent(ProfileComponent);

Simule apenas o necessário

Uma boa simulação implementa apenas os métodos que o componente realmente usa. Simular em excesso vincula o teste a detalhes internos; simular de menos permite que efeitos colaterais reais vazem. Reproduza o contrato público do qual o componente depende.

Espionando métodos de serviços reais

Você também pode manter um serviço real, mas espionar um método usando spyOn(instance, 'method'), o que é útil quando a maior parte do serviço não causa problemas, mas uma chamada precisa ser interceptada.

const svc = TestBed.inject(AnalyticsService);
spyOn(svc, 'track');
fixture.componentInstance.onClick();
expect(svc.track).toHaveBeenCalledWith('click');

Verificação rápida

Como você faz uma simulação verificar chamadas E controlar valores de retorno?

Recapitulação

Você substituiu dependências reais por simulações usando useValue, useClass e espiões do Jasmine; retornou Observables com of/throwError; testou HTTP usando HttpTestingController; e substituiu provedores por especificação. Simule apenas o contrato usado pelo componente.

Perguntas Frequentes

A aula “Simulando serviços e dependências” é grátis?

Sim — o texto completo de “Simulando serviços e dependências” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Simulando serviços e dependências”?

Forneça substitutos de teste por meio de DI. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Simulando serviços e dependências”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy