如何在 Flutter 中为用户输入验证和 maxLength 创建一个简单的单元测试，并且具有空安全性

Posted 2023-02-23

【中文标题】如何在 Flutter 中为用户输入验证和 maxLength 创建一个简单的单元测试，并且具有空安全性

【英文标题】：How to create a simple unit test in flutter for user input validation and maxLength with null safety

【发布时间】：2021-12-03 21:22:23

【问题描述】：

我正在尝试对我创建的表单进行简单的单元测试。我参考了一些文件和 YouTube 视频来做到这一点。但是形式上单元测试的资源不多，可用的一次与当前版本不兼容（空安全）。

谁能解释我如何对我的验证部分和表单字段中的 maxLength 进行单元测试。

这是我尝试过的代码，但显示错误且无法继续。

class FullNameValidator
  static String? validate(String value)
    return value.isEmpty ? 'Please enter full name' : null;
  

---

              TextFormField(
                  decoration: InputDecoration(
                    labelText: "FullName",
                    labelStyle: TextStyle(color: Colors.black),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  maxLength: 30,
                  keyboardType: TextInputType.text,
                  controller: fullName,
                  validator: FullNameValidator.validate, //Showing error in here
                ),

我尝试过的测试

void main()
  test('empty email returns error string', ()
    var result = FullNameValidator.validate("");
    expect(result, 'Please enter your full name');
  );

谁能解释一下如何对验证和 maxLength 进行单元测试。 我搜索了所有可以搜索的文档/视频，但找不到解决方案。请帮忙

【参考方案1】：

它会向您显示此错误，因为 TextField 的 validator 属性期望 String? Function(String?) 作为其参数，而您的 FullNameValidator.validate 是 String? Function(String)，您可以通过以下方式解决此问题：

class FullNameValidator
  // Make your value nullable
  static String? validate(String? value) 

    // Now that value can be null you cannot be sure that isEmpty can be called
    // so you need to provide a default value, in this case I am returning
    // true if isEmpty cannot be called so it will return 'Please enter full name'.
    return (value?.isEmpty ?? true) ? 'Please enter full name' : null;
  

您不需要测试maxLength，因为通过精确maxLength TextField 中的字符串将不能比您定义的数字长。

如果你真的想验证字符串的长度，你可以像这样改变你的方法：

class FullNameValidator
  static String? validate(String? value, [int? maxLength]) 
    if (value != null && maxLength != null) 
      return value.length > maxLength ? 'This is too long' : null;
    
    return (value?.isEmpty ?? true) ? 'Please enter full name' : null;
  

但是你需要像这样在TextField 中调用你的验证器：

TextFormField(
  decoration: InputDecoration(
    labelText: "FullName",
    labelStyle: TextStyle(color: Colors.black),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  // maxLength: 30, // You don't need this property anymore if you rely on your validator
  keyboardType: TextInputType.text,
  controller: fullName,
  validator: (value) => FullNameValidator.validate(value, 30),
),