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