Unit-Test d'un Composant

La méthode TestBed.createComponent instancie le composant dont le type est transmis en paramètre puis retourne un objet ComponentFixture permettant de contrôler et inspecter le composant.

Les principales propriétés et méthodes de cette classe sont les suivantes :

• componentInstance : l'instance de la classe BookPreviewComponent,

• debugElement : objet permettant d'inspecter et de manipuler le DOM.

• detectChanges() : déclenche la Change Detection.

book-preview.component.spec.ts

import { async, fakeAsync, TestBed } from '@angular/core/testing';
import { Book } from './app/book/book';
import { BookPreviewComponent } from './app/book/book-preview/book-preview.component';
import { BookModule } from './app/book/book.module';

describe('BookPreviewComponent', () => {

    beforeEach(async(() => {

        TestBed.configureTestingModule({
            imports: [
                BookModule
            ]
        }).compileComponents();

    }));

    it('should show book info', fakeAsync(() => {

        const fixture = TestBed.createComponent(BookPreviewComponent);
        const component = fixture.componentInstance;
        const debugElement = fixture.debugElement;

        component.book = new Book({
            title: 'eXtreme Programming Explained'
        });

        fixture.detectChanges();

        expect(debugElement.nativeElement.querySelector('h1').textContent)
            .toEqual('eXtreme Programming Explained');

    }));

});

Lors de la configuration du TestBed, il est préférable d'importer le module contenant le composant à tester que de redéclarer le composant et réimporter ses dépendances.

Pour déclencher des événements sur le DOM (e.g. : changement d'un input de formulaire), il faut utiliser la méthode native dispatchEvent.

const input: HTMLInputElement = debugElement.nativeElement.querySelector('input');
input.value = 'test';
input.dispatchEvent(new Event('input'));

N'oubliez pas d'appeler la méthode detectChanges dès l'instanciation du composant pour initialiser le formulaire et permettre à Angular d'ajouter les bons listeners etc...