1. HOME
  2. ブログ
  3. IT技術
  4. 【Flutter】長押しでドラッグ可能になるWidgetのWidgetTest

【Flutter】長押しでドラッグ可能になるWidgetのWidgetTest

はじめに

FlutterのWidgetTesterには longPress のようなメソッドや、 drag などのドラッグ用のメソッドが用意されているのですが、長押しでドラッグ可能になってから動かす longPressDrag のようなものはメソッドは用意されていません。

そこで、DraggableのWidgetTestを参考に長押しをしたあとにドラッグ可能になるWidgetのWidgetTestを書いてみたメモを残そうと思います。

同じようなテストを書こうと思った方の参考になれば幸いです。

開発環境

開発環境は下記のとおりです。

Flutter3.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のファイルは下記の通りです。

余談ですが、今回は並び替えたときに任意の処理が正しく実行されることを確認したいので、 DraggableListController というクラスを用意し、 Provider の値をテスト時にオーバーライドできるようにしています。

Widget Test

それでは、上記のWidgetのテストを書いていきます。

テストで確認したいことは「並び替えを行った場合 並び替え時の処理が実行されること」なので、「0というテキストが表示されているWidgetを9というテキストが表示されている箇所まで移動したら、任意の処理が実行されること」が確認できればよさそうです。

今回のメインである長押ししてドラッグする動きをテストで表す方法ですが、テスト用のジェスチャーを生成する startGesture というメソッドを使います。

具体的には、

という形で書くことで長押しドラッグが実現できます。

以下、テストコード全体です。

まとめ

今回は長押しでドラッグ可能になるWidgetのWidgetTestを書いてみました。

Flutterリポジトリ内のテストコードを見ていると勉強になることも多いので、これからもちょこちょこ覗いてみようと思います!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア