当选择另一个项目时，颤动小部件测试不会触发Dropdown Button.onChanged [英] Flutter widget test does not trigger DropdownButton.onChanged when selecting another item

问题描述

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

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

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'));

如我在调试器中看到的那样，或在输出中查找print语句时，从不调用onChanged回调。

测试Dropdown Button行为的魔力是什么？

推荐答案

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

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

测试时的一些提示。

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

有关如何使用DropDownButton的更多详细信息，请查看post

      
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'));
      
    });
  });
}

这篇关于当选择另一个项目时，颤动小部件测试不会触发Dropdown Button.onChanged的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！