Reemplazar AnimationSheetBuilder.display con collate

Los métodos AnimationSheetBuilder.display y sheetSize están en desuso y deben reemplazarse por AnimationSheetBuilder.collate.

AnimationSheetBuilder es una clase de utilidad de pruebas que registra los fotogramas de un Widget animado y luego compone los fotogramas en una única hoja de animación para golden testing. La forma antigua de componer implica el uso de display para enumerar las imágenes en un Widget similar a una tabla, ajustando la superficie de prueba con sheetSize y capturando el Widget de tabla para su comparación. Se ha añadido una nueva forma, collate, que coloca directamente los fotogramas en una imagen para su comparación, lo que requiere menos código repetitivo y produce una imagen más pequeña sin comprometer la calidad. Por lo tanto, las APIs para la forma antigua están en desuso.

La razón por la que collate genera una imagen más pequeña es porque la forma antigua realiza la captura en una superficie de prueba con una relación de píxeles de 3.0, lo que significa que utiliza un bloque de 3x3 píxeles del mismo color exacto para representar 1 píxel real, haciendo que la imagen sea 9 veces más grande de lo necesario (antes de la compresión PNG).

Se han realizado los siguientes cambios en la clase AnimationSheetBuilder:

• 'display' está en desuso y no debería utilizarse
• 'sheetSize' está en desuso y no debería utilizarse

Para migrar a la nueva API, cambia el proceso de establecer el tamaño de la superficie y mostrar el Widget por AnimationSheetBuilder.collate.

collate requiere un argumento cellsPerRow explícito, que es el número de fotogramas por fila en la imagen de salida. Se puede contar manualmente o calcular de la siguiente manera:

• Encuentra el ancho del fotograma, especificado al construir AnimationSheetBuilder. Por ejemplo, en el siguiente fragmento es 80:

final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(80, 30));

• Encuentra el ancho del tamaño de la superficie, especificado al establecer el tamaño de la superficie; el valor predeterminado es 800. Por ejemplo, en the siguiente fragmento es 600:

tester.binding.setSurfaceSize(animationSheet.sheetSize(600));

• Los fotogramas por fila deben ser el resultado de dividir los dos números, redondeado hacia abajo. Por ejemplo, 600 / 80 = 7 (redondeado hacia abajo), por lo tanto

animationSheet.collate(7)

Código antes de la migración:

  testWidgets('Indeterminate CircularProgressIndicator', (WidgetTester tester) async {
    final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(40, 40));
​
    await tester.pumpFrames(animationSheet.record(
      const Directionality(
        textDirection: TextDirection.ltr,
        child: Padding(
          padding: EdgeInsets.all(4),
          child: CircularProgressIndicator(),
        ),
      ),
    ), const Duration(seconds: 2));
​
    // The code starting here needs migration.
​
    tester.binding.setSurfaceSize(animationSheet.sheetSize());
​
    final Widget display = await animationSheet.display();
    await tester.pumpWidget(display);
​
    await expectLater(
      find.byWidget(display),
      matchesGoldenFile('material.circular_progress_indicator.indeterminate.png'),
    );
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/42767

Código después de la migración (cellsPerRow es 20, derivado de 800 / 40):

  testWidgets('Indeterminate CircularProgressIndicator', (WidgetTester tester) async {
    final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(40, 40));
​
    await tester.pumpFrames(animationSheet.record(
      const Directionality(
        textDirection: TextDirection.ltr,
        child: Padding(
          padding: EdgeInsets.all(4),
          child: CircularProgressIndicator(),
        ),
      ),
    ), const Duration(seconds: 2));
​
    await expectLater(
      animationSheet.collate(20),
      matchesGoldenFile('material.circular_progress_indicator.indeterminate.png'),
    );
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/42767

Se espera que las imágenes de referencia de prueba golden relacionadas queden invalidadas y deban actualizarse todas. Las nuevas imágenes deben ser idénticas a las antiguas, excepto por una escala de 1/3.

Llegó en la versión: v2.3.0-13.0.pre
En la versión estable: 2.5

Documentación de la API:

• AnimationSheetBuilder
• AnimationSheetBuilder.collate

PR relevante:

• Prueba de WidgetTester manejando punteros de prueba