Flutter widget test- Using Shrine App as Case study.

What is Software testing and why is it important?

Software testing is the process of evaluating the functionality of a software application with the intention to find whether the developed software met the specified requirements or not and to identify the defects to ensure that the product is defect free in order to produce the quality product. Software testing can be done in two ways:

• Manual testing
• Automated testing

Automated testing is the process of using automation tools to find the defects.

Automated tests help ensure that your app performs correctly before you publish it, while retaining your feature and bug fix velocity.

Flutter automated testing falls into three categories:

• Unit tests
• Widget tests
• Integration tests

Widget test in flutter

A widget test (in other UI frameworks referred to as component test) tests a single widget. The goal of a widget test is to verify that the widget’s UI looks and interacts as expected. Testing a widget involves multiple classes and requires a test environment that provides the appropriate widget lifecycle context.

In order to carry out a widget test, you need to add the flutter_test package to your dev_dependencies in your pubspec.yaml file.

The flutter_test package provides the following tools for testing widgets:

• The WidgetTester allows building and interacting with widgets in a test environment.
• The testWidgets() function automatically creates a new WidgetTester for each test case, and is used in place of the normal test() function.
• The Finder classes allow searching for widgets in the test environment.
• Widget-specific Matcher constants help verify whether a Finder locates a widget or multiple widgets in the test environment.

Setting up the Shrine App

For the demonstration of the widget testing, i will be using the Shrine app in the flutter Material Design and Material Components(MDC 101) codelab. Go through the codelab and get it working your device / emulator. By the time you are done, you should have an app that looks like this.

Let’s do some testing

Create a test folder inside the project root directory, the create a widget_test folder inside the test folder. We would be testing the login page, so create a login_test.dart in the widget_test folder. Once you are done, your project structure should look like this.

Before we start writing the test, let first discuss the approach we would be taking in verifying that the UI looks and interact as expected.

1. we want to ensure that the Shrine Image logo is visible

2. we want to ensure that the “SHRINE” text is visible

3. we want to verify that there are only two TextFields visible on the screen

4. we want to verify that one of the TextFields has the text “Username”

5. we want to verify that the other TextField has the text “Password”

6. we want to verify that there is a cancel button on the screen

7. we want to verity that there is a next button on the screen

8. we want to verify that the cancel button clears text in the TextFields.

3,4 and 5 have things in common, therefore we would group them using the group() function likewise 6 and 7. Therefore we would have separate group to hold the TextField test cases and another group to hold the Button test cases.

To carry out test case 8, the TextField and Buttons would need to interact, therefore, we would create another group that would be a parent group to the other two groups as discuss above.

Complete code

If you enjoyed this exercise as much as I did you can support me by 👏 for this story.