如何对 Flutter TextFormField maxlines 进行单元测试

aut*_*tic 7 testing unit-testing widget flutter

是否可以编写一个单元测试来验证 TextFormField 的 maxLines 属性设置是否正确。我找不到访问该属性的方法:

我创建了一个 TextFormField

final field = TextFormField(
    initialValue: "hello",
    key: Key('textformfield'),
    maxLines: 2,
  );
Run Code Online (Sandbox Code Playgroud)

然后在测试中我可以使用 tester.widget 访问表单字段

 final formfield =
    await tester.widget<TextFormField>(find.byKey(Key('textformfield')));
Run Code Online (Sandbox Code Playgroud)

但是由于 maxLines 属性被传递给返回文本字段的 Builder,我如何才能访问该文本字段。

或者有没有完全其他的方法来验证这一点?

aut*_*tic 7

我不知道这是否是一个好的解决方案,但是当我设置 TextFormField 的值时,我可以直接找到 EditableText 小部件。在这个小部件中,我可以找到测试属性 maxLines。

final EditableText formfield =
   tester.widget<EditableText>(find.text('testvalue'));

expect(formfield.maxLines, 2);
Run Code Online (Sandbox Code Playgroud)


Dan*_*iel 5

您看不到诸如maxLinesmaxLengthTextField类的属性的原因是因为它们属于该类。

看一下TextFormField源文件中构造函数的文档:

  /// Creates a [FormField] that contains a [TextField].
  ///
  /// When a [controller] is specified, [initialValue] must be null (the
  /// default). If [controller] is null, then a [TextEditingController]
  /// will be constructed automatically and its `text` will be initialized
  /// to [initialValue] or the empty string.
  ///
  /// For documentation about the various parameters, see the [TextField] class
  /// and [new TextField], the constructor.
Run Code Online (Sandbox Code Playgroud)

不幸的是,您无法TextField从 中检索对象TextFormField,而必须TextField通过查找器查找对象。

假设您有一个包含 2 个字段的表单 - 名字和姓氏。您需要做的是找到 type 的所有小部件TextField,将它们添加到列表中,然后您可以遍历列表的每个元素并运行您的测试。下面是一个例子:

  testWidgets('Form fields have the correct maximum length and number of lines',
      (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
      home: Scaffold(
        body: Form(
          child: Column(
            children: <Widget>[
              TextFormField(
                key: Key('first_name'),
                decoration: InputDecoration(hintText: 'First name'),
                maxLines: 1,
                maxLength: 50,
                obscureText: true,
              ),
              TextFormField(
                key: Key('last_name'),
                decoration: InputDecoration(hintText: 'Last name'),
                maxLines: 1,
                maxLength: 25,
              ),
            ],
          ),
        ),
      ),
    ));

    List<TextField> formFields = List<TextField>();

    find.byType(TextField).evaluate().toList().forEach((element) {
      formFields.add(element.widget);
    });

    formFields.forEach((element) {
      expect(element.maxLines, 1);

      switch (element.decoration.hintText) {
        case 'First name':
          expect(element.maxLength, 50);
          break;

        case 'Last name':
          expect(element.maxLength, 25);
          break;
      }
    });
  });
Run Code Online (Sandbox Code Playgroud)

如果你只有一个领域,你可以这样做:

TextField textField = find.byType(TextField).evaluate().first.widget as TextField;

expect(textField.maxLines, 1);
expect(textField.maxLength, 50);
Run Code Online (Sandbox Code Playgroud)