Comment réaliser des tests unitaires sur l'input d'un composant Blazor ?
L'une des choses que je préfère avec Blazor, consiste dans la possibilité de tester intégralement un composant via bUnit. Un bon exemple valant toujours mieux que de long discourt, voici un cas simple permettant de résoudre deux problématiques :
- Le besoin de modifier un
input
. - Le besoin de consulter le contenu d'un
input
.
Pour commencer, on peut initialiser un contexte de test, et effectuer un rendu d'un composant :
// Création du context de test
using var context = new TestContext();
// Création du composent et rendu
var obj = context.RenderComponent<MonComposent>();
Pour modifier une input
dont l'Id serait inputId
, on peut utiliser le code :
obj.Find("#inputId").Change("Ma valeur");
Pour consulter le contenu d'un input
dont l'ID serait inputId
, on peut utiliser le code :
var actual = obj.Find("#inputId").GetAttribute("value");
Pour finir, voici un exemple complet :
[Theory]
[InlineData("Foo")]
public void Exemple(String value)
{
// Création du context de test
using var context = new TestContext();
// Création du composent et rendu
var obj = context.RenderComponent<MonComposent>();
// Modification
obj.Find("#inputId").Change(value);
// … ajouter des interactions avec le composant ici
// Vérifier la valeur de l'input
var actual= obj.Find("#inputId").GetAttribute("value");
actual.Should().BeEquivalentTo(value);
}
Conclusion
Voici du code simple et efficace. Tout ce que j'aime!