我們建構的大部分 Widget 不僅僅需要展示資訊，還需要響應使用者互動。常見的互動有使用者點選按鈕、在螢幕上拖動元件和在
TextField
中輸入文本。
為了測試這些互動，我們需要在測試環境中模拟上述場景，可以借助
flutter_test
庫中的
WidgetTester
類來實作。
WidgetTester
提供了文本輸入、點選、拖動的相關方法：
-
enterText
-
tap
-
drag
在很多情況下，使用者互動會更新應用狀态。在測試環境中，Flutter 在狀态發生改變的時候并不會自動重建 Widget。為了保證模拟使用者互動實作後，Widget 樹能重建，一定要調用
WidgetTester
提供的
pump()
或者
pumpAndSettle()
。
步驟
1. 建立待測 Widget 2. 在文本區輸入文本 3. 點選按鈕，增加待辦清單項 4. 滑動删除待辦清單項
1. 建立待測 Widget
在這個示例中，我們将會建立一個簡單的待辦清單應用。其中有三個主要的功能點需要測試：
(1)往
TextField
中輸入文本
(2)點選
FloatingActionButton
，把文本加入到待辦清單清單
(3)滑動移除清單中的待辦清單項
為了聚焦在測試上，本章節并不會提供如何建構一個待辦清單應用的具體教程。如果想要知道這個應用是如何建構的，請參考以下章節：
- 文本框的建立和設定
- 捕獲和處理點選動作
- 基礎清單
- 實作「滑動清除」效果
class TodoList extends StatefulWidget {
@override
_TodoListState createState() => _TodoListState();
}
class _TodoListState extends State<TodoList> {
static const _appTitle = 'Todo List';
final todos = <String>[];
final controller = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(_appTitle),
),
body: Column(
children: [
TextField(
controller: controller,
),
Expanded(
child: ListView.builder(
itemCount: todos.length,
itemBuilder: (BuildContext context, int index) {
final todo = todos[index];
return Dismissible(
key: Key('$todo$index'),
onDismissed: (direction) => todos.removeAt(index),
child: ListTile(title: Text(todo)),
background: Container(color: Colors.red),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
todos.add(controller.text);
controller.clear();
});
},
child: Icon(Icons.add),
),
),
);
}
}
2. 在文本區輸入文本
我們有了一個待辦清單項應用以後，就可以開始編寫測試用例了。在本示例中，我們會先測試在文本區輸入文本。 完成這項任務，需要做到： (1)在測試環境建立 Widget (2)使用
WidgetTester
中的
enter
Text()
方法
testWidgets('Add and remove a todo', (WidgetTester tester) async {
// Build the widget
await tester.pumpWidget(TodoList());
// Enter 'hi' into the TextField.
await tester.enterText(find.byType(TextField), 'hi');
});
備忘 這個章節的内容建立在前面的 widget 測試的相關章節上，請參考如下章節，擷取關于 Widget 測試的更多内容：
- widget 測試介紹
- 定位到目标 widgets
3. 點選按鈕，增加待辦清單項
在
TextField
中輸入文本後，需要確定能夠點選
FloatingActionButton
，将文本作為清淡項加入清單中。 這包含了三個步驟：
(1)使用
tap()
方法模拟點選按鈕
(2)使用
pump()
方法確定應用狀态發生改變時可以重建 Widget
(3)確定清單清單項展現在螢幕上
4. 滑動删除待辦清單項 最後，我們需要確定滑動删除的操作能夠正常地從清單中移除清單項。這包含了三個步驟： (1)使用
drag()
方法模拟滑動删除操作。 (2)使用
pumpAndSettle()
方法使 Widget 樹保持重建更新，直到消除的動畫完成。 (3)確定上述清單項不會再出現在螢幕上 完整樣例
