📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

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.

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