El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Las pruebas de widgets en Flutter son esenciales para asegurar que los componentes de la interfaz de usuario (UI) funcionen correctamente. Estas pruebas permiten verificar que los widgets se comporten como se espera en diferentes escenarios y que la UI responda adecuadamente a las interacciones del usuario.

Objetivos de las Pruebas de Widgets

Verificar la apariencia y el comportamiento de los widgets.
Asegurar que los widgets respondan correctamente a las interacciones del usuario.
Detectar errores en la lógica de la UI antes de que lleguen a producción.

Configuración del Entorno de Pruebas

Antes de comenzar a escribir pruebas de widgets, asegúrate de tener el entorno de pruebas configurado correctamente.

Agregar dependencias de prueba en pubspec.yaml:

dev_dependencies:
  flutter_test:
    sdk: flutter

Importar el paquete de pruebas en tu archivo de prueba:

import 'package:flutter_test/flutter_test.dart';

Escribiendo Pruebas de Widgets

Ejemplo Básico de Prueba de Widget

Vamos a crear una prueba básica para un widget que muestra un texto y un botón. Al presionar el botón, el texto cambia.

Definir el widget a probar:

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String _text = 'Hello';

  void _changeText() {
    setState(() {
      _text = 'Hello, Flutter!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(_text),
        ElevatedButton(
          onPressed: _changeText,
          child: Text('Press me'),
        ),
      ],
    );
  }
}

Escribir la prueba del widget:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/my_widget.dart'; // Asegúrate de importar tu widget

void main() {
  testWidgets('MyWidget has a text and a button', (WidgetTester tester) async {
    // Construir el widget dentro del entorno de prueba
    await tester.pumpWidget(MaterialApp(home: MyWidget()));

    // Verificar que el texto inicial es 'Hello'
    expect(find.text('Hello'), findsOneWidget);

    // Verificar que el botón está presente
    expect(find.byType(ElevatedButton), findsOneWidget);

    // Simular un toque en el botón
    await tester.tap(find.byType(ElevatedButton));

    // Volver a construir el widget con el nuevo estado
    await tester.pump();

    // Verificar que el texto ha cambiado a 'Hello, Flutter!'
    expect(find.text('Hello, Flutter!'), findsOneWidget);
  });
}

Explicación del Código

testWidgets: Define una prueba de widget. Toma una descripción de la prueba y una función de prueba que recibe un WidgetTester.
WidgetTester: Proporciona métodos para interactuar con los widgets y verificar su estado.
pumpWidget: Construye el widget dentro del entorno de prueba.
find: Proporciona métodos para localizar widgets en el árbol de widgets.
- find.text: Encuentra widgets de texto.
- find.byType: Encuentra widgets por tipo.
expect: Verifica que una condición sea verdadera.
tap: Simula un toque en un widget.
pump: Vuelve a construir el widget con el nuevo estado.

Ejercicios Prácticos

Ejercicio 1: Prueba de un Widget de Entrada de Texto

Crea un widget que tenga un TextField y un Text que muestre el texto ingresado en el TextField. Escribe una prueba para verificar que el texto se actualiza correctamente cuando el usuario ingresa texto.

Solución:

Definir el widget:

import 'package:flutter/material.dart';

class TextInputWidget extends StatefulWidget {
  @override
  _TextInputWidgetState createState() => _TextInputWidgetState();
}

class _TextInputWidgetState extends State<TextInputWidget> {
  String _inputText = '';

  void _updateText(String text) {
    setState(() {
      _inputText = text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onChanged: _updateText,
        ),
        Text(_inputText),
      ],
    );
  }
}

Escribir la prueba:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/text_input_widget.dart'; // Asegúrate de importar tu widget

void main() {
  testWidgets('TextInputWidget updates text on input', (WidgetTester tester) async {
    // Construir el widget dentro del entorno de prueba
    await tester.pumpWidget(MaterialApp(home: TextInputWidget()));

    // Verificar que el texto inicial está vacío
    expect(find.text(''), findsOneWidget);

    // Ingresar texto en el TextField
    await tester.enterText(find.byType(TextField), 'Hello, Flutter!');

    // Volver a construir el widget con el nuevo estado
    await tester.pump();

    // Verificar que el texto ha cambiado a 'Hello, Flutter!'
    expect(find.text('Hello, Flutter!'), findsOneWidget);
  });
}

Ejercicio 2: Prueba de un Widget de Lista

Crea un widget que muestre una lista de elementos y un botón para agregar un nuevo elemento a la lista. Escribe una prueba para verificar que el nuevo elemento se agrega correctamente cuando se presiona el botón.

Solución:

Definir el widget:

import 'package:flutter/material.dart';

class ListWidget extends StatefulWidget {
  @override
  _ListWidgetState createState() => _ListWidgetState();
}

class _ListWidgetState extends State<ListWidget> {
  List<String> _items = ['Item 1', 'Item 2'];

  void _addItem() {
    setState(() {
      _items.add('Item ${_items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: _items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(_items[index]),
              );
            },
          ),
        ),
        ElevatedButton(
          onPressed: _addItem,
          child: Text('Add Item'),
        ),
      ],
    );
  }
}

Escribir la prueba:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/list_widget.dart'; // Asegúrate de importar tu widget

void main() {
  testWidgets('ListWidget adds a new item on button press', (WidgetTester tester) async {
    // Construir el widget dentro del entorno de prueba
    await tester.pumpWidget(MaterialApp(home: ListWidget()));

    // Verificar que la lista inicial tiene 2 elementos
    expect(find.text('Item 1'), findsOneWidget);
    expect(find.text('Item 2'), findsOneWidget);

    // Simular un toque en el botón
    await tester.tap(find.byType(ElevatedButton));

    // Volver a construir el widget con el nuevo estado
    await tester.pump();

    // Verificar que la lista ahora tiene 3 elementos
    expect(find.text('Item 3'), findsOneWidget);
  });
}

Conclusión

Las pruebas de widgets son una herramienta poderosa para asegurar la calidad de la UI en aplicaciones Flutter. Al escribir pruebas de widgets, puedes detectar y corregir errores en la lógica de la UI antes de que lleguen a producción, mejorando así la estabilidad y la experiencia del usuario de tu aplicación.

En la siguiente sección, exploraremos las pruebas de integración, que nos permitirán verificar el comportamiento de la aplicación en su conjunto, incluyendo la interacción entre múltiples widgets y la comunicación con servicios externos.

Pruebas de Widgets

Objetivos de las Pruebas de Widgets

Configuración del Entorno de Pruebas

Escribiendo Pruebas de Widgets

Ejemplo Básico de Prueba de Widget

Explicación del Código

Ejercicios Prácticos

Ejercicio 1: Prueba de un Widget de Entrada de Texto

Ejercicio 2: Prueba de un Widget de Lista

Conclusión

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio