Outils pour utilisateurs

Outils du site


web:javascript:angular:unittests

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
web:javascript:angular:unittests [2019/06/11 02:34] – [Creating a Deep Integration Test] sgariepyweb:javascript:angular:unittests [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 586: Ligne 586:
  
  
 +===== Integration Testing of Services =====
  
 +On veut tester l'intégration du service ''HeroService'' avec le ''HttpClient''.
  
 +<code javascript>
 +import { TestBed } from "@angular/core/testing";
 +import { HeroService } from "./hero.service";
 +import { MessageService } from "./message.service";
 +import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
 +
 +describe('HeroService', () => {
 +  let mockMessageService;
 +  let httpTestingController: HttpTestingController;
 +  let service: HeroService;
 +
 +  beforeEach(() => {
 +    mockMessageService = jasmine.createSpyObj(['add']);
 +
 +    TestBed.configureTestingModule({
 +      imports: [ HttpClientTestingModule ],
 +      providers: [
 +        HeroService,
 +        {provide: MessageService, useValue: mockMessageService}
 +      ]
 +    });
 +
 +    httpTestingController = TestBed.get(HttpTestingController);
 +    service = TestBed.get(HeroService);
 +  });
 +});
 +
 +</code>
 +
 +
 +===== Implementing a Test with Mocked HTTP =====
 +
 +
 +Ce qu'on veut tester, c'est la méthode suivante dans le service:
 +
 +
 +<code javascript>
 +getHero(id: number): Observable<Hero> {
 +  const url = `${this.heroesUrl}/${id}`;
 +  
 +  return this.http.get<Hero>(url).pipe(
 +    tap(_ => this.log(`fetched hero id=${id}`)),
 +    catchError(this.handleError<Hero>(`getHero id=${id}`))
 +  );
 +}
 +</code>
 +
 +
 +Alors, un exemple de test serait :
 +
 +<code javascript>
 +it('should call get with the correct URL', () => { 
 +  service.getHero(4).subscribe();
 +
 +  const req = httpTestingController.expectOne('api/heroes/4');
 +  req.flush({id: 4, name: 'SuperDude', strength: 100});
 +  httpTestingController.verify();
 +});
 +</code>
 +
 +==== Obtenir l'instance de service ====
 +
 +
 +Pour obtenir une instance de ''service'', on peut faire:
 +
 +<code javascript>
 +import { TestBed, inject } from '@angular/core/testing';
 +
 +// ...
 +
 +it('should call get with the correct URL', inject([HeroService], (service: HeroService) => {
 +  // ...
 +}));
 +</code>
 +
 +
 +----
 +
 +
 +====== Testing DOM Interaction and Routing Components ======
 +
 +
 +
 +
 +
 +====== Sources ======
 +
 +  * [[https://medium.com/ngconf/mockstore-in-ngrx-v7-0-f7803708de4e|MockStore in NgRx v7.0]]
  
  
  
web/javascript/angular/unittests.1560213296.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)