Flutter小部件测试无法找到InputDecoration.errorText

时间:2020-10-21 17:39:15

标签: flutter flutter-web flutter-test

注意:这是针对Flutter网络应用的。

我正在测试一个TextField,以显示如果输入无效,则会显示在InputDecoration上指定的错误文本。

当我运行整个应用程序并手动与之交互时,该小部件可以正常工作。

这是我的TextField的定义:

TextField(
  key: ValueKey('IntSpinner-TEXT'),
  controller: _controller,
  keyboardType: _keyboardType(),
  inputFormatters: widget.inputFormatters ?? [formatter],
  decoration: InputDecoration(
    border: const OutlineInputBorder(),
    errorText: _validInput ? null : 'Invalid input',
  ),
);

我在TextField的控制器上有一个侦听器,该侦听器检查新值,并相应地将_validInput设置为true或false。

这是我测试的代码:

    testWidgets('should flag invalid values', (WidgetTester tester) async {
      int x;
      await tester.pumpWidget(MaterialApp(
        home: Card(
          child: Column(
            children: [
              IntSpinner( // this widget contains my TextField
                key: ValueKey('IntSpinner'),
                onChanged: (value) => x = value,
              ),
            ],
          ),
        ),
      ));

      // Enter valid text
      await tester.enterText(find.byKey(ValueKey('IntSpinner-TEXT')), '-2200');
      expect(x, equals(-2200));

      // Enter invalid text
      await tester.enterText(find.byKey(ValueKey('IntSpinner-TEXT')), '2-200');
      expect(x, equals(-2200)); // unchanged!!
      
      TextField txt = tester.widget(find.byKey(ValueKey('IntSpinner-TEXT')));
      expect(txt.decoration.errorText, equals('Invalid input'));
    });

我收到此错误:

══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following TestFailure object was thrown running a test:
  Expected: 'Invalid input'
  Actual: <null>
   Which: not an <Instance of 'String'>

我在调试器中看到了同样的东西-inputDecoration.errorText为null。但是,当我在浏览器中运行该应用程序时,我可以清楚地看到(使用Flutter Widget检查器)errorText已按预期设置(我还看到TextField涂有errorText)。

小部件检查器输出的摘要:

enter image description here

从Flutter小部件测试中检查TextField.decoration.errorText的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

我有一个可行的解决方案。我想要一个有经验的人来验证它。

在编写测试时设置_validInput时,不会触发窗口小部件的重建。相反,它似乎要等到我“完成”编辑。我通过将焦点从TextField移到另一个TextField(使用WidgetTester.showKeyboard(finder))来伪造这一点。

所以现在我的测试步骤如下:

      // print('Enter valid text');
      await tester.enterText(find.byKey(ValueKey('IntSpinner-TEXT')), '-2200');
      expect(x, equals(-2200));
      
      // move the focus somewhere else ... anywhere else
      await tester.showKeyboard(find.byKey(Key('FOO')));
      TextField txt = tester.widget(find.byKey(ValueKey('IntSpinner-TEXT')));
      expect(txt.decoration.errorText, isNull);

      // print('Enter invalid text');
      await tester.enterText(find.byKey(ValueKey('IntSpinner-TEXT')), '2-200');
      expect(x, equals(-2200)); // unchanged!!

      // move the focus somewhere else ... anywhere else
      await tester.showKeyboard(find.byKey(Key('FOO')));
      txt = tester.widget(find.byKey(ValueKey('IntSpinner-TEXT')));
      expect(txt.decoration.errorText, equals('Invalid input'));

这使我的测试生效;问题是,为什么errorText会显示在正在运行的应用程序上而不将焦点移到另一个小部件上?