Saltar al contenido principal

Migración desde flutter_driver

Aprende cómo migrar las pruebas existentes de flutter_driver a integration_test.

Esta página describe cómo migrar un proyecto existente que utiliza flutter_driver al paquete integration_test, con el fin de ejecutar pruebas de integración.

Las pruebas con integration_test utilizan los mismos métodos que se usan en las pruebas de widgets.

Para una introducción al paquete integration_test, consulta la guía de Pruebas de integración.

Proyecto de ejemplo inicial

#

El proyecto de esta guía es una pequeña aplicación de escritorio de ejemplo con esta funcionalidad:

  • A la izquierda, hay una lista de plantas por la que el usuario puede desplazarse, tocar y seleccionar.
  • A la derecha, hay una pantalla de detalles que muestra el nombre de la planta y la especie.
  • Al iniciar la aplicación, cuando no hay ninguna planta seleccionada, se muestra un texto pidiendo al usuario que seleccione una planta
  • La lista de plantas se carga desde un archivo JSON local ubicado en la carpeta /assets.
Captura de pantalla del proyecto inicial

Puedes encontrar el ejemplo de código completo en la carpeta del Proyecto de Ejemplo.

Pruebas existentes

#

El proyecto contiene las tres pruebas de flutter_driver que realizan las siguientes comprobaciones:

  • Verificación del estado inicial de la app.
  • Selección del primer elemento en la lista de plantas.
  • Desplazamiento y selección del último elemento en la lista de plantas.

Las pruebas están contenidas en la carpeta test_driver, dentro del archivo main_test.dart.

En esta carpeta también hay un archivo llamado main.dart, que contiene una llamada al método enableFlutterDriverExtension(). Este archivo ya no será necesario cuando uses integration_test.

Configuración

#

Para empezar a utilizar el paquete integration_test, añade integration_test a tu archivo pubspec.yaml si aún no lo has hecho:

yaml
dev_dependencies:
  integration_test:
    sdk: flutter

A continuación, en tu proyecto, crea un nuevo directorio integration_test/, y crea tus archivos de prueba allí con el formato: <nombre>_test.dart.

Migración de pruebas

#

Esta sección contiene diferentes ejemplos sobre cómo migrar pruebas existentes de flutter_driver a pruebas de integration_test.

Ejemplo: Verificar que se muestra un widget

#

Cuando la app se inicia, la pantalla de la derecha muestra un texto pidiendo al usuario que seleccione una de las plantas de la lista.

Esta prueba verifica que se muestre el texto.

flutter_driver

En flutter_driver, la prueba utiliza waitFor, que espera hasta que el finder pueda localizar el widget. La prueba falla si no se puede encontrar el widget.

dart
test(
  'do not select any item, verify please select text is displayed',
  () async {
    // Wait for 'please select' text is displayed
    await driver.waitFor(find.text('Please select a plant from the list.'));
  },
);

integration_test

En integration_test tienes que realizar dos pasos:

  1. Primero carga el widget principal de la aplicación utilizando el método tester.pumpWidget.

  2. Luego, utiliza expect con el matcher findsOneWidget para verificar que el widget se muestra.

dart
testWidgets(
  'do not select any item, verify please select text is displayed',
  (tester) async {
    // load the PlantsApp widget
    await tester.pumpWidget(const PlantsApp());

    // wait for data to load
    await tester.pumpAndSettle();

    // Find widget with 'please select'
    final finder = find.text('Please select a plant from the list.');

    // Check if widget is displayed
    expect(finder, findsOneWidget);
  },
);

Ejemplo: Acciones de toque

#

Esta prueba realiza una acción de toque (tap) en el primer elemento de la lista, que es un ListTile con el texto "Alder".

Después del toque, la prueba espera a que aparezcan los detalles. En este caso, espera a que se muestre el widget con el texto "Alnus" para que se visualice.

Además, la prueba verifica que el texto "Please select a plant from the list." ya no se muestre.

flutter_driver

En flutter_driver, utiliza el método driver.tap para realizar un toque sobre un widget utilizando un finder.

