Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste :
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 00:07] – [Dealing with Lists of Elements] sgariepyweb:javascript:angular:unittests [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 334: Ligne 334:
  
  
-===== Tester  =====+===== Interaction test =====
  
 +Dans le component, si on a une fonction tel que:
  
 +<code javascript>
 +delete(hero: Hero): void {
 +  this.heroes = this.heroes.filter(h => h !== hero);
 +  this.heroService.deleteHero(hero).subscribe();
 +}
 +</code>
 +
 +La troisième ligne, avec le ''subscribe()'', n'est pas nécessairement testée si on appelle ''delete'' et qu'on valide que ''this.heroes'' a changé.  C'est dû au fait que le ''subscribe()'' ne change pas l'état du component.
 +
 +Donc on peut faire un //test d'intégration// avec une vérification d'appel:
 +
 +<code>
 +it('should call deleteHero', () => {
 +  mockHeroService.deleteHero.and.returnValue(of(true))
 +  component.heroes = HEROES;
 +
 +  component.delete(HEROES[2]);
 +
 +  expect(mockHeroService.deleteHero).toHaveBeenCalledWith(HEROES[2]);
 +});
 +</code>
  
 ====== Shallow Integration Tests ====== ====== Shallow Integration Tests ======
Ligne 454: Ligne 476:
 </code> </code>
  
-===== Dealing with Lists of Elements =====+===== Mocking Child Components ===== 
  
 Créer un mock de component:  Créer un mock de component: 
Ligne 470: Ligne 493:
 </code> </code>
  
-Ajouter ''FakeHeroComponent'' dans ''declarations'' du TestBed.+Ajouter ''FakeHeroComponent'' dans ''declarations'' et enlever le ''NO_ERRORS_SCHEMA'' du TestBed. 
 + 
 +<code javascript> 
 +TestBed.configureTestingModule({ 
 +  declarations: [ 
 +    HeroesComponent, 
 +    FakeHeroComponent 
 +  ], 
 +  providers: [ 
 +    { provide: HeroService, useValue: mockHeroService } 
 +  ], 
 +}); 
 +</code> 
 + 
 + 
 +===== Dealing with Lists of Elements ===== 
 + 
 +<code javascript> 
 +it('should create one li element for each hero', () => { 
 +  mockHeroService.getHeroes.and.returnValue(of(HEROES)) 
 +  fixture.detectChanges(); 
 + 
 +  expect(fixture.debugElement.queryAll(By.css('li')).length).toBe(3); 
 +}); 
 +</code> 
 + 
 + 
 +====== Deep Integration Tests ====== 
 + 
 +===== Creating a Deep Integration Test ===== 
 + 
 +Dans ces tests, nous voulons évaluer l'intégration entre deux components parent-enfant. 
 + 
 + 
 +Le test de base, ressemble à ceci: 
 + 
 +<code javascript> 
 +describe('HeroesComponent (deep tests)', () => { 
 +  let fixture: ComponentFixture<HeroesComponent>; 
 +  let mockHeroService; 
 +  let HEROES; 
 + 
 +  beforeEach(() => { 
 +    mockHeroService = jasmine.createSpyObj(['getHeroes', 'addHero', 'deleteHero']); 
 + 
 +    TestBed.configureTestingModule({ 
 +      declarations: [ 
 +        HeroesComponent, 
 +        HeroComponent 
 +      ], 
 +      providers: [ 
 +        { provide: HeroService, useValue: mockHeroService } 
 +      ], 
 +      schemas: [NO_ERRORS_SCHEMA] 
 +    }) 
 +     
 +    fixture = TestBed.createComponent(HeroesComponent);     
 +  }); 
 + 
 +  it('should be true', () => { 
 +    expect(true).toBe(true); 
 +  }); 
 +}); 
 +</code> 
 + 
 +On inclus ''HeroesComponent'' et ''HeroComponent''. 
 + 
 + 
 +===== Finding Elements by Directive ===== 
 + 
 +Le component ''HeroComponent'' doit se répéter pour chaque héro trouvé. 
 + 
 + 
 +Remarquez qu'on utilise ''By.directive()''. 
 + 
 +<code javascript> 
 +it('should render each hero as a HeroComponent', () => { 
 +  mockHeroService.getHeroes.and.returnValue(of(HEROES)); 
 + 
 +  // run ngOnInit 
 +  fixture.detectChanges(); 
 + 
 +  const heroComponentDEs = fixture.debugElement.queryAll( 
 +    By.directive(HeroComponent) 
 +  ); 
 +  expect(heroComponentDEs.length).toEqual(3); 
 +  for (let i = 0; i < heroComponentDEs.length; i++) { 
 +    expect(heroComponentDEs[i].componentInstance.hero).toEqual(HEROES[i]); 
 +  } 
 +}); 
 +</code> 
 + 
 + 
 +===== 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.1560204428.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)