How to create a simple unit test in flutter for user input validation and maxLength with null safety

user_17112368 0
Viewed 434

I am trying to do simple unit test for the form I have created. I referred some documents and YouTube videos to do that. But there are not many resources for unit testing in form and the available once are not compatible with current version (null safety).

Can any one explain me how I can do a unit test for my validation part and for maxLength in form field.

This is the code I tried but it is showing error and unable to continue.

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
                ),

Error

The test I tried

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

Can anyone please explain how to do unit test for validation and maxLength. I searched every document/ video I can, but unable to find a solution. Please help

flutter-test flutter unit-testing
1 Answers

It shows you this error because the validator property of a TextField is expecting a String? Function(String?) as its parameter and your FullNameValidator.validate is a String? Function(String), here's how you can fix that:

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

You don't need to test maxLength as by precising a maxLength the String inside your TextField won't be able to be longer than the number you've defined.

If you really want to validate the length of your String you could change your method like this:

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

But then you would need to call your validator like this in your 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),
),
user_99423460
Related