Para verificar que un widget no se muestra, utiliza el método waitForAbsent.

dart
test('tap on the first item (Alder), verify selected', () async {
  // find the item by text
  final item = find.text('Alder');

  // Wait for the list item to appear.
  await driver.waitFor(item);

  // Emulate a tap on the tile item.
  await driver.tap(item);

  // Wait for species name to be displayed
  await driver.waitFor(find.text('Alnus'));

  // 'please select' text should not be displayed
  await driver.waitForAbsent(
    find.text('Please select a plant from the list.'),
  );
});

integration_test

En integration_test, utiliza tester.tap para realizar las acciones de toque.

Después de la acción de toque, debes llamar a tester.pumpAndSettle para esperar hasta que la acción haya finalizado y hayan ocurrido todos los cambios en la interfaz de usuario.

Para verificar que un widget no se muestra, utiliza la misma función expect con el matcher findsNothing.

dart
testWidgets('tap on the first item (Alder), verify selected', (tester) async {
  await tester.pumpWidget(const PlantsApp());

  // wait for data to load
  await tester.pumpAndSettle();

  // find the item by text
  final item = find.text('Alder');

  // assert item is found
  expect(item, findsOneWidget);

  // Emulate a tap on the tile item.
  await tester.tap(item);
  await tester.pumpAndSettle();

  // Species name should be displayed
  expect(find.text('Alnus'), findsOneWidget);

  // 'please select' text should not be displayed
  expect(find.text('Please select a plant from the list.'), findsNothing);
});

Ejemplo: Desplazamiento

#

Esta prueba es similar a la prueba anterior, pero en su lugar se desplaza hacia abajo y toca el último elemento.

flutter_driver

Para desplazarse hacia abajo con flutter_driver, utiliza el método driver.scroll.

Debes proporcionar el widget para realizar la acción de desplazamiento, así como una duración para el mismo.

También tienes que proporcionar el offset total para la acción de desplazamiento.

dart
test('scroll, tap on the last item (Zedoary), verify selected', () async {
  // find the list of plants, by Key
  final listFinder = find.byValueKey('listOfPlants');

  // Scroll to the last position of the list
  // a -100,000 pixels is enough to reach the bottom of the list
  await driver.scroll(
    listFinder,
    0,
    -100000,
    const Duration(milliseconds: 500),
  );

  // find the item by text
  final item = find.text('Zedoary');

  // Wait for the list item to appear.
  await driver.waitFor(item);

  // Emulate a tap on the tile item.
  await driver.tap(item);

  // Wait for species name to be displayed
  await driver.waitFor(find.text('Curcuma zedoaria'));

  // 'please select' text should not be displayed
  await driver.waitForAbsent(
    find.text('Please select a plant from the list.'),
  );
});

integration_test

Con integration_test, puedes usar el método tester.scrollUntilVisible.

En lugar de proporcionar el widget sobre el cual desplazarse, proporciona el elemento que estás buscando. En este caso, estás buscando el elemento con el texto "Zedoary", que es el último elemento de la lista.

El método busca cualquier widget Scrollable y realiza la acción de desplazamiento utilizando el offset dado. La acción se repite hasta que el elemento sea visible.

dart
testWidgets('scroll, tap on the last item (Zedoary), verify selected', (
  tester,
) async {
  await tester.pumpWidget(const PlantsApp());

  // wait for data to load
  await tester.pumpAndSettle();

  // find the item by text
  final item = find.text('Zedoary');

  // finds Scrollable widget and scrolls until item is visible
  // a 100,000 pixels is enough to reach the bottom of the list
  await tester.scrollUntilVisible(item, 100000);

  // assert item is found
  expect(item, findsOneWidget);

  // Emulate a tap on the tile item.
  await tester.tap(item);
  await tester.pumpAndSettle();

  // Wait for species name to be displayed
  expect(find.text('Curcuma zedoaria'), findsOneWidget);

  // 'please select' text should not be displayed
  expect(find.text('Please select a plant from the list.'), findsNothing);
});