Testing In Flutter

Testing is an essential part of the app development process, yet it is often overlooked or provided minimal attention. This is a mistake that can have serious consequences, as faulty or buggy apps can lead to user frustration, negative reviews, and even financial losses. In this medium post, we will delve into the importance of testing in app development and various types of testing that can ensure the quality and reliability of your flutter apps.

Testing is an integral phase in the development cycle of an application ensuring that the app is of substantial quality, planned to perfection, and perfectly executed and the phase that commands the most time in the development cycle.

Objective Of Testing

In the app development process, Testing is crucial for ensuring that your app functions properly and as intended. Through testing, you can identify and address any bugs or defects early on, saving time and resources in the long run. Testing also helps to ensure that your app is reliable and maintainable. By writing tests, you can confirm that changes made to the app do not negatively impact its existing functionality, and feel confident in making future changes. Ultimately, testing is a key component of delivering a high-quality app to your users.

• Automating Process
• Retaining feature on further scaling
• Fixing bugs easily
• Timely feedback on bugs.
• etter Documentation, Code coverage

Flow Of Test Cases

Development Testing In Flutter

Dart language & Flutter framework provides extensive support for the automated testing of an application at different levels.

Flutter provides 3 kinds of tests to test your app:

• Unit Testing
• Widget Testing
• Integration Testing

Unit Testing

Unit tests are used to test individual functions or classes in your app. They are usually isolated from the rest of the app, so they don’t rely on any external state. You can run unit tests from the command line or an IDE by using the flutter test command.

Widget Testing

It is used to test the interaction between different widgets in your app. They allow you to test how widgets behave when they are nested within each other, and how they respond to user input. You can create widget tests by using the flutter test command and running them with the flutter drive command.

Integration Testing

Integration testing includes testing user flows through the app, as well as testing interactions with external APIs or databases. In Flutter, you can use a package like Flutter Driver to create integration tests that run on the command line. These tests can be run on real devices or simulators/emulators.

Test Types Relationship ( Isolation -Time Consumed )

Unit tests are the most isolated and fastest to run, as they test a small, specific unit of code in isolation. They are usually focused on testing individual functions or methods, and do not require the app to be fully built or running.

Widget tests are slightly less isolated, as they test the behavior of a single widget in the context of a running app. They allow you to test the interactions between a widget and its dependencies, as well as the widget’s appearance. Widget tests are typically faster to run than integration tests but may take longer than unit tests.

Integration tests are the least isolated and most time-consuming to run, as they test the interaction between multiple components of the app. They require the app to be fully built and running and can be used to test the app’s behavior end-to-end. Integration tests are useful for verifying that the different parts of the app are working together correctly and as expected.

We are on board with the need for testing and the types of it. Herewith are some key integral parts for writing test cases :

• : Write the test case inside the main function in the test dart file. All the test cases come under the main function.
• : Test cases are written under test() function or testWidgets() in case of widget tests.
• : test function requires a description and test code. description should be as clear for naive understanding as well
• : Add the test dependency needed at the testcode part.
• : Different testcases can be grouped based on similarity using the grouping() function.
• : All the test cases are written using three AAA format

While writing test cases one should be well acquainted with the terminologies used in writing those test cases

Terminologies Used In Test Cases

• : main() : All the test cases are written inside this function.
• : group() : All the similar test cases are grouped together on a similarity basis
• : test() ,testWidgets () : require a description and testcode. description should be apparent clear for even the management person to understand and infer. test code should be written under this function.
• : Setup, setUpAll: setup common code required for each method. if written outside test cases available for all test cases.
• : verify, expect: used to verify the test case results in the intended value
• : tearDown, tearDownAll : used to dispose off things , methods
• : pumpWidget(): Renders the UI from the given widget.
• : tap(): Calls the onTap/onPress event of the widget.
• : pump(): Gets the reflected changes in the Widget. (e.g. setState())
• : pumpAndSettle(): Repeatedly calls the pump() method with duration until there is no frame to schedule.
• : WidgetTester: Used to build and interact (re-render) widgets in the test environment.
• : Finder: Class that allows you to search widgets in a test environment.
• : Matcher: Verifies Finder locates a widget or multiple widgets in test environment.

