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)