💑 🚴🏾 🕹️ Bases de flutter pour les débutants (Partie IX) 🏁 👨🏾‍🍳 🤲🏼

Flutter vous permet d'écrire des tests simples et directs pour différentes parties de votre application.

Aujourd'hui, nous allons essayer d'écrire plusieurs tests unitaires qui sont utilisés pour tester des classes, des méthodes et des fonctions individuelles.

Nous essaierons également d'utiliser une bibliothèque Mockito

qui vous permet de créer de fausses implémentations.

Eh bien, commençons à tester !

Notre plan

Partie 1 - introduction au développement, première annexe, notion d'état ;
Partie 2 - fichier pubspec.yaml et utilisation de flutter sur la ligne de commande ;
Partie 3 - BottomNavigationBar et Navigator ;
Partie 4 - MVC. Nous utiliserons ce modèle particulier comme l'un des plus simples ;
Partie 5 - paquet http. Création de la classe Repository, premières demandes, listing des posts ;
Partie 6 - travailler avec des formulaires, des zones de texte et créer un article.
Partie 7 - travailler avec des images, afficher des images sous forme de grille, recevoir des images du réseau, ajouter les vôtres à l'application;
Partie 8 - créer votre propre thème, ajouter des polices et des animations personnalisées ;
Partie 9 (article actuel) - un peu sur les tests ;

Ajout des dépendances requises

Nous avons besoin de deux packages supplémentaires mockito

et build_runner

, par conséquent, ajoutons-les :

#   
#     
dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito: ^5.0.10
  build_runner: ^2.0.4

Maintenant, nous pouvons commencer à tester

Rédaction du premier test

Il y aura une petite classe comme objet de test Stack

:

class Stack<T> {
  final stack = <T>[];
  
  void push(T t) {
    stack.add(t);
  }
  
  T? pop() {
    if (isEmpty) {
      return null;
    }
    return stack.removeLast();
  }
  
  bool get isEmpty => stack.isEmpty; 
}

Attention : la classe Stack

est générique.

Il y a un dossier de test,

test dans le répertoire racine de notre projet.

Créons un nouveau fichier dedans stack_test.dart

:

import 'package:flutter_test/flutter_test.dart';
import 'package:json_placeholder_app/helpers/stack.dart';

void main() {
  //  
  group("Stack", () {
    //     
    test("Stack should be empty", () {
      // expect    
      //     
      //    ,   
      expect(Stack().isEmpty, true);
    });
    test("Stack shouldn't be empty", () {
      final stack = Stack<int>();
      stack.push(5);
      expect(stack.isEmpty, false);
    });
    test("Stack should be popped", () {
      final stack = Stack<int>();
      stack.push(5);
      expect(stack.pop(), 5);
    });
    test("Stack should be work correctly", () {
      final stack = Stack<int>();
      stack.push(1);
      stack.push(2);
      stack.push(5);
      expect(stack.pop(), 5);
      expect(stack.pop(), 2);
      expect(stack.isEmpty, false);
    });
  });
}

Assez simple! N'est-ce pas?

En fait, il s'agit d'un type de test appelé unitaire.

Flutter prend également en charge :

Test des widgets
Tests d'intégration

Dans cet article, nous ne couvrirons que les tests unitaires.

Exécutons nos tests avec la commande flutter test test/stack_test.dart:

Avec succès!

Test de post-récupération

Tout d'abord, modifions la méthode fetchPosts

:

Future<PostList> fetchPosts({http.Client? client}) async {
  //   URL,  
  //    
  final url = Uri.parse("$SERVER/posts");
  //  GET 
  final response =  (client == null) ? await http.get(url) : await client.get(url);
  //   
  if (response.statusCode == 200) {
    //      
    // json.decode  
    return PostList.fromJson(json.decode(response.body));
  } else {
    //     
    throw Exception("failed request");
  }
}

Passons maintenant à l'écriture du test lui-même.

Nous allons utiliser mockito

pour créer http.Client'

un faux

Créons un fichier post_test.dart

dans le dossier tests

:

import 'package:flutter_test/flutter_test.dart';
import 'package:http/http.dart' as http;
import 'package:json_placeholder_app/data/repository.dart';
import 'package:json_placeholder_app/models/post.dart';
import 'package:mockito/annotations.dart';
import 'package:mockito/mockito.dart';

//    
import 'post_test.mocks.dart';

//  mockito
@GenerateMocks([http.Client])
void main() {
  //   
  final repo = Repository();
  group("fetchPosts", () {
      test('returns posts if the http call completes successfully', () async {
        //   
        final client = MockClient();

        //   
        when(client.get(Uri.parse('https://jsonplaceholder.typicode.com/posts')))
            .thenAnswer((_) async => http.Response('[{"userId": 1, "id": 2, "title": "Title", "content": "Content"}]', 200));

        //    fetchPosts
        //   
        final postList = await repo.fetchPosts(client: client);
        expect(postList, isA<PostList>());
        expect(postList.posts.length, 1);
        expect(postList.posts.first.title, "Title");
      });

      test('throws an exception if the http call completes with an error', () {
        final client = MockClient();

        //  
        when(client.get(Uri.parse('https://jsonplaceholder.typicode.com/posts')))
            .thenAnswer((_) async => http.Response('Not Found', 404));

        //   
        expect(repo.fetchPosts(client: client), throwsException);
      });
  });
}

Avant de commencer le test, vous devez générer un post_test.mocks.dart

fichier :

flutter pub run build_runner build

Après cela, nous exécutons nos tests avec la commande flutter test test/post_test.dart

:

Voila !

Conclusion

Nous avons couvert l'un des types de tests les plus simples et les plus connus - l'unité.

Comme déjà indiqué, Flutter vous permet de tester les widgets séparément, ainsi que d'effectuer des tests complets à l'aide de tests d'intégration.

Liens utiles:

Code source Github
Une introduction aux tests unitaires
Dépendances simulées à l'aide de Mockito
Tester les applications Flutter

Bon code à tous !

Bases de flutter pour les débutants (Partie IX)

Ajout des dépendances requises

Rédaction du premier test

Test de post-récupération

Conclusion

More articles: