Différences

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

--- web:javascript:angular:unittests [2019/06/11 01:08] – [Deep Integration Tests] sgariepy
+++ web:javascript:angular:unittests [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 523: / Ligne 523: @@
 ===== 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]]