Golden Testing with Widgetbook

[vHanda]

One of the main reasons, I'm not going to move to WidgetBook3's annotations, is cause every screen / component of mine has a respective golden test.

Having such a large amount of golden tests is wonderful as I can quickly see what screens have changed with any change. I do a simple make goldens, which runs this -

goldens:
        rm -f test/goldens/*
        flutter test --update-goldens --tags=golden
        git status test/goldens

Additionally, I have my terminal supports sexel (showing images), and therefore I just run a 'git diff' and get to see the before and after. Please see the screenshot below -

Right now, I do this by having a simple class -

class TestScreen {
  final String name;
  final Widget Function(BuildContext) builder;

  @Deprecated('Should not be committed')
  final bool solo;
  final bool skipGolden;
  final bool skipWidgetBook;
  final Future<void> Function(WidgetTester tester) onCreate;

  MedlScreen({
    required this.name,
    required this.builder,
    this.solo = false,
    this.skipGolden = false,
    this.skipWidgetBook = false,
    this.onCreate = _defaultOnCreate,
  });
}

class TestScreenGroup {
  final String name;
  final List<MedlScreen> screens;

  MedlScreenGroup({required this.name, required this.screens});

  // ignore: deprecated_member_use_from_same_package
  bool get hasSolo => screens.firstWhereOrNull((s) => s.solo) != null;
}

And both my golden tests and widgetbook tests are generated from this one large file that all the test information.

I think it would be much better, if golden tests could be generated from the annotations directly. This way, I wouldn't have 1 file called golden_tests.dart, and would instead have lots of individual files. This would result in a big performance boost as the tests could be parallelized (some quick experiments reduced the runtime by about 40% by splitting them into multiple files).

I now use such a setup in 3 of my projects, and plan to for all future Flutter projects as well.

[YoussefRaafatNasry]

Hello @vHanda! 👋

Apology for how late it took us to start working on this, we were busy stabilizing Widgetbook 3 before we start adding any new features.

We liked your proposal a lot, and many other community members requested this feature as well. So we've decided that Golden Testing Support will be our next big feature in Widgetbook.

We would be happy to hear more from you about your expectations, so we would like to invite you to our Discord channel to help us shape this feature and give us some feedback on our approach.

[mjablecnik]

@YoussefRaafatNasry What is state of this issue? When are you going to support this functionality in Widgetbook?

[LucasJosefiak]

@mjablecnik thanks for asking! This functionality is already supported today if you're using Widgetbook Cloud. Just push your builds via CI to Widgetbook Cloud, and we automatically generate your Golden Tests and provide you with a structured review process. Here, you can find a link to an interactive demo (our review feature including golden testing is featured at the end of the demo).

Golden Test support will be added to our open-source package in Widgetbook 4. However, it's currently hard to estimate a timeline for this. We'll keep everyone informed via this thread!

Please let me know if you have any questions. Happy to help!

[mjablecnik]

@LucasJosefiak I tried to login there into your Widgetbook Cloud but instead of login credentials I received email about waiting list:

So my first question is: When will be possible to go into your Widget Cloud?
And second question: What will be the price? Are you going to have some free plans for open source projects or everything will be paid?

Right now I am considering of using widgetbook or flutter_storybook for development of my widgets in the future and availability creation of golden tests is one from my requirements..

[LucasJosefiak]

Thanks for asking!

1. You can already get access to our closed beta today! You should have received another email with an invite to an onboarding call. If not, please use this link. We'll do our open launch in the next weeks.
2. We'll publicly share the pricing with the open launch. I'm however happy to already share it with you during our call. We have a free plan and Widgetbook Cloud is of course free for other open-source projects.