Controlar el desplazamiento

Muchas aplicaciones presentan listas de contenido, desde clientes de correo electrónico hasta aplicaciones de música y más. Para verificar que las listas contengan el contenido esperado utilizando pruebas de widgets, necesitas una forma de desplazarte por las listas para buscar elementos particulares.

Para desplazarte por las listas utilizando las pruebas de widgets, utiliza los métodos proporcionados por la clase WidgetTester clase, que se incluye en el paquete flutter_test:

En esta receta, aprenderás cómo desplazarte por una lista de elementos para verificar que se muestra un widget específico, así como las ventajas y desventajas de los diferentes enfoques.

Esta receta utiliza los siguientes pasos:

1. Crea una aplicación con una lista de elementos.
2. Escribe una prueba que se desplace por la lista.
3. Ejecuta la prueba.

Esta receta construye una aplicación que muestra una larga lista de elementos. Para mantener esta receta enfocada en las pruebas, utiliza la aplicación creada en la Trabajar con listas largas receta. Si no estás seguro de cómo trabajar con listas largas, consulta esa receta para obtener una introducción.

Añade claves (keys) a los widgets con los que quieres interactuar dentro de las pruebas de widgets.

import 'package:flutter/material.dart';
​
void main() {
  runApp(MyApp(items: List<String>.generate(10000, (i) => 'Item $i')));
}
​
class MyApp extends StatelessWidget {
  final List<String> items;
​
  const MyApp({super.key, required this.items});
​
  @override
  Widget build(BuildContext context) {
    const title = 'Long List';
​
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: const Text(title)),
        body: ListView.builder(
          // Add a key to the ListView. This makes it possible to
          // find the list and scroll through it in the tests.
          key: const Key('long_list'),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                items[index],
                // Add a key to the Text widget for each item. This makes
                // it possible to look for a particular item in the list
                // and verify that the text is correct
                key: Key('item_${index}_text'),
              ),
            );
          },
        ),
      ),
    );
  }
}

Ahora, puedes escribir una prueba. En este ejemplo, te desplazarás por la lista de elementos y verificarás que existe un elemento en particular en la lista. La clase WidgetTester proporciona el método scrollUntilVisible(), el cual se desplaza por una lista hasta que un widget específico sea visible. Esto es útil porque la altura de los elementos en la lista puede cambiar según el dispositivo.

En lugar de asumir que conoces la altura de todos los elementos en una lista, o que un widget en particular se renderiza en todos los dispositivos, el método scrollUntilVisible() se desplaza repetidamente a través de una lista de elementos hasta que encuentra lo que está buscando.

El siguiente código muestra cómo usar el método scrollUntilVisible() para buscar un elemento en particular en la lista. Este código reside en un archivo llamado test/widget_test.dart.

​
// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.
​
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
​
import 'package:scrolling/main.dart';
​
void main() {
  testWidgets('finds a deep item in a long list', (tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(
      MyApp(items: List<String>.generate(10000, (i) => 'Item $i')),
    );
​
    final listFinder = find.byType(Scrollable);
    final itemFinder = find.byKey(const ValueKey('item_50_text'));
​
    // Scroll until the item to be found appears.
    await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder);
​
    // Verify that the item contains the correct text.
    expect(itemFinder, findsOneWidget);
  });
}

Ejecuta la prueba usando el siguiente comando desde la raíz del proyecto:

flutter test test/widget_test.dart