Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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.

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