Flutterexperts

As your application gets greater and greater, a decent arrangement of tests may help you save time, as tests can discover new bugs that could show up with ordinary alterations. Flutter automated testing empowers you to accomplish higher responsiveness in your application since it helps discover bugs and different issues in your application. It is likewise significant in different viewpoints like believability as a developer.

In this article, we explore Widget Testing With Flutter. We will implement a demo of widget testing for our Flutter application, and why do we need test cases for our application?.

Table Of Contents::

Flutter Testing

Why Test cases?

Widget Test

Implementation

Code Implement

Code File

Conclusion

---

---

Flutter Testing:

The more highlights your application has, the harder it is to test manually. Automated tests help guarantee that your application performs accurately before you publish it while holding your feature and bug-fix velocity.

Flutter has immediately picked up prominence among developers for building excellent Android and iOS applications. Like applications built with some other development toolkit, Flutter applications’ automated testing is the best way to guarantee application quality in the briefest time conceivable.

Flutter testing falls into three categories:

• Unit Test
• Widget Test
• Integration Test

Note: In this article, we will discuss only the widget test.

Why Test cases?:

We compose test cases for our application since we need our application bug-free and fulfill the application necessities before publishing our work to the client. The client doesn’t need a terrible item. So to stay away from it, we test our application by composing the test cases.

A definition from Software Testing Fundamentals test cases is a bunch of conditions under which an analyzer will decide if an application fulfills necessities or works accurately. The way toward developing test cases can likewise help discover issues in an application’s necessities or design.

Widget Test:

Widget testing is otherwise called component testing. As its name proposes, it is utilized for testing a single widget, and the objective of this test is to check whether the widget works and looks true to form.

Likewise, you can utilize the WidgetTester utility for various things while testing, for example, sending input to a widget, finding a part in the widget tree, confirming values, etc.

For more info on Widget Test,Watch this video:

Widget testing proves to be useful when we are trying the particular widgets. On the off chance that the Text widget doesn’t contain the text, at that point, Widget testing throws an error expressing that the Text widget doesn’t have a text inside it. We likewise don’t host to install any third-party dependencies for widget testing in Flutter.

Implementation:

Steps to Implement Widget Testing

Step 1: Add the dependencies

Add the flutter_test dependency to pubspec — yaml file.

dev_dependencies:
  flutter_test:
    sdk: flutter

Step 2: Create a widget to test.

Step 3: Create a testWidgets test.

Step 4: Build the widget using the WidgetTester.

Step 5: Search for the widget using a Finder.

Step 6: Verify the widget using a Matcher.

How to implement code in dart file :

You need to implement it in your code respectively:

Lets’s create a new dart file called home_page.dart inside the lib folder.

TextField(
  controller: _controller,
  decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: "Enter text"),
),

We will make a TextField() on this home page, and now we will test for this text field. We will write test cases to pass the functionality of our Flutter application.

Create a widget_testing.dart file under the test directory and insert the code below.

First, we will import the package:

import 'package:flutter_test/flutter_test.dart';

Let us dive into the syntax for the widget testing in Flutter:

testWidgets(description, callback)

We, as a whole, know the importance of description in test cases. It is utilized to describe test cases’ utilization; however, the callback will pursue the main function’s execution. Here callback alludes to the testWidgets, a function that permits you to characterize a widget test and makes a widget with the assistance of a WidgetTester. WidgetTester It is utilized to build widgets during the running test cases.

testWidgets(Some Description, (WidgetTester tester) async {});

We will use this tester and a couple of other methods to test our visit a test. Testing visits the first thing we need to do is tell which widgets to test.

testWidgets("Flutter Widget Test",  (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    var textField = find.byType(TextField);
    expect(textField, findsOneWidget);
  });

The first thing we had like to do is we need to find the text filed and confirm that it exists, so we use textField is equal to the find.byType(). Now run this test in the terminal by command.

** flutter test ./test/widget_testing.dart **

Now next thing we can do is we can enter a text in this text field using await tester.enterText() and then expect(actual, matcher). So we should be able to find one widget.

testWidgets("Flutter Widget Test",  (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());
  var textField = find.byType(TextField);
  expect(textField, findsOneWidget);
  await tester.enterText(textField, 'Flutter Devs');
  expect(find.text('Flutter Devs'), findsOneWidget);
  print('Flutter Devs');
});

We again run the terminal by command, and we ought to get the screen’s output like the underneath screen capture.

Now we add a button on the home page file:

RaisedButton(
  color: Colors.blueGrey,
  child: Text("Reverse Text"),
  onPressed: () {
    if (_controller.text.isEmpty) return;
    setState(() {
      _reversedText = reverseText(_controller.text);
    });
  },
),

In this button function, when we add text on the text field and then press the button, the text was reversed shown on our screen. Now we will test this button on widget test.

testWidgets("Flutter Widget Test",  (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());
  var textField = find.byType(TextField);
  expect(textField, findsOneWidget);
  await tester.enterText(textField, 'Flutter Devs');
  expect(find.text('Flutter Devs'), findsOneWidget);
  print('Flutter Devs');
  var button = find.text("Reverse Text");
  expect(button,findsOneWidget);
  print('Reverse Text');
  await tester.tap(button);
  await tester.pump();
  expect(find.text("sveD rettulF"),findsOneWidget);
  print('sveD rettulF');
});

Now we will add buttons equal to the find. Text (), in the expected bracket, we will add a button and finds one widget, then we will use the awaiting tester. tap(), and we need to wait to execute one frame using the await tester. pump(). Finally, we can expect to find the reverse text in one widget. We run the terminal by command, and we ought to get the screen’s output like the underneath screen capture.

To look at how it looks when the test fails, let’s write findsNothing. They will show many types of errors in your terminal, like matching, finder, actual, and, Etc.

testWidgets("Flutter Widget Test",  (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());
  var button = find.text("Reverse Text");
  expect(button,findsOneWidget);
  print('Reverse Text');
  await tester.tap(button);
  await tester.pump();
  expect(find.text("sveD rettulF"),findsNothing);
  print('sveD rettulF');
});

Last time again, we run the terminal by command, and we ought to get the screen’s output like the underneath screen capture.

Code File:

https://gist.github.com/ShaiqAhmedkhan/d43cac6236cafc1dc0a9e643d5324fc7#file-homepage-dart

Conclusion:

In the article, I have explained the basic structure of Widget Testing in a flutter; you can modify this code according to your choice. This was a small introduction to Widget Testing With Flutter On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Widget Testing With Flutter in your flutter projects. We will show you the widget test is?, set it up in our project, and show the widget test’s demo program in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Widget Testing Demo:

flutter-devs/flutter_widget_testing_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---