Slide 1

Slide 1 text

Hands on: Golden Testing in Flutter Montreal

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Mobile Platform Specialized in eCommerce ● Mobile development accelerator ● Modular solution (catalog, search, i18n, message center, ...) ● Multiple backend integration ● Admin Console

Slide 5

Slide 5 text

What is Golden Testing?

Slide 6

Slide 6 text

What is Golden Testing? Widget

Slide 7

Slide 7 text

What is Golden Testing? Widget Image

Slide 8

Slide 8 text

What is Golden Testing? Widget Golden image

Slide 9

Slide 9 text

What is Golden Testing? Widget Golden image Updated widget

Slide 10

Slide 10 text

What is Golden Testing? Widget Golden image Updated widget Image

Slide 11

Slide 11 text

What is Golden Testing? Widget Golden image Updated widget Same image

Slide 12

Slide 12 text

What is Golden Testing? Widget Golden image Updated widget Different image

Slide 13

Slide 13 text

What is Golden Testing? Widget Golden image Updated widget Different image Unexpected

Slide 14

Slide 14 text

What is Golden Testing? Widget Golden image Updated widget Different image Unexpected Expected New golden image

Slide 15

Slide 15 text

Demo

Slide 16

Slide 16 text

Developer eXperience

Slide 17

Slide 17 text

Low verbosity

Slide 18

Slide 18 text

Visual feedback > Text feedback

Slide 19

Slide 19 text

Typical widget test error

Slide 20

Slide 20 text

Visual information > Text information

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Icons reference

Slide 24

Slide 24 text

Resources

Slide 25

Slide 25 text

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/

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Use Cases

Slide 30

Slide 30 text

General purpose ● UI regression testing ● Responsiveness and adjustability ● Test multiple variants at once

Slide 31

Slide 31 text

Edge case: business logic Golden test on the entire form

Slide 32

Slide 32 text

Edge case: business logic Golden test on the validation

Slide 33

Slide 33 text

Edge case: business logic ● No longer a “unit test” ● Still easy to debug ● Quick to implement

Slide 34

Slide 34 text

Edge case: code gen Call the widget constructor from a JSON object

Slide 35

Slide 35 text

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)

Slide 36

Slide 36 text

Limitations

Slide 37

Slide 37 text

Limitations ● Unique font weight for the same font family

Slide 38

Slide 38 text

Limitations ● Text render differently across test execution platforms ● Mitigation: ○ Ahem font ○ Custom threshold

Slide 39

Slide 39 text

Limitations ● PlatformView need to be mocked (and display blank)

Slide 40

Slide 40 text

Thanks for listening ;)