Testing a widget that contains FlutterMap

[abra]

Hello!
I am writing a widget test for the widget HomeScreen which contains PageView, which in turn contains MapScreen with FlutterMap.

FlutterApp -> HomeScreen -> PageView -> MapScreen

Test:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutterapp/models/app_manager.dart';
import 'package:flutterapp/models/map_manager.dart';
import 'package:flutterapp/models/routes_manager.dart';
import 'package:flutterapp/screens/home_screen.dart';
import 'package:flutterapp/service/mock_geolocation_service.dart';
import 'package:provider/provider.dart';

void main() {
  group('HomeScreen', () {
    late AppManager appManager;
    late MapManager mapManager;
    late RoutesManager routesManager;

    setUp(() {
      appManager = AppManager(PageController(initialPage: 0));
      mapManager = MapManager(MockGeolocationService());
      routesManager = RoutesManager();
    });

    testWidgets('Renders PageView with correct pages',
        (WidgetTester tester) async {
      await tester.pumpWidget(
        MaterialApp(
          home: MultiProvider(
            providers: [
              ChangeNotifierProvider(create: (_) => appManager),
              ChangeNotifierProvider(create: (_) => mapManager),
              ChangeNotifierProvider(create: (_) => routesManager),
            ],
            builder: (context, child) {
              return HomeScreen();
            },
          ),
        ),
      );

      // Verify that the PageView widget is rendered
      expect(find.byType(PageView), findsOneWidget);

      // Verify that the PageView has two pages
      // expect(find.byType(MapScreen), findsOneWidget);
      // expect(find.byType(RoutesScreen), findsNothing);
    });

    testWidgets('Changing page updates current page index',
        (WidgetTester tester) async {
      await tester.pumpWidget(
        MaterialApp(
          home: MultiProvider(
            providers: [
              ChangeNotifierProvider(create: (_) => appManager),
              ChangeNotifierProvider(create: (_) => mapManager),
              ChangeNotifierProvider(create: (_) => routesManager),
            ],
            builder: (context, child) {
              return HomeScreen();
            },
          ),
        ),
      );

      // Verify the initial current page index
      expect(appManager.currentPageIndex, 0);

      // Swipe to the next page
      final button = find.byKey(const ValueKey('mapScreenAppBarButton'));
      await tester.tap(button);
      await tester.pump();

      // Verify that the current page index is updated
      expect(appManager.currentPageIndex, 1);
    });
  });
}

Because FlutterMap performs HTTP requests, the test fails with the following error:

Error:

HTTP request failed, statusCode: 400, https://a.tile.openstreetmap.org/17/65535/65535.png
HTTP request failed, statusCode: 400, https://b.tile.openstreetmap.org/17/65536/65535.png
HTTP request failed, statusCode: 400, https://b.tile.openstreetmap.org/17/65535/65536.png
HTTP request failed, statusCode: 400, https://c.tile.openstreetmap.org/17/65536/65536.png
HTTP request failed, statusCode: 400, https://c.tile.openstreetmap.org/17/65535/65534.png
HTTP request failed, statusCode: 400, https://a.tile.openstreetmap.org/17/65536/65534.png
HTTP request failed, statusCode: 400, https://c.tile.openstreetmap.org/17/65534/65535.png
HTTP request failed, statusCode: 400, https://c.tile.openstreetmap.org/17/65537/65535.png
HTTP request failed, statusCode: 400, https://a.tile.openstreetmap.org/17/65534/65536.png
HTTP request failed, statusCode: 400, https://a.tile.openstreetmap.org/17/65537/65536.png
HTTP request failed, statusCode: 400, https://c.tile.openstreetmap.org/17/65535/65537.png
HTTP request failed, statusCode: 400, https://a.tile.openstreetmap.org/17/65536/65537.png
HTTP request failed, statusCode: 400, https://b.tile.openstreetmap.org/17/65534/65534.png
HTTP request failed, statusCode: 400, https://b.tile.openstreetmap.org/17/65537/65534.png
HTTP request failed, statusCode: 400, https://b.tile.openstreetmap.org/17/65534/65537.png
HTTP request failed, statusCode: 400, https://b.tile.openstreetmap.org/17/65537/65537.png
Pending timers:
Timer (duration: 0:00:00.500000, periodic: false), created:
#0      new FakeTimer._ (package:fake_async/fake_async.dart:308:62)
#1      FakeAsync._createTimer (package:fake_async/fake_async.dart:252:27)
#2      FakeAsync.run.<anonymous closure> (package:fake_async/fake_async.dart:185:19)
#6      _MapScreenState._buildStackBody.<anonymous closure>.<anonymous closure> (package:flutterapp/screens/map_screen.dart:147:17)
#7      FlutterMapState.initState.<anonymous closure> (package:flutter_map/src/map/flutter_map_state.dart:48:27)
#8      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1284:15)
#9      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1223:9)
#10     AutomatedTestWidgetsFlutterBinding.pump.<anonymous closure> (package:flutter_test/src/binding.dart:1236:9)
#13     TestAsyncUtils.guard (package:flutter_test/src/test_async_utils.dart:68:41)
#14     AutomatedTestWidgetsFlutterBinding.pump (package:flutter_test/src/binding.dart:1222:27)
#15     WidgetTester._pumpWidget (package:flutter_test/src/widget_tester.dart:592:20)
#16     WidgetTester.pumpWidget.<anonymous closure> (package:flutter_test/src/widget_tester.dart:577:14)
#19     TestAsyncUtils.guard (package:flutter_test/src/test_async_utils.dart:68:41)
#20     WidgetTester.pumpWidget (package:flutter_test/src/widget_tester.dart:576:27)
#21     main.<anonymous closure>.<anonymous closure> (file://.../flutterapp/test/widget/screens/home_screen_test.dart:33:20)
#22     testWidgets.<anonymous closure>.<anonymous closure> (package:flutter_test/src/widget_tester.dart:170:29)
<asynchronous suspension>
<asynchronous suspension>
(elided 8 frames from dart:async and package:stack_trace)

══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following assertion was thrown running a test:
A Timer is still pending even after the widget tree was disposed.
'package:flutter_test/src/binding.dart':
Failed assertion: line 1498 pos 12: '!timersPending'

When the exception was thrown, this was the stack:
#2      AutomatedTestWidgetsFlutterBinding._verifyInvariants (package:flutter_test/src/binding.dart:1498:12)
#3      TestWidgetsFlutterBinding._runTestBody (package:flutter_test/src/binding.dart:1003:7)
<asynchronous suspension>
(elided 2 frames from class _AssertionError)

The test description was:
  Renders PageView with correct pages
════════════════════════════════════════════════════════════════════════════════════════════════════
Warning: At least one test in this suite creates an HttpClient. When
running a test suite that uses TestWidgetsFlutterBinding, all HTTP
requests will return status code 400, and no network request will
actually be made. Any test expecting a real network connection and
status code will fail.
To test code that needs an HttpClient, provide your own HttpClient
implementation to the code under test, so that your test can
consistently provide a testable response to the code under test.

Test failed. See exception logs above.
The test description was: Renders PageView with correct pages

I understand that you need to intercept the HTTP request FlutterMap widget, but how to do this I do not know.

[JaffaKetchup]

Hi @abra,

I'm not sure of the correct solution, but the logs say to "provide your own HttpClient implementation". This can be done by passing one into the a NetworkTileProvider.

[abra]

I made it too complicated :) I got out of this situation by creating a singleton class EnvironmentConfig that stores the current dev or test mode. And depending on the set mode I substitute FlutterMap with MockFlutterMap.

[nrbnlulu]

This worked for me

extension on WidgetTester {
  Future<void> pumpWithDeps() async {
    final mockTileProvider = MockTileProvider();

  when(mockTileProvider.headers).thenReturn({ });
  when(mockTileProvider.supportsCancelLoading).thenReturn(false);
 
  when(mockTileProvider.getImage(any, any)).thenReturn(IN_MOMORY_IMAGE);

    //when(mockTileProvider.getImage(any, any)).thenReturn();
    final bloc = GISBloc(const MockGraphQLClient(), UnitsGISRepository());
    await pumpWidget(MaterialApp(
      home: Provider<TileProvider?>.value(
        value: mockTileProvider,
        child: GISPage(
          bloc: bloc,
        ),
      ),
    ));
  }
}


@GenerateMocks([TileProvider])
void main() {
  
  group("GIS widget tests", () {

    testWidgets("GIS widget renders", (tester) async {
      await tester.pumpWithDeps();
      expect(find.byType(GISWidget), findsOneWidget);
    });
  });
}