Mock d’un component pour un test unitaire, avec Karma et dans Angular - Formations informatiques, nouvelles technologies et NTIC | Dev to be curious

  • Home
  • Angular
  • Mock d’un component pour un test unitaire, avec Karma et dans Angular
mock component angular
By: Evan Boissonnot    7 février 2019  

Prenons un Component que vous avez conçu, et qui a déjà sa classe de tests. Puis, ajouter un second Component qui appelle ce premier Component.
Et vous devez tester ce Component. Comment faire, sans devoir tester les deux Components en même temps ? Voyons ensemble la notion de Mock / Stub d’un Component.

 

Ce que tu fais, je teste, ce que l’autre fait, je mock

Quand on a un composant qui appelle un autre composant, nous pouvons avoir deux stratégies pour les tests :

  • Charger ce component avec l’appelant
  • Faire comme si il existait, au moins dans son utilisation

 

Une règle à penser, pour la plupart des tests : quand la classe que je teste utilise d’autres classes, je mock (je simule) les autres classes.

Ce qui se cache derrière comme règle à penser : On ne teste qu’un composant à la fois.

 

Simuler à la main, ou avec des outils

Bien sûr, vous pouvez opter pour simuler certaines classes à la main. C’est le cas des Services que l’on peut simuler avec des Stubs.

 

Ici, nous vous partageons notre utilisation d’un Component de simulation : ng2-mock-component.

 

Et si vous voulez voir un exemple d’utilisation pour simuler un Component appelé dans un autre Component, take a look de notre gist :


import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { MockComponent } from 'ng2-mock-component';
import { AppComponent } from './app.component';
import { GlobalMenuComponent } from './global-menu/global-menu.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
],
declarations: [
AppComponent,
MockComponent({selector: 'app-global-menu'})
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'front-end'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('Book my service !');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to front-end!');
});
});
view raw

app.component.test.ts

hosted with ❤ by GitHub

 

NOTE: l’important ici, c’est de préciser le selector : le nom du composant du côté Vue.