Angular Academy · Lezione

Mock di servizi e dipendenze

Fornire test double tramite DI

Mock di servizi e dipendenze è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Perché simulare le dipendenze

Un test del componente dovrebbe isolare il componente stesso. Se inietta un servizio basato su HttpClient, non desidera effettuare vere chiamate di rete. Fornisca invece un test double: un oggetto fittizio che restituisce dati controllati, così i test sono rapidi e deterministici.

Fornire un fake tramite useValue

Il double più semplice è un normale oggetto fornito con useValue. Lo fornisca usando lo stesso token di injection richiesto dal componente.

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

Spy di Jasmine

jasmine.createSpyObj crea un fake con metodi spy, così può sia configurare i valori restituiti sia verificare le chiamate.

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

Verificare che il servizio sia stato chiamato

Dopo aver interagito con il componente, verifichi che lo spy abbia ricevuto gli argomenti previsti.

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

Restituire Observable dai mock

I servizi restituiscono spesso Observable. Usi of() di RxJS per i casi di successo sincroni e throwError() per gli errori, così può testare entrambi i rami.

import { of, throwError } from 'rxjs';

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

useClass per fake riutilizzabili

Quando un fake viene riutilizzato in molti spec, definisca una classe e la colleghi con useClass.

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

Simulare HttpClient con HttpTestingController

Per testare servizi che effettuano chiamate HTTP senza simulare l'intero servizio, importate provideHttpClientTesting() e completate le richieste tramite HttpTestingController.

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

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

Completare una richiesta HTTP

Prevedete una richiesta, rispondete con dati simulati, quindi verificate che non rimangano chiamate impreviste.

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();

Sostituire un provider per ogni spec

A volte un test richiede un mock diverso. Usate TestBed.overrideProvider() prima di createComponent.

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

Mock solo quanto basta

Un buon double implementa solo i metodi effettivamente utilizzati dal componente. Un mocking eccessivo lega il test ai dettagli interni; un mocking insufficiente lascia propagare effetti collaterali reali. Attenetevi al contratto pubblico da cui dipende il componente.

Creare spy sui metodi di un servizio reale

Potete anche mantenere un servizio reale e creare uno spy su un singolo metodo usando spyOn(instance, 'method'), utile quando la maggior parte del servizio è innocua ma una chiamata deve essere intercettata.

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

Verifica rapida

Come si può fare in modo che un fake verifichi le chiamate E controlli i valori restituiti?

Riepilogo

Avete sostituito le dipendenze reali con double usando useValue, useClass e gli spy di Jasmine; avete restituito Observable con of/throwError; avete testato l'HTTP tramite HttpTestingController e sostituito i provider per ogni spec. Simulate solo il contratto utilizzato dal componente.

Domande Frequenti

La lezione «Mock di servizi e dipendenze» è gratuita?

Sì — il testo completo di «Mock di servizi e dipendenze» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Mock di servizi e dipendenze»?

Fornire test double tramite DI Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Mock di servizi e dipendenze»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy