用户登录

🎉 8 周年订阅优惠

小部件测试,不但可以测试小部件的显示,还可以测试跟小部件的交互行为,比如可以测试点按或者拖拽小部件以后小部件应该怎么样 ..

先去修改一下要测试的小部件 .. 把这个 Chip 放在一个 Row 小部件里面 .. 然后在这个 Row 里面再添加一个 ActionChip .. 设置一下小部件的 label 属性 .. 一个 Text .. 要显示的文字是 $count ..

在这个类里面可以再去定义一下这个 count .. 它是一个 int 类型的属性 .. 默认可以让它等于 0 .

然后给这个 ActionChip 添加一个 onPressed .. 在这个点按回调里面,用一个 setState .. 让 count 属性的值加上 1 ..

先在模拟器上预览一下这个小部件 .. 这里会显示一个 ActionChip 。默认它上面会显示数字 1 ... 按一下它 .. 显示的这个数字的值会加上 1 ..

再回到之前创建的这个小部件测试 .. 里面添加一个 actionChipLabelText .. find.text .. 0 .. 找到小部件里面包含 0 这个文本的 Text 小部件 .. expect .. 这个 actionChipLabelText ,它的值,匹配 ... findsOneWidget ..

下面我们再测试一下点按了这个 ActionChip 以后的结果 .. 先添加一个 actionChip .. 用一下 find.byType .. 按类型找到小部件 .. 小部件的类型是 ActionChip ..

然后可以按一下找到的这个 ActionChip .. await 用一下 tester 上的 tap 这个方法 .. 要按的是 actionChip ..

小部件的 state 有变化,需要重建一下 .. 所以这里要执行一下 tester.pump() ... 它会重建小部件 ..

重建之后,添加一个 actionChipLabelTextAfterTap ... find.text 1 ... 按了界面上的 ActionChip,它上面显示的文字应该从 0 变成 1 ..

expect .. 期望看到的是 actionChipLabelTextAfterTap ,找到一个这样的小部件 .. findsOneWidget ..

下面可以再做一次断言 .. actionChipLabelText , findsNothing .. 意思就是界面上不应该再有包含文字 0 的 Text 小部件了 ..

打开终端 .. 运行一下测试 ...

会显示通过了全部的测试 ..

测试小部件的点按行为《 Flutter 移动应用:测试 》

统计

11371
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点