Betterment / alchemist

A Flutter tool that makes golden testing easy.
MIT License
263 stars 34 forks source link

request: AnimationSheetBuilder implementation #134

Open lesleysin opened 6 days ago

lesleysin commented 6 days ago

Is there an existing feature request for this?

Command

Implementation of AnimationSheetBuilder for testing animated widgets

Description

Flutter doc: https://api.flutter.dev/flutter/flutter_test/AnimationSheetBuilder-class.html

This feature will help you get images that clearly display the process of complex animations.

Reasoning

useful in cases where you need to compare the results of widget animation with golden.

Additional context and comments

No response

btrautmann commented 6 days ago

@lesleysin could you elaborate on your request more? I'm having trouble understanding what the ask here is. If you could share a use case, e.g the code of a Widget you're unable to fully test with Alchemist and how the feature you're requesting would help solve that, it would be very helpful. Thank you.

lesleysin commented 6 days ago

@btrautmann Previously I used golden_toolkit to create golden tests. But due to problems with CI, I started using Alchemist.

I had this example test:

    testWidgets("DuitText props animations", (tester) async {
      final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(
        frameSize: const Size(100, 100),
      );
      addTearDown(animationSheet.dispose);

      final driver = DuitDriver.static(
        _textWithPropAnimation,
        transportOptions: HttpTransportOptions(),
        enableDevMetrics: false,
      );

      final widget = Material(
        child: Directionality(
          textDirection: TextDirection.ltr,
          child: DuitViewHost(driver: driver),
        ),
      );

      await tester.pumpFrames(
        animationSheet.record(widget),
        const Duration(milliseconds: 1000),
      );

      await expectLater(
        animationSheet.collate(10),
        matchesGoldenFile("goldens/d_text_animation.png"),
      );
    });

As a result of running this code, I received the following screenshot, which captures the widget animation process:

I'd like to see an opportunity to do something like this within Alchemist

btrautmann commented 6 days ago

Gotcha -- this reminds me of https://github.com/Betterment/alchemist/pull/50. @Kirpal was that just lost due to time constraints (totally fine if that's the case) or was there some other blocking reason?