我们构建的大部分 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 测试的更多内容:
3. 点击按钮,增加待办清单项
在
TextField
中输入文本后,需要确保能够点击
FloatingActionButton
,将文本作为清淡项加入列表中。
这包含了三个步骤:
(1)使用 tap()
方法模拟点击按钮
(2)使用 pump()
方法确保应用状态发生改变时可以重建 Widget
(3)确保列表清单项展现在屏幕上
testWidgets('Add and remove a todo', (WidgetTester tester) async {
// Enter text code...
// Tap the add button.
await tester.tap(find.byType(FloatingActionButton));
// Rebuild the widget after the state has changed.
await tester.pump();
// Expect to find the item on screen.
expect(find.text('hi'), findsOneWidget);
});
4. 滑动删除待办清单项
最后,我们需要确保滑动删除的操作能够正常地从列表中移除清单项。这包含了三个步骤:
(1)使用
drag()
方法模拟滑动删除操作。
(2)使用
pumpAndSettle()
方法使 Widget 树保持重建更新,直到消除的动画完成。
(3)确保上述清单项不会再出现在屏幕上
testWidgets('Add and remove a todo', (WidgetTester tester) async {
// Enter text and add the item...
// Swipe the item to dismiss it.
await tester.drag(find.byType(Dismissible), Offset(500.0, 0.0));
// Build the widget until the dismiss animation ends.
await tester.pumpAndSettle();
// Ensure that the item is no longer on screen.
expect(find.text('hi'), findsNothing);
});
完整样例
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
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');
// Tap the add button.
await tester.tap(find.byType(FloatingActionButton));
// Rebuild the widget with the new item.
await tester.pump();
// Expect to find the item on screen.
expect(find.text('hi'), findsOneWidget);
// Swipe the item to dismiss it.
await tester.drag(find.byType(Dismissible), Offset(500.0, 0.0));
// Build the widget until the dismiss animation ends.
await tester.pumpAndSettle();
// Ensure that the item is no longer on screen.
expect(find.text('hi'), findsNothing);
});
}
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),
),
),
);
}
}