[Vidéo] Utilisez les signaux, c'est le futur d'Angular !

Dans cette vidéo de 3 minute, découvrez pourquoi les signaux sont essentiels pour l'avenir du développement web et apprenez les 3 fonctions: signal / computed / effect

Skip to content

DANGER

Cette page n'est plus à jour et obsolète.

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.

En août, Recevez des nouvelles libraries Angular 🌟 qui peuvent vous être utiles pour booster vos projets. Inscrivez-vous maintenant et découvrez les dernières tendances et outils Angular directement dans votre boîte mail !