Testing Everything with Flutter

Transcript

1. Testing everything with Flutter Miguel Beltran Freelancer - beltran.work -

   @MiBLT

2. Freelance Developer, specialized in Mobile (Android and Flutter) More than

   15 years of professional developer experience Co-Host of Code Cafeteria Podcast Reach me out: beltran.work About Me @MiBLT

3. Testing: Dart, Widgets, Driver Mocks and Fakes in Dart Architecture

   + testing: DI and State Mgmt Limits of Flutter testing In this talk... @MiBLT

4. Sample app: GIF REVIEW Purpose: Let users rate GIFs Screens:

   Main and detail Code: miquelbeltran/flutter_testing_talk The test subject @MiBLT

5. Why do we need to test at all? “The more

   features your app has, the harder it is to test manually. Automated tests help ensure that your app performs correctly before you publish it, while retaining your feature and bug fix velocity.” - Flutter docs. @MiBLT

6. Pure Dart tests that don’t load Widgets Dart Test Tests

   that load Widgets Widget Test Tests that run on a real device Driver @MiBLT

7. Writing a Dart test @MiBLT

8. Simple Dart test double calculateAverage(List<Rating> ratings) { return // calculate

   average } @MiBLT

9. @MiBLT

10. Simple Dart test import 'package:flutter_test/flutter_test.dart'; void main() { test('calculate ratings',

    () { // body of test }); } @MiBLT

11. Simple Dart test void main() { final ratings = [

    Rating('Miguel', 5), Rating('Lara', 4), Rating('Lily', 3), ]; test('calculate ratings', () { final average = calculateAverage(ratings); expect(average, 4); }); } @MiBLT

12. Simple Dart test void main() { final ratings = [

    Rating('Miguel', 5), Rating('Lara', 4), Rating('Lily', 3), ]; test('calculate ratings', () { final average = calculateAverage(ratings); expect(average, 4); }); } @MiBLT

13. Simple Dart test void main() { final ratings = [

    Rating('Miguel', 5), Rating('Lara', 4), Rating('Lily', 3), ]; test('calculate ratings', () { final average = calculateAverage(ratings); expect(average, 4); }); } @MiBLT

14. Assert that “actual” matches “matcher”. expect(actual, matcher) @MiBLT

15. Expect expect(average, 4); // same as expect(average, equals(4)); @MiBLT

16. Expect expect(myArray, isNotEmpty); expect(myWidget, findsOneWidget); expect(myBool, isTrue); @MiBLT

17. Also with right-click -> Run test in…. or $ flutter

    test @MiBLT

18. Writing a Widget test @MiBLT

19. Testing “GifScore” Text Image.network SmoothStarRating @MiBLT

20. Testing “GifScore” Text @MiBLT

21. GifScore Widget class GifScore extends StatelessWidget { Gif gif; GifScore(this.gif);

    @override Widget build(BuildContext context) { return ...; } } @MiBLT

22. Writing testWidgets testWidgets('display GifScore', (WidgetTester tester) async { /// ...

    }); }); @MiBLT

23. Writing testWidgets testWidgets('display GifScore', (WidgetTester tester) async { /// ...

    }); }); @MiBLT

