Search code examples
androidiosflutterflutter-test

Comparaing Two PinCode textfield in flutter test


Currently I am working not the project in which I am using this Plugin : https://pub.dev/packages/pin_code_fields

So the thing is I am confused at what level should we test the widgets(widget testing).

  1. Checking if widget is there in the tree using the Key to Type later expecting it based on the Type.
  2. I have checked for the pin entering on by one in the test using the pump and enter text and then compare.
  3. I am bit confuse that how to check two PinCodeTextFields and check if they have similar Code.

Can any one tell what to consider in flutter testing(At what limit to stop). I am adding some sample Code where I have covered first two points.

void main() {
  Widget _wrapWithMaterialApp(Widget widget) => MaterialApp(home: Scaffold(
    body: widget,
  ));
  testWidgets('PinCode text field testing',  (WidgetTester tester) async {
    
    await tester.pumpWidget(_wrapWithMaterialApp(AppPinWidget(
        controller: TextEditingController())));

    var widget = find.byType(AppPinWidget);
    expect(widget, findsOneWidget);


    final textField = find.descendant(
      of: find.byType(PinCodeTextField),
      matching: find.byType(AnimatedContainer),
    );
    await tester.tap(textField.first);
    await tester.pump();
    await tester.enterText(find.byType(TextFormField).first, '3');
    await tester.pump();
    expect(find.text('3'), findsWidgets);
    await tester.pump(const Duration(milliseconds: 300));

    await tester.enterText(find.byType(TextFormField).first, '4');
    await tester.pump();
    expect(find.text('4'), findsWidgets);
    await tester.pump(const Duration(milliseconds: 300));
    await tester.enterText(find.byType(TextFormField).first, '5');
    await tester.pump();
    expect(find.text('5'), findsWidgets);
    await tester.pump(const Duration(milliseconds: 300));
    await tester.enterText(find.byType(TextFormField).first, '6');
    await tester.pump();
    expect(find.text('6'), findsWidgets);
    await tester.pump(const Duration(milliseconds: 300));
    expect(find.byType(PinCodeTextField), findsOneWidget);

  });
}

Solution

  • I don't really understand what is the issue but I will leave here a piece of code I use to compare the equality of text content. And there are several approaches

    expect(someTextWidget.data, equals(someOtherTextWidget.data));
    
    expect(find.byWidgetPredicate((widget) =>
                  widget is PinCodeTextField &&
                  widget.data == 'expectedValue')),
              findsNWidgets(2)); // here 2 is how many widgets you should have with the same text
    
    expect(someTextWidget.data,
              equals(someOtherTextWidget.data));
    
    expect(pinTextFirstFieldKey.text, equals(pinTextSecondFieldKey.text)
    //it is if you try to compare FormTextFields with assigned global keys of type GlobalKey<FormFieldState<String>>()
    

    If something is not clear please specify it in the comments - I will add edits.