📢 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

Tester la fonction input() dans un composant

L'objectif de cet exemple est de montrer comment tester une fonctionnalité de liaison de données dans un composant Angular en utilisant input() et fixture.componentRef.setInput().

ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './user-card.component';

describe('NavbarComponent', () => {
  let component: NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  let elView:  HTMLElement

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [NavbarComponent]
    })
    .compileComponents();
    fixture = TestBed.createComponent(NavbarComponent);
    component = fixture.componentInstance;
    elView = fixture.nativeElement
    fixture.componentRef.setInput('title', 'Mon App')
    fixture.detectChanges();
  });

  it('Le titre est bien affiche', () => {
      const titleEl = elView.querySelector('header')
      expect(titleEl?.textContent).toContain(component.title())
  });
});
ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-navbar',
  standalone: true,
  templateUrl: 
    <header>{{ title }}</header>
  
})
export class NavbarComponent {
  title = Input('') // ![]
}

Usage de input() :

Dans Angular, input() est une fonction utilisée pour déclarer une propriété d'entrée (input property) d'un composant. Elle fait partie du nouveau système de signaux introduit dans Angular 17.1.

Dans votre composant :

typescript
export class NavbarComponent {
  title = input('')
}

Ici, title est déclaré comme une propriété d'entrée du composant. Le '' passé à input() définit la valeur par défaut de cette propriété (une chaîne vide dans ce cas).

Cette déclaration permet au composant parent de passer une valeur pour title lors de l'utilisation du composant, par exemple :

html
<app-navbar [title]="'Mon Application'"></app-navbar>

Usage de fixture.componentRef.setInput :

Dans le test unitaire, cette ligne est utilisée pour simuler la définition de la propriété d'entrée title du composant :

typescript
fixture.componentRef.setInput('title', 'Mon App')

Cette méthode est utilisée dans le contexte des tests pour définir programmatiquement la valeur d'une propriété d'entrée du composant. Elle simule ce qui se passerait si un composant parent passait cette valeur au composant NavbarComponent.

setInput

Met à jour un nom d'entrée spécifié avec une nouvelle valeur. L'utilisation de cette méthode permet de marquer correctement les composants à vérifier à l'aide de la stratégie de détection des modifications OnPush. Elle garantit également que le crochet de cycle de vie OnChanges s'exécute lorsqu'un composant créé dynamiquement est détecté comme modifié.

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