24. pumpWidget final gif = Gif( id: '1', title: 'Kermit Sipping

    Tea', url: 'https://...', rating: 3.5, ); await tester.pumpWidget( GifScore( gif, ), ); @MiBLT

25. pumpWidget final gif = Gif( id: '1', title: 'Kermit Sipping

    Tea' , url: 'https://...', rating: 3.5, ); await tester.pumpWidget( GifScore( gif, ), ); @MiBLT

26. pumpWidget await tester.pumpWidget( Directionality( textDirection: TextDirection.rtl, child: GifScore( gif, ),

    ), ); @MiBLT

27. Writing testWidgets expect( find.text('Kermit Sipping Tea'), findsOneWidget ); @MiBLT

28. Writing testWidgets find.byKey(key) find.bySemanticsLabel(label) find.descendant( of: find.byKey(key), matching: find.text(text), )

    @MiBLT

29. Writing testWidgets testWidgets('display GifScore', (WidgetTester tester) async { mockNetworkImagesFor(() async

    { final gif = Gif( id: '1', title: 'Kermit Sipping Tea', url:'...', rating: 3.5, ); await tester.pumpWidget( Directionality( textDirection: TextDirection.rtl, child: GifScore( gif, ), ), ); expect(find.text('Kermit Sipping Tea'), findsOneWidget); }); }); @MiBLT

30. Writing a Driver test @MiBLT

31. Driver Tests Run on a real device (also simulators) Test

    full running app: Compile + Run + Test Let’s check the title is displayed Flutter 1.22: Android and iOS -> slower Beta/Master: Web, Desktop, etc -> faster tests! @MiBLT

32. @MiBLT

33. Driver Tests: app.dart import 'package:../main.dart' as app; void main() {

    enableFlutterDriverExtension(); app.main(); } @MiBLT

34. Driver Tests: app_test.dart FlutterDriver driver; setUpAll(() async { driver =

    await FlutterDriver.connect(); }); tearDownAll(() async { if (driver != null) { driver.close(); } }); test('title is displayed', () async { expect(await driver.getText(titleFinder), "Kermit Sipping Tea"); }); @MiBLT

35. Driver Tests: app_test.dart final gifFinder = find.byValueKey('gif-score'); final titleFinder =

    find.descendant( of: gifFinder, matching: find.byValueKey('gif-title'), ); @MiBLT

36. Driver Tests: Running @MiBLT

37. Driver Tests: failed? @MiBLT

38. Driver Tests: Failed? @MiBLT

39. Driver Tests: Success @MiBLT

40. Complex to Setup Require a device Hard to debug Real

    user experience Driver Tests @MiBLT

41. SLOW UNRELIABLE MOST COMPLEX REAL USER Driver FAST RELIABLE EASY

    NOT REAL USER Dart FAST RELIABLE SOMEHOW COMPLEX SOMEHOW REAL USER Widget Testing Options Summary SPEED: STABLE: CODE: USER: @MiBLT

42. Dependency Injection, Fakes, Mocks, and making your app “testable” @MiBLT

43. Tests so far final average = calculateAverage(ratings); await tester.pumpWidget(GifScore(gif)); No

    internal dependencies! @MiBLT

44. HomePage Widget class HomePage extends StatelessWidget { @override Widget build(BuildContext

    context) { final api = ApiService(); return Scaffold( appBar: AppBar( title: Text('GifReview'), ), body: FutureBuilder<List<Gif>>( future: api.getGifs(), builder: (context, snap) { ... }, ), ); } } @MiBLT

45. Pass our ApiService Fake the ApiService Challenges @MiBLT

46. Pass our ApiService: Dep. Inj. Fake the ApiService: Fake or

    Mock Challenges @MiBLT

47. Dependencies in tests Code that depends on other components is

    hard to test. Provide those components externally → Dependency Injection. DI in Flutter: - via constructor - Provider (through Widget tree) - Get_it (as Service Locator) @MiBLT

48. DI via constructor class UseCase { final ApiService service; UseCase(this.service);

    Gif run() { ... } } @MiBLT

49. DI via constructor void main() { final service = FakeApiService();

    final usecase = UseCase(service); test('test my UseCase', () { final result = usecase.run(); expect(result, expected); }); } @MiBLT

50. DI via Provider class MyApp extends StatelessWidget { @override Widget

    build(BuildContext context) { return Provider<ApiService>( create: (context) => RealApiService(), child: MaterialApp(...), ); } } // later in code: service = Provider.of<ApiService>(context) @MiBLT

51. DI via Provider await tester.pumpWidget ( Provider<ApiService>( create: (context) =>

    FakeApiService() , child: MyWidget(...), ), ); @MiBLT

52. Which State Management do you recommend? “Whatever allows you to

    test your code!” - Me @MiBLT

53. Fakes and Mocks Custom implementation of a class that fakes

    its functionality Fake Object that allows to configure answers, capture parameters and verify those calls Mock @MiBLT

54. FakeApiService class _FakeApiService extends ApiService { final gif = Gif(

    id: '1', title: 'Kermit Sipping Tea' , Url: '...', rating: 3.5, ); @override Future<List<Gif>> getGifs() { return SynchronousFuture ([gif]); } } @MiBLT

55. FakeApiService testWidgets('load homescreen with fakes', (WidgetTester tester) async { mockNetworkImagesFor(()

    async { final fakeApiService = _FakeApiService(); await tester.pumpWidget( Provider<ApiService>( create: (context) => fakeApiService, child: MaterialApp(home: HomePage()), ), ); expect(find.text('Kermit Sipping Tea'), findsOneWidget); }); }); @MiBLT

56. MockApiService https://pub.dev/packages/mockito 1 → class MockApiService extends Mock implements ApiService

    {} 2 → final mockApiService = MockApiService(); 3 → when(mockApiService.getGifs()) .thenAnswer((realInvocation) => SynchronousFuture([gif])); @MiBLT

57. MockApiService testWidgets('load homescreen with mocks', (tester) async { mockNetworkImagesFor(() async

    { //... await tester.pumpWidget ( Provider<ApiService>( create: (context) => mockApiService , child: MaterialApp (home: HomePage()), ), ); expect(find.text('Kermit Sipping Tea' ), findsOneWidget ); verify(mockApiService .getGifs()); }); }); @MiBLT

58. Fakes and Mocks NO PACKAGE EASIER TO WRITE NEEDS EXTRA

    WORK TO CAPTURE AND VERIFY CALLS Fake NEEDS PACKAGE HARDER TO WRITE CAN CAPTURE AND VERIFY CALLS BY DEFAULT Mock @MiBLT

59. Coverage and having “enough” tests @MiBLT

60. Test Pyramid Unit Tests Integration Tests E2E https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html @MiBLT

61. Test Pyramid https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html Unit test “take a small piece of

    the product and test that piece in isolation.” Unit Tests Integration Tests E2E @MiBLT

62. Test Pyramid https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html Integration Tests “takes a small group of

    units, and tests their behavior as a whole, verifying that they coherently work together.” Unit Tests Integration Tests E2E @MiBLT

63. Test Pyramid https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html End to End “Build and run a

    real app, run automated tests on it” Unit Tests Integration Tests E2E @MiBLT

64. Test Pyramid Unit Tests Integration Tests E2E https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html 10% E2E

    20% Integration Tests 70% Unit Tests @MiBLT

65. Test Pyramid and Flutter Unit Tests Integration Tests E2E Flutter

    Driver Widget Tests Dart Tests @MiBLT

66. Test Pyramid and Flutter Unit Tests Integration Tests E2E Flutter

    Driver Widget Tests Dart Tests @MiBLT

67. Test Pyramid and Flutter Unit Tests Integration Tests E2E Flutter

    Driver Complex Dart & Widget Tests Simple Dart & Widget Tests @MiBLT

68. https://flutter.dev/docs/testing @MiBLT

69. “See Widget tests as Unit Tests” @MiBLT @MiBLT

70. % of app code executed when tests run. Supported by

    Dart and Widget tests. Run with flutter test --coverage Running tests with coverage @MiBLT @MiBLT

71. Coverage reports @MiBLT

72. Coverage reports $ lcov --summary lcov.info Reading tracefile lcov.info Summary

    coverage rate: lines......: 25.4% (18 of 71 lines) functions..: no data found branches...: no data found $ lcov -l lcov.info Also compatible with codecov.io! @MiBLT

73. Coverage reports @MiBLT

74. Recommended test coverage in Flutter by me 70% @MiBLT

75. Edge cases you should know @MiBLT

76. mockNetworkImagesFor testWidgets('..', (tester) async { mockNetworkImagesFor (() async { });

    }); @MiBLT

77. mockNetworkImagesFor Text Image.network SmoothStarRating @MiBLT

78. mockNetworkImagesFor Flutter testing framework creates a fake HTTP Client Always

    returns HTTP Error 400 Why? Networking in tests is bad How can we have images? Override the default mock HTTP Client Provide empty images on network calls Package: network_image_mock @MiBLT

79. tester.pump(duration) Testing and animations WidgetTester is not rebuilding and advancing

    the clock How to wait them to complete? Call tester.pump(duration) Call tester.pumpAndSettle @MiBLT

80. Network calls in Dart test (and skipping tests) test('network call',

    () async { String url = 'http://example.com/api/items/1' ; Http.Response response = await Http.get(url); expect(response.statusCode, 200); }, skip: true); @MiBLT

81. SynchronousFuture Fake Future that responds immediately Part of the Flutter

    framework Use it in Widget tests with mocked network calls when(mockApiService .getGifs()) .thenAnswer((realInvocation ) => SynchronousFuture ([gif])); @MiBLT

82. More testing approaches integration_test package Allows you to run Widget

    tests on devices/emulators Same API as WidgetTester Used in some Flutter plugins Can run on Firebase Test Lab espresso package Test Flutter code from Espresso Android tests @MiBLT

83. RECAP 3 ways of testing Dart tests: Fast and reliable,

    no Widget testing Widget tests: Also fast and can test Widgets Flutter Driver: Run on a real device Architecture is important! → Dependency Injection Mocks and Fakes, use them! @MiBLT

84. Miguel Beltran Freelancer Twitter: @MiBLT Reach me out: beltran.work Repo:

    miquelbeltran/flutter_testing_talk THANK YOU!