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().

navbar.component.spec.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())
  });
});

navbar.component.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 :

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 :

<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 :

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é.