Pattern Used In Writing Test Cases ( AAA Structure )

Using the AAA pattern can help you write test cases that are easy to understand and maintain, and can also help you catch errors and bugs more effectively.

• Arrange: prepare and initialize
• Act: invoke method testing
• Assert: validate the result expected

The AAA (Arrange-Act-Assert) pattern is a common approach for writing test cases that can help you structure your tests clearly and logically. The AAA pattern consists of the following steps:

1. Arrange: Set up the necessary preconditions for the test. This may involve creating objects, setting up mock data, or performing other necessary setup tasks.
2. Act: Perform the action that you want to test. This could be calling a function, interacting with a widget, or performing some other action.
3. Assert: Verify that the action produced the expected result. This may involve checking the return value of a function, checking the state of an object, or verifying that some other condition is true.

Here’s an example of a test case written using the AAA pattern in Flutter:

Simple Test Cases In Flutter

Unit Testing

Unit testing involves testing individual parts of your app, like functions or classes, separately from the rest of the app.

Here is an example of a unit test for a Flutter function that makes an HTTP request using the http package:

This test makes an HTTP GET request to the URL https://flutterdevs.org/get and then verifies that the status code 200 and the response body is as expected.

Note that this test is using the http package to make the HTTP request, but you could also use a mock HTTP library like mockito or dio_mock to test your HTTP client code without actually making real network requests.

Widget Testing

Widget testing involves verifying the behavior of individual widgets within your app. This function allows you to find elements using Finder objects and verify their behavior using Matcher objects.

Here is an example of a widget test for a FileWidget in Flutter:

This test creates an instance of FileWidget with a File object and then uses the WidgetTester to verify that the file name is displayed.

Integration Testing

Integration testing in Flutter involves testing how various parts of your app work together

Here is an example of an integration test for a payment feature in Flutter

This test launches the app, taps the Make Payment button, enters payment information, and taps the Submit Payment button. It then verifies that the payment was successful by checking for the presence of the text Payment Successful.

Code Coverage In Flutter

Code coverage is a measure of how much of your code is being tested by your test suite, understand how thorough your tests are, Identify areas of your code yet to be tested.

Code coverage in Flutter helps ensure that widgets are properly tested and can be measured using tools like coverage. These tools generate reports on tested code, aiding in identifying untested areas and improving the app’s overall quality. Tracking code coverage can also aid in monitoring testing progress and identifying areas for testing focus

Here’s an example of how to implement code coverage in Flutter:

1. Install the coverage package:

flutter pub add coverage

1. Run your tests with the coverage command:

flutter test --coverage

This will generate a coverage report in the coverage directory.

1. To view the coverage report, you can use the coverage:format command:

flutter pub run coverage:format

This will generate an HTML coverage report that you can view in your web browser. The report will show you which lines of code were executed and which were not, so you can see which parts of your code still need to be tested.

For more information on code coverage in Flutter, you can check out the coverage package documentation:

coverage | Dart Package
Coverage provides coverage data collection, manipulation, and formatting for Dart. collect_coverage collects coverage…pub.dev

Herewith is a sample file to help you understand :

What’s Next

Tests might depend on classes that fetch data from live web services/databases which is inconvenient as this would fail the test in case of unexpected results from the database / API. To prevent this from happening we deal with such scenarios by Mocking.

This would be discussed in detail in the upcoming blog: Mocking In Flutter

References

Testing Flutter apps
The more features your app has, the harder it is to test manually. Automated tests help ensure that your app performs…flutter.dev

Find widgets
To locate widgets in a test environment, use the classes. While it’s possible to write your Finder classes, it’s…docs. flutter.dev

---

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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

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.