Skip to content

Ecrire mon premier test unitaire

Pour écrire un test unitaire simple sur Angular, vous pouvez suivre les étapes ci-dessous :

  1. Créez un nouveau composant en utilisant la commande ng generate component mon-composant.

  2. Dans le fichier src/app/mon-composant/mon-composant.component.ts, ajoutez une fonction qui sera testée dans votre test unitaire, par exemple :

ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css']
})
export class MonComposantComponent {
  public maFonction() {
    return "Hello World!";
  }
}
  1. Créez un fichier de test pour votre composant en utilisant la commande ng generate component mon-composant.component.spec.

  2. Dans le fichier src/app/mon-composant/mon-composant.component.spec.ts, ajoutez le code suivant pour tester la fonction maFonction :

ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MonComposantComponent } from './mon-composant.component';

describe('MonComposantComponent', () => {
  let component: MonComposantComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MonComposantComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    const fixture = TestBed.createComponent(MonComposantComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should return "Hello World!"', () => {
    expect(component.maFonction()).toBe('Hello World!');
  });
});
  1. Exécutez les tests en utilisant la commande ng test. Si tous les tests passent avec succès, vous devriez voir un message indiquant que tous les tests ont réussi.

Ce code vous donne un exemple simple de la façon d'écrire un test unitaire sur Angular. Vous pouvez modifier les tests et les fonctions pour tester d'autres parties de votre code.

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !