Zenn
🖥️

Flutter packages Locationのテスト

2021/01/05に公開
Flutter
Test
Google Map
flutterlocationplu
tech

はじめに

Flutterでアプリ開発を行なっているのでGoogle Mapの実装は度々やっていて、UI部分の実装についてはドイキュメントが探せば結構、出てきますがテストについてはさっぱり出てきません。今回もGoogle Mapを実装しLocationを使用したのですが、色々調べてなんとかテストができたのでまとめてみました。

zenn初投稿!!

やりたい事

  1. Google Mapは google_maps_flutter で実装
  2. 現在地は location のプラグインを使用して取得
  3. 1で作った画面のテストを作成

テスト作成

  1. 現在地を取得しているlocationプラグインですが、当然テストでは動作しません。
    なので、locationのモックを作る。モックはプラットフォームインターフェイスを使って作ります。 plugin_platform_interface 
  final location = Location();
  final platform = MockLocationPlatform();
  LocationPlatform.instance = platform;
  1. locationプラグインの getLocation() をoverrideしてテスト用のLatLngをセットしてデータを作る。ちなみにサンプルのLatLngは「大阪城」です。
 class MockLocationPlatform extends Mock with MockPlatformInterfaceMixin implements LocationPlatform {
  @override
  Future<LocationData> getLocation() async {
    return LocationData.fromMap(<String, double>{
      'latitude': 34.6874598748376,
      'longitude': 135.52605115003277,
    });
  }
  1. Widget Testの場合はテスト用の画面を作る。
    （テスト用の画面を作る部分は省略させて頂きます）
    必ず先にgetLocation()してから画面を実行してください。
testWidgets('Google Map Test', (tester) async {
      await tester.runAsync(() async {
          await location.getLocation(); // こっちが先
          await _pump(tester); // 画面があと

          expect(find.byType(GoogleMap), findsOneWidget);
        });
    });

全コード

sample.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:location_platform_interface/location_platform_interface.dart';
import 'package:mockito/mockito.dart';
import 'package:plugin_platform_interface/plugin_platform_interface.dart';
  
void main() {
  TestWidgetsFlutterBinding.ensureInitialized();
  
  final location = Location();
  final platform = MockLocationPlatform();
  LocationPlatform.instance = platform;

  tearDown(resetMockitoState);

  group('getLocation', () {
    test('get location', () async {
      final receivedLocation = await location.getLocation();
      expect(receivedLocation.latitude, 34.6874598748376);
      expect(receivedLocation.longitude, 135.52605115003277);
    });
  });

    group('Sample Screen', () {
    testWidgets('Google Map Test', (tester) async {
      await tester.runAsync(() async {
          await location.getLocation();
          await _pump(tester);

          expect(find.byType(GoogleMap), findsOneWidget);
        });
    });
  });
}
}

Future<void> _pump(WidgetTester tester) async {
  // テスト用の画面を作成
}

 class MockLocationPlatform extends Mock with MockPlatformInterfaceMixin implements LocationPlatform {
  @override
  Future<LocationData> getLocation() async {
    return LocationData.fromMap(<String, double>{
      'latitude': 34.6874598748376,
      'longitude': 135.52605115003277,
    });
  }
}

まとめ

今回、テストを作る時に色々調べていると Stack Overflow(海外版)でlocationのモックを作ったぜ！と書いている人がいたのでその人の作ったモックを参考にアレンジしてみました。そのページが分からなくなってしまったのでリンクが貼れなくてすみません。

毎回、テストで色々つまづいているんですが、コツコツ調べてなんとか書いていて最近、少しは色々なテストを書ける様になってきました。（すぐに忘れちゃうのですが）
これからFlutterされる方もいいと思うのでちょっとでもお役に立てれば幸いです！

もし、「間違ってるぜ！」とかあれば教えてください！

Discussion