Getting Started With Writing Test Cases in Flutter

In this article, you will learn how to start writing the test cases in a flutter app with a simple example.

Photo by Brett Jordan on Unsplash

Test Cases

A test case is a simple & easy way for developers as well as testers to find bugs that might be related to UI, Business logic, Functionality, etc.

Why Spend Time Writing Test Cases?

For large-scale applications, We can not rely only on testing which is done manually, we cannot say that it’s covering all the scenarios related to that respective product & it’ll also take lots of time for the tester as well as the developer.

To overcome these problems test cases are written, It covers all the specific scenarios & one can also test a particular part of the app if required, in turn, saves time.

Run Test Using Commands:

To run the test file we can use:

flutter test test/counter_test.dart

Types of Tests

In flutter, testing is mainly divided into 3 types.

1. Unit Testing
2. Widget Testing (Ui Testing)
3. Integration testing

There is also a separate package to test the bloc in the flutter.

To understand all the stuff, First let us start by creating simple example app in which we will develop a login screen that contains 2 Text fields (one for email & the second for password) and 1 button to proceed further.

Above code snippet of login page will look like this when ran:

Now, as you can see that I passed the keys for all the widgets like both TextField(email & Password) & Login Button that is because keys help us to identify the widgets from the test case file to pursue Widget Testing. Actually, there are many other ways to identify the widget from the Test file, We will discuss it later in this article.

Now, Let’s start with understanding Test cases.

1. Unit Testing

Unit test is useful to test a unit of business logic & verify its correctness. It means we can easily test a single function, method & class of any small or large-scale project.

Now let’s get a better idea of it by writing a test cases of the above login screen.

As we can see in the snippet above, We have used the FieldValidator class which is a common class for the validation as you can in below snippet.

After that, there is a method named expect(), which helps us compare the actual result with the expected one.

Now, if we run this Test case will pass successfully.

If we want to fail the test case consider an example:

In the above snippet, you can see that I passed 1 email address test@test.com & It’s in a proper format so, the test will fail in this case. So, our test result will be:

Expected: 'Enter Email'
Actual: ''
Which: is different. Both strings start the same, but the actual value is missing the following trailing characters: Enter Emai ...

Now, What if want to test more than one test case in a single file?

In that case, we can use a group() method.

group() allows us to write multiple test cases in a single file

let’s get an idea of it by an example:

As you can see that In this example I have added 2 tests in a group so it’ll test one by one & give us the result of each test separately.

2. Widget(UI) Testing:

Flutter Widget Testing will allow us to build & interact with widgets in the test environment. The main objective of this widget testing is to test the UI & how it’s working.

let’s take one example to get more ideas about widget testing.

As we can see in the above snippet we’ve used the testWidgets() function because in this function we can put all test cases inside it.

After that, there is a method of WidgetTester named as pumpWidget(). this method will build & render the widget which was passed as an argument.

In our case, we’ve passed MyApp() (which is the main widget) as an argument of pumpWidget().

Then there is another class named Finder the main job of this class is to help the tester to find the widgets from the widget tree.

There are several ways to find the widgets like byKey(), byIcon(), byWidget(), byTooltip(), etc.

In this example, I used byKey() method to find the widget.

3. Integration(end-to-end or GUI) Testing:

When we need to test the entire app or a huge part of the app at that time we need to use the integration testing.

With the help of integration testing, we are able to test the UI & functionality parallelly.

How do we implement Integration testing?

let’s take an example:

first, we need to add some dev dependencies for the flutter test & integration test.

dev_dependencies:
  integration_test:
    sdk: flutter
  flutter_test:
    sdk: flutter
  flutter_driver:
    sdk: flutter

create a folder outside of the test folder of your project named integration_test & inside it created a file driver.dart.

Then we’ll create a test_driver folder outside of the test folder and create a file named driver_test.dart

Now, to run the integration testing first we need to run the app to the device and fire below mentioned command in the terminal:

flutter drive -driver integration_test/driver.dart -target test_driver/driver_test.dart

Conclusion

So, In this article, we’ve learned those three types of tests that Flutter supports. A unit, widget & integration test. A unit test tests the behavior of a method or class. In widget(UI) test, it tests the behavior of Flutter widgets without running the app itself. In integration test ( end-to-end or GUI testing) runs & tests the full app, Hope it will help you guys in getting started with test cases in Flutter

Here is full source code link!!!