Upgrade to Pro — share decks privately, control downloads, hide ads and more …

June Flutter Meetup - Golden Testing by Nicolas

June Flutter Meetup - Golden Testing by Nicolas

GDG Montreal

June 19, 2023
Tweet

More Decks by GDG Montreal

Other Decks in Programming

Transcript

  1. Nicolas Cuillery Software engineer Has worked with: - Flutter -

    React Native - React - Angular.js - Flex - jQuery - JSP
  2. Nicolas Cuillery Software engineer Has worked with: - Flutter -

    React Native - React - Angular.js - Flex - jQuery - JSP
  3. Mobile Platform Specialized in eCommerce • Mobile development accelerator •

    Modular solution (catalog, search, i18n, message center, ...) • Multiple backend integration • Admin Console
  4. Icons reference Custom library of icons made with https://www.fluttericon.com Generates:

    • Dart class with static consts • Font file None of those files are self-descriptive
  5. 3rd-party packages https://pub.dev/packages/golden_toolkit • Made and maintained by eBay •

    Widget wrapper to test different: ◦ parameters ◦ screen sizes ◦ Text scale • Font loading helpers https://tech.ebayinc.com/engineering/ebay-motors-screenshot-testing-with-flutter/
  6. 3rd-party packages https://pub.dev/packages/alchemist • Directly inspired from the previous one

    • Advanced integration with Flutter SDK ◦ Theme injection • Platform aware ◦ CI-only test
  7. Flutter SDK • Golden testing are at the core of

    the SDK testing workflow • ~1300 golden test cases • Guarantee of: ◦ Maturity ◦ Reliability ◦ Maintenance over time • Custom web app for results and difference analysis: https://flutter-gold.skia.org
  8. Image loading • Asset images needs to be pre-cached ◦

    https://github.com/flutter/flutter/issues/38997 • Network images ◦ Mock package: https://pub.dev/packages/network_image_mock ◦ Alternative solution with cached_network_image: https://medium.com/flutter-community/golden-testing-using-cachednetworkimage-1b488 c653af3
  9. Edge case: business logic • No longer a “unit test”

    • Still easy to debug • Quick to implement
  10. Edge case: code gen For each fixture file (xxxx.dart): 1.

    Read the golden xxxx.g.dart 2. Run the code generation on xxxx.dart 3. Compare the output w/ the golden file content 4. Eventually overwrite xxxx.g.dart (i.e. update golden)