【Flutter】長押しでドラッグ可能になるWidgetのWidgetTest
2022.11.15
はじめに
FlutterのWidgetTesterには longPress のようなメソッドや、 drag などのドラッグ用のメソッドが用意されているのですが、長押しでドラッグ可能になってから動かす longPressDrag のようなものはメソッドは用意されていません。
そこで、DraggableのWidgetTestを参考に長押しをしたあとにドラッグ可能になるWidgetのWidgetTestを書いてみたメモを残そうと思います。
同じようなテストを書こうと思った方の参考になれば幸いです。
開発環境
開発環境は下記のとおりです。
| Flutter | 3.3.2 |
使用パッケージ
0.5.0 | |
2.0.0-dev.9 | |
| mockito | 5.3.1 |
| build_runner | 2.2.1 |
テスト実装
テスト対象Widget
今回「長押しでドラッグ可能になるWidget」として並び替えができるreorderablesパッケージの ReorderableColumn と ReorderableWidget を使ったWidgetのテストを書いてみます。
対象のWidgetのファイルは下記の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:reorderables/reorderables.dart'; final draggableListProvider = Provider<DraggableListController>((ref) { return const DraggableListController(); }); class DraggableListController { const DraggableListController(); void onReorder(int oldIndex, int newIndex) { print('oldIndex: $oldIndex'); print('newIndex: $newIndex'); } } class DraggableList extends ConsumerWidget { const DraggableList({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { return ReorderableColumn( onReorder: (oldIndex, newIndex) { ref.read(draggableListProvider).onReorder(oldIndex, newIndex); }, children: List.generate(10, (index) { return ReorderableWidget( key: Key(index.toString()), reorderable: true, child: Text(index.toString()), ); }), ); } } |
余談ですが、今回は並び替えたときに任意の処理が正しく実行されることを確認したいので、 DraggableListController というクラスを用意し、 Provider の値をテスト時にオーバーライドできるようにしています。
Widget Test
それでは、上記のWidgetのテストを書いていきます。
テストで確認したいことは「並び替えを行った場合 並び替え時の処理が実行されること」なので、「0というテキストが表示されているWidgetを9というテキストが表示されている箇所まで移動したら、任意の処理が実行されること」が確認できればよさそうです。
今回のメインである長押ししてドラッグする動きをテストで表す方法ですが、テスト用のジェスチャーを生成する startGesture というメソッドを使います。
具体的には、
1 2 3 4 5 6 7 8 9 10 | // ジェスチャーの開始地点を決定 final firstLocation = tester.getCenter(find.text('0')); final gesture = await tester.startGesture(firstLocation); // ドラッグ可能になるまで待機 await tester.pump(const Duration(seconds: 1)); // 対象の箇所まで開始地点から移動 await gesture.moveTo(tester.getCenter(find.text('9'))); await tester.pump(); |
という形で書くことで長押しドラッグが実現できます。
以下、テストコード全体です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:long_press_draggable_widget_test_sample/draggable_list.dart'; import 'package:mockito/annotations.dart'; import 'package:mockito/mockito.dart'; import 'widget_test.mocks.dart'; @GenerateMocks([ DraggableListController, ]) void main() { testWidgets('並び替えを行った場合 並び替え時の処理が実行されること', (WidgetTester tester) async { final controller = MockDraggableListController(); await tester.pumpWidget( ProviderScope( overrides: [ draggableListProvider.overrideWithValue(controller), ], child: const MaterialApp( home: Scaffold( body: DraggableList(), ), ), ), ); // ジェスチャーの開始地点を決定 final firstLocation = tester.getCenter(find.text('0')); final gesture = await tester.startGesture(firstLocation); // ドラッグ可能になるまで待機 await tester.pump(const Duration(seconds: 1)); // 対象の箇所まで開始地点から移動 await gesture.moveTo(tester.getCenter(find.text('9'))); await tester.pump(); // ジェスチャーを解除 await gesture.up(); await tester.pump(); // 並び替え処理が呼び出されたことを確認 verify(controller.onReorder(0, 9)).called(1); }); } |
まとめ
今回は長押しでドラッグ可能になるWidgetのWidgetTestを書いてみました。
Flutterリポジトリ内のテストコードを見ていると勉強になることも多いので、これからもちょこちょこ覗いてみようと思います！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
