如何在 Flutter 中测试动画图标

发布于03月08日

我想做一个测试，让我验证我的小工具是否显示我提供的AnimatedIcon，以及知道动画是否工作(以动画方式更改图标)，问题是我找不到方法.

有没有类似于finder.byIcon()的方法，但它接受AnimatedIconData而不是IconData？
如何验证动画正在发生？

1.AnimatedIconData的查找器

要获取AnimatedIconData的查找器，请使用如下所示的find.byWidgetPredicate方法(假设要搜索的AnimatedIconData是AnimatedIcons.menu_arrow):

final animatedIconFinder = find.byWidgetPredicate((widget) =>
        widget is AnimatedIcon && widget.icon == AnimatedIcons.menu_arrow);

2.验证动画正在发生

要验证动画是否正在进行，请判断AnimatedIcon小部件的progress属性值.

假设动画是在点击屏幕上的浮动动作按钮之后发生的，下面的代码示例显示了如何在点击按钮后验证这AnimatedIcon个动画.

// Gets the [AnimatedIcon] widget
final animatedIconWidget = tester.widget(animatedIconFinder) as AnimatedIcon;

final animatedIconProgress = animatedIconWidget.progress.value;

// Verifies that [AnimatedIcon] is not animating
expect(animatedIconProgress, 0);

// Finds [FloatingActionButton]
final floatingActionButtonFinder = 
    find.widgetWithIcon(FloatingActionButton, Icons.change_circle);

// Taps [FloatingActionButton]
await tester.tap(floatingActionButtonFinder);

await tester.pumpAndSettle();

final updatedAnimatedIconProgress = animatedIconWidget.progress.value;

// Verifies that the [AnimatedIcon] has completed its animation
expect(updatedAnimatedIconProgress, 1);

使用自定义查找器

要使您的查找器更简洁、更接近find.byIcon，请执行以下操作:

通过扩展MatchFinder创建自定义查找器，并在matches方法中添加匹配逻辑(这是对find.byIcon implementation的修改).

class _WidgetAnimatedIconFinder extends MatchFinder {
  _WidgetAnimatedIconFinder(this.icon, {super.skipOffstage});

  final AnimatedIconData icon;

  @override
  String get description => 'icon "$icon"';

  @override
  bool matches(Element candidate) {
    final Widget widget = candidate.widget;
    return widget is AnimatedIcon && widget.icon == icon;
  }
}

在CommonFinders类上创建一个扩展，并添加一个使用在步骤1中创建的自定义Finder的byAnimatedIcon方法.CommonFinders类由flutter_test包提供，find常量(与find.byIcon中一样)是CommonFinders的实例.
```
extension CustomFindersExtension on CommonFinders {
  Finder byAnimatedIcon(AnimatedIconData icon) =>
    _WidgetAnimatedIconFinder(icon);
}
```
使用find.byAnimatedIcon通过提供要搜索的AnimatedIconData来查找AnimatedIcon.

将使用find.byWidgetPredicate的Finder替换为以下内容:
```
final animatedIconFinder = find.byAnimatedIcon(AnimatedIcons.menu_arrow);
```