Flutter 小部件测试在选择另一个项目时不会触发 DropdownButton.onChanged

Question

我正在编写 Flutter Web 应用程序，并将一些小部件测试添加到我的代码库中。 我很难让 flutter_test 按预期工作。 我当前面临的问题是尝试在 DropdownButton 中选择一个值。

以下是重现问题的完整小部件测试代码：

void main() {
  group('description', () {
    testWidgets('description', (WidgetTester tester) async {
      await tester.pumpWidget(MaterialApp(
        home: Card(
          child: Column(
            children: [
              Expanded(
                child: DropdownButton(
                  key: Key('LEVEL'),
                  items: [
                    DropdownMenuItem<String>(
                      key: Key('Greater'),
                      value: 'Greater',
                      child: Text('Greater'),
                    ),
                    DropdownMenuItem<String>(
                      key: Key('Lesser'),
                      value: 'Lesser',
                      child: Text('Lesser'),
                    ),
                  ],
                  onChanged: (value) {
                    print('$value');
                  },
                  value: 'Lesser',
                ),
              )
            ],
          ),
        ),
      ));

      expect((tester.widget(find.byKey(Key('LEVEL'))) as DropdownButton).value,
          equals('Lesser'));

      await tester.tap(find.byKey(Key('LEVEL')));

      await tester.tap(find.byKey(Key('Greater')));
      await tester.pumpAndSettle();

      expect((tester.widget(find.byKey(Key('LEVEL'))) as DropdownButton).value,
          equals('Greater'));
    });
  });
}

这个测试在最终期望上失败了expect(widget.value, equals('Greater'));

永远不会调用 onChanged 回调，正如我在调试器中看到的那样，或者在输出中查找我的打印语句。

测试 DropdownButton 行为的魔力是什么？

Answer 1

在测试时，重要的是在任何用户交互相关代码之后添加tester.pump()调用。

下拉按钮的测试与通常的小部件略有不同。 对于所有情况，最好参考此处，这是对下拉按钮的实际测试。

测试时的一些提示。

1. DropdownButton 由按钮的“IndexedStack”和菜单项列表的普通堆栈组成。
2. 您为DropDownMenuItem分配的键和文本以某种方式提供给上述堆栈中的两个小部件。
3. 点击时选择返回的小部件列表中的最后一个元素。
4. 此外，下拉按钮需要一些时间来设置动画，因此我们tester.pump中引用的测试中的建议调用tester.pump两次。
5. DropdownButton的value属性不会自动更改。 它必须使用setState进行设置。 所以你的最后一行断言是错误的，除非你把你的测试包装在像这里这样的StatefulBuilder 。

有关如何使用DropDownButton更多详细信息，请查看此帖子

      
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  group('description', () {
    testWidgets('description', (WidgetTester tester) async {
      String changedValue = 'Lesser';
      await tester.pumpWidget(MaterialApp(
        home: Scaffold(
          body: Center(
            child: RepaintBoundary(
              child: Card(
                child: Column(
                  children: [
                    Expanded(
                      child: DropdownButton(
                        key: Key('LEVEL'),
                        items: [
                          DropdownMenuItem<String>(
                            key: ValueKey<String>('Greater'),
                            value: 'Greater',
                            child: Text('Greater'),
                          ),
                          DropdownMenuItem<String>(
                            key: Key('Lesser'),
                            value: 'Lesser',
                            child: Text('Lesser'),
                          ),
                        ],
                        onChanged: (value) {
                          print('$value');
                          changedValue = value;
                        },
                        value: 'Lesser',
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ));

      expect((tester.widget(find.byKey(Key('LEVEL'))) as DropdownButton).value,
          equals('Lesser'));
      // Here before the menu is open we have one widget with text 'Lesser'
      await tester.tap(find.text('Lesser'));
      // Calling pump twice once comple the the action and
      // again to finish the animation of closing the menu.
      await tester.pump();
      await tester.pump(Duration(seconds: 1));

      // after opening the menu we have two widgets with text 'Greater'
      // one in index stack of the dropdown button and one in the menu .
      // apparently the last one is from the menu.
      await tester.tap(find.text('Greater').last);
      await tester.pump();
      await tester.pump(Duration(seconds: 1));

      /// We directly verify the value updated in the onchaged function.
      expect(changedValue, 'Greater');

      /// The follwing expectation is wrong because you haven't updated the value
      ///  of dropdown button.
      // expect((tester.widget(find.byKey(Key('LEVEL'))) as DropdownButton).value,
      //     equals('Greater'));
      
    });
  });
}