¿Cómo escribir casos de prueba para llamadas API en Flutter?

Aquí vamos a una aplicación construida que llama a una API y escribe casos de prueba para ella antes de sumergirnos en ella, veamos algunos conceptos básicos.

La prueba de software es un proceso en el que probamos el código para asegurarnos de que produce los resultados esperados en cualquier instancia dada.

Las pruebas de aleteo consisten en:

1. Prueba unitaria : prueba de métodos, funciones o clases
2. Prueba de widget : prueba para un solo widget
3. Prueba de integración : prueba para la mayor parte o la totalidad de la aplicación

Como vamos a probar una función que llama a la API, haremos pruebas unitarias. Vamos a crear la aplicación. Puede crear la aplicación usando el comando flutter create o usar el IDE de su elección. En la aplicación, usaremos la API de Números , que proporcionará datos aleatorios sobre los números, y luego probaremos la función que realiza la llamada a la API. Suponemos que tiene algún tipo de experiencia con el desarrollo de aplicaciones flutter.

Primero, agregaremos la dependencia http en el archivo pubspec.yaml y publicaremos las dependencias.

name: flutter_unit_test
description: A new Flutter project.
  
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
  
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
  
environment:
  sdk: ">=2.12.0 <3.0.0"
  
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter
  http: 0.13.4
  
  
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  
dev_dependencies:
  flutter_test:
    sdk: flutter
  
  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0
  
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
  
# The following section is specific to Flutter.
flutter:
  
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.
  
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
  
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Ahora vamos a crear la aplicación. Puede eliminar todo el contenido del archivo main.dart en la carpeta lib y eliminar el archivo en la carpeta de prueba. Ahora compilaremos la aplicación en el archivo main.dart.

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
  
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'GeeksForGeeks',
          ),
          backgroundColor: Colors.green,
        ),
        body: const MyApp(),
      ),
    ),
  );
}
  
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: getNumberTrivia(),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: CircularProgressIndicator(
                color: Colors.green,
              ),
            );
          } else if (snapshot.connectionState == ConnectionState.done) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Center(
                child: Text(
                  snapshot.data.toString(),
                ),
              ),
            );
          } else {
            return const Center(
              child: Text(
                'Error Occurred',
              ),
            );
          }
        });
  }
}
  
Future<String> getNumberTrivia() async {
  Uri numberAPIURL = Uri.parse('http://numbersapi.com/random/trivia?json');
  final response = await http.get(numberAPIURL);
  if (response.statusCode == 200) {
    final Map triviaJSON = jsonDecode(response.body);
    return triviaJSON['text'];
  } else {
    return 'Failed to fetch number trivia';
  }
}

Ejecute la aplicación usando el comando flutter run o el botón ejecutar en su IDE.

Para escribir una prueba, necesitamos entender el método a probar. Aquí tenemos una función llamada getNumberTrivia que llama a una API que devuelve una respuesta JSON de trivia numérica en caso de éxito; de lo contrario, devuelve un mensaje de error.

Ahora podemos escribir dos casos de prueba primero para probar si la respuesta API exitosa devuelve un texto que contiene el número de trivia y segundo, cuando la llamada API falla, devuelve un mensaje de error.

Antes de comenzar la prueba, debemos comprender que no debemos realizar requests HTTP en la prueba. No es recomendable. En su lugar, debemos usar burlas o stubs. Afortunadamente, el paquete HTTP proporciona el archivo testing.dart para que lo usemos.

Se recomienda que creemos una carpeta llamada prueba en la raíz del proyecto y escribamos nuestras pruebas en ella. Ya está presente en nuestro proyecto cuando lo creamos. Asegúrate de tener flutter_test en tus dependencias de desarrollo y http en la sección de dependencias de tu archivo pubspec.yaml.

Antes de probar la función, debemos hacer que la dependencia de http sea un parámetro de la función, nos ayudará en la parte de simulación y stubs de la prueba.

Future<String> getNumberTrivia(http.Client http) async {
  Uri numberAPIURL = Uri.parse('http://numbersapi.com/random/trivia?json');
  final response = await http.get(numberAPIURL);
  if (response.statusCode == 200) {
    final Map triviaJSON = jsonDecode(response.body);
    return triviaJSON['text'];
  } else {
    return 'Failed to fetch number trivia';
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: getNumberTrivia(http.Client()),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: CircularProgressIndicator(
                color: Colors.green,
              ),
            );
          } else if (snapshot.connectionState == ConnectionState.done) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Center(
                child: Text(
                  snapshot.data.toString(),
                ),
              ),
            );
          } else {
            return const Center(
              child: Text(
                'Error Occurred',
              ),
            );
          }
        });
  }
}

Cree un archivo dart, puede llamarlo get_number_trivia_unit_test.dart. Asegúrese de poner _test al final del nombre del archivo, esto ayuda a flutter a comprender los archivos para la prueba mientras usa el comando flutter test.

Algunas de las funciones a saber para la prueba de aleteo. Estas funciones provienen del paquete flutter_test .

• grupo (descripción, cuerpo); Puede agrupar casos de prueba relacionados con una función particular utilizando la función de grupo. Puede escribir la descripción de la prueba en el parámetro de descripción y el cuerpo contiene todos los casos de prueba.
• prueba(descripción,cuerpo); Puede escribir un caso de prueba utilizando la función de prueba a la que puede proporcionar la descripción en el parámetro y el cuerpo contendrá el caso de prueba en sí.
• esperar (real, emparejador); Puede probar la salida utilizando el método de expectativa al proporcionarle la salida de la función como un parámetro real y la salida esperada como un comparador.

Hay varios emparejadores que puedes encontrar en la documentación oficial.

import 'dart:convert';
import 'package:flutter_test/flutter_test.dart';
  
// file which has the getNumberTrivia function
import 'package:flutter_unit_test/main.dart';
import 'package:http/http.dart';
import 'package:http/testing.dart';
  
void main() {
  group('getNumberTrivia', () {
    test('returns number trivia string when http response is successful',
        () async {
            
      // Mock the API call to return a json response with http status 200 Ok //
      final mockHTTPClient = MockClient((request) async {
          
        // Create sample response of the HTTP call //
        final response = {
          "text":
              "22834 is the feet above sea level of the highest mountain 
              in the Western Hemisphere, Mount Aconcagua in Argentina.",
          "number": 22834,
          "found": true,
          "type": "trivia"
        };
        return Response(jsonEncode(response), 200);
      });
      // Check whether getNumberTrivia function returns
      // number trivia which will be a String
      expect(await getNumberTrivia(mockHTTPClient), isA<String>());
    });
  
    test('return error message when http response is unsuccessful', () async {
        
      // Mock the API call to return an 
      // empty json response with http status 404
      final mockHTTPClient = MockClient((request) async {
        final response = {};
        return Response(jsonEncode(response), 404);
      });
      expect(await getNumberTrivia(mockHTTPClient),
          'Failed to fetch number trivia');
    });
  });
}

Para ejecutar la prueba, ingrese el siguiente comando en la terminal

flutter test 

Producción: