Flutter - Test

Les tests sont une phase très importante du cycle de vie de développement d'une application. Il garantit que l'application est de haute qualité. Les tests nécessitent une planification et une exécution minutieuses. C'est aussi la phase de développement la plus longue.

Le langage Dart et le framework Flutter fournissent un support étendu pour le test automatisé d'une application.

Types de tests

En règle générale, trois types de processus de test sont disponibles pour tester complètement une application. Ils sont les suivants -

Test unitaire

Le test unitaire est la méthode la plus simple pour tester une application. Il est basé sur la vérification de l'exactitude d'un morceau de code (une fonction, en général) d'une méthode d'une classe. Mais, cela ne reflète pas l'environnement réel et par conséquent, c'est la moindre option pour trouver les bogues.

Test de widget

Les tests de widgets sont basés sur la vérification de l'exactitude de la création, du rendu et de l'interaction avec d'autres widgets comme prévu. Il va encore plus loin et fournit un environnement en temps quasi réel pour trouver plus de bogues.

Test d'intégration

Les tests d'intégration impliquent à la fois des tests unitaires et des tests de widgets ainsi que des composants externes de l'application tels que la base de données, le service Web, etc..Il simule ou se moque de l'environnement réel pour trouver presque tous les bogues, mais c'est le processus le plus compliqué.

Flutter prend en charge tous les types de tests. Il fournit un support étendu et exclusif pour les tests de widgets. Dans ce chapitre, nous aborderons en détail le test des widgets.

Test de widget

Le cadre de test Flutter fournit la méthode testWidgets pour tester les widgets. Il accepte deux arguments -

  • Description du test
  • Code de test
testWidgets('test description: find a widget', '<test code>');

Étapes impliquées

Le test des widgets implique trois étapes distinctes -

  • Rendez le widget dans l'environnement de test.

  • WidgetTester est la classe fournie par le framework de test Flutter pour créer et rendre le widget. La méthode pumpWidget de la classe WidgetTester accepte n'importe quel widget et le rend dans l'environnement de test.

testWidgets('finds a specific instance', (WidgetTester tester) async { 
   await tester.pumpWidget(MaterialApp( 
      home: Scaffold( 
         body: Text('Hello'), 
      ), 
   )); 
});
  • Trouver le widget, que nous devons tester.

    • Le framework Flutter fournit de nombreuses options pour trouver les widgets rendus dans l'environnement de test et ils sont généralement appelés Finders. Les moteurs de recherche les plus fréquemment utilisés sont find.text, find.byKey et find.byWidget.

      • find.text recherche le widget contenant le texte spécifié.

find.text('Hello')
      • find.byKey trouve le widget par sa clé spécifique.

find.byKey('home')
      • find.byWidget trouve le widget par sa variable d'instance.

find.byWidget(homeWidget)
  • S'assurer que le widget fonctionne comme prévu.

  • Le framework Flutter fournit de nombreuses options pour faire correspondre le widget avec le widget attendu et ils sont normalement appelés Matchers . Nous pouvons utiliser la méthode expect fournie par le framework de test pour faire correspondre le widget, que nous avons trouvé dans la deuxième étape avec notre widget attendu en choisissant l'un des correspondants. Certains des correspondants importants sont les suivants.

    • findOneWidget - vérifie qu'un seul widget est trouvé.

expect(find.text('Hello'), findsOneWidget);
    • findNothing - vérifie qu'aucun widget n'est trouvé

expect(find.text('Hello World'), findsNothing);
    • findWidgets - vérifie que plus d'un seul widget est trouvé.

expect(find.text('Save'), findsWidgets);
    • findNWidgets - vérifie que N nombre de widgets sont trouvés.

expect(find.text('Save'), findsNWidgets(2));

Le code de test complet est le suivant -

testWidgets('finds hello widget', (WidgetTester tester) async { 
   await tester.pumpWidget(MaterialApp( 
      home: Scaffold( 
         body: Text('Hello'), 
      ), 
   )); 
   expect(find.text('Hello'), findsOneWidget); 
});

Ici, nous avons rendu un widget MaterialApp avec le texte Hello en utilisant le widget Text dans son corps. Ensuite, nous avons utilisé find.text pour trouver le widget, puis nous l'avons fait correspondre en utilisant findOneWidget.

Exemple de travail

Créons une application simple de flutter et écrivons un test de widget pour mieux comprendre les étapes impliquées et le concept.

  • Créez une nouvelle application de flutter, flutter_test_app dans le studio Android.

  • Ouvrez widget_test.dart dans le dossier de test. Il a un exemple de code de test comme indiqué ci-dessous -

testWidgets('Counter increments smoke test', (WidgetTester tester) async {
   // Build our app and trigger a frame. 
   await tester.pumpWidget(MyApp()); 
   
   // Verify that our counter starts at 0. 
   expect(find.text('0'), findsOneWidget); 
   expect(find.text('1'), findsNothing); 
   
   // Tap the '+' icon and trigger a frame. 
   await tester.tap(find.byIcon(Icons.add)); 
   await tester.pump(); 
   
   // Verify that our counter has incremented. 
   expect(find.text('0'), findsNothing); 
   expect(find.text('1'), findsOneWidget); 
});
  • Ici, le code de test fait les fonctionnalités suivantes -

    • Rend le widget MyApp à l'aide de tester.pumpWidget.

    • Garantit que le compteur est initialement à zéro en utilisant findOneWidget et findNothing matchers.

    • Recherche le bouton d'incrémentation du compteur à l'aide de la méthode find.byIcon.

    • Appuyez sur le bouton d'incrémentation du compteur à l'aide de la méthode tester.tap.

    • Garantit que le compteur est augmenté à l'aide de findOneWidget et findNothing matchers.

  • Appuyez à nouveau sur le bouton d'incrémentation du compteur, puis vérifiez si le compteur est augmenté à deux.

await tester.tap(find.byIcon(Icons.add)); 
await tester.pump(); 

expect(find.text('2'), findsOneWidget);
  • Cliquez sur le menu Exécuter.

  • Cliquez sur tests dans l'option widget_test.dart. Cela exécutera le test et rapportera le résultat dans la fenêtre de résultat.