Flutter Matcher | Test your widget before using it !!

Flutter Matcher :

Flutter matcher, apps are built with widgets and yes every screen uses these widgets to make up a final app.So how do you test these widgets whether they work accordingly or not ??

It’s pretty hard every time to focus on each and every widget and test them before making app live isn’t then don’t worry this blog is for you stay tuned till end for interesting updates.

You might have implemented Unit test cases and UI testing and now experience the magic of similar testing strategy which test’s widgets.

Welcome to blog on flutter widget testing i.,e flutter matcher let’s get started.This will be a favourite blog for beginners who are interested in ui testing.

Complete Widget Testing Course.

Flutter matcher video tutorial :

Go through the below tutorial for more details on widget testing.

pubspec.yaml :

This time no new thing to be added to this file so get going with further coding and testing on flutter matcher !!!.

main.dart :

We need to have some widgets to test right so let’s add some in here to get started with flutter matcher.

Start with void main()

void main(){runApp(MyApp());}

And now add a class MyApp extending StatelessWidget

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Widget Testing"),
        ),
        body: Home(),
      ),
    );
  }
}

Let’s add a separate class where we will define our widgets to be tested.

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children:  [
         TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Enter Text"),
          ),

        TextButton(onPressed: (){}, child: Text(""))
      ],
    );
  }
}

widget_test.dart :

Just like main.dart widget_test.dart starts with a void main where in we specify the test cases using flutter matcher.

void main() {
  //Test cases
}

Syntax of a test case :

How we specify a test case is it similar to unittest cases ??

We need to specify the description and callback to test widgets.

testWidgets(description, callback)

Need to pump widget on the screen.

await tester.pumpWidget(MyApp());

Find the widget by type

var textField = find.byType(TextField);

Expect the widget to be identified

expect(textField, findsOneWidget);

Here we have considered a Matcher  there are different types of flutter matcher.

findsOneWidget : Which will find exactly one widget of type specified.

findNothing : It will verify that no widget found.

findNWidgets : It will verify the number of widgets specified.

findWidgets : Verifies one or more than one widgets.

Add a test case

testWidgets("FindOneWidget", (WidgetTester tester) async{
  await tester.pumpWidget(MyApp());

  var textField = find.byType(TextField);
  expect(textField, findsOneWidget);
});

Flutter matcher full code :

import 'package:flutter/material.dart';
import 'package:flutter_basics/main.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {

  testWidgets("FindOneWidget", (WidgetTester tester) async{
    await tester.pumpWidget(MyApp());

    var textField = find.byType(TextField);
    expect(textField, findsOneWidget);
  });

  testWidgets("FindsNWidgets", (WidgetTester tester) async{
    await tester.pumpWidget(MyApp());

    var textField = find.byType(TextField);
    expect(textField, findsNWidgets(2));
  });

  testWidgets("FindsNothing", (WidgetTester tester) async{
    await tester.pumpWidget(MyApp());

    var textField = find.byType(TextButton);
    expect(textField, findsNothing);
  });

  testWidgets("FindsWidgets", (WidgetTester tester) async{
    await tester.pumpWidget(MyApp());

    var textField = find.byType(TextField);
    expect(textField, findsWidgets);
  });
}

If you have any query’s in this tutorial on flutter matcher do let us know in the comment section below.If you find this tutorial interesting do like and share us for more updates.