Functional Testing in Flutter Development
In this term, I am taking Software Project course. During this course, I have a chance to learn mobile development by contributing in the development of BisaGo. BisaGo is a mobile application that aims to help people to find facilities and activities for disabled people easily. In this project, I mostly work on the front-end task. Front-end codes requires a lot of functional tests since we focus more on how the widgets are displayed and interact rather than the algorithm of the widgets. In this article, I will guide you step-by-step on how to make functional testing in Flutter development by examples from BisaGo development.
- Import the necessary packages
In the beginning of the file, import packages that are going to be used in the test file. For example, the test file below is going to test an edit profile page, so it needs to import user model, profile widget, edit profile widget, and user repository implementation.
2. Create mock repository classes
Since the actual repository classes communicate with back-end and there is no backend when we run the tests, we need to make a ‘fake’ backend. In the actual repository classes, it send a request to the backend with some parameters and wait for the response. In the mock repository classes that we make, we need to make a ‘fake’ request to substitute the request in the actual repository classes.
3. Create mock data
After we make the mock repository classes, we need to make the mock data to substitute the response of a url request in the actual repository classes. You can adapt the fields of the mock data based on the planned fields of the model.
4. Set up the mock repository classes and mock data
When the mock repository classes and the mock data have been created, we need to set them up and register it to GetIt class so our functional tests can recognize the mock that we made. In the example below, the initiation of GetIt class and the registration of the mock repository classes happen in setUpAll() function. As stated in the documentation, setUpAll() function is a function that is run once before all tests in a specific scope. If it is declared within a test group, it will run before all tests in the group.
5. Create the functional tests
The flow of a functional test is usually specifying the key to be found, pumping the widget, and expect the tester to find the widgets with the keys that have been specified. Intuitively, it works like we tell people to test the page manually. Instead, we code it so that we can run the test for many times automatically. Two most common testing constants to be used with an expect line is findsOneWidget and findsNothing. If you want a key to be found exactly once within a testing widget, you might want to use findsOneWidget. If you want a key to be not found at all, you might want to use findsNothing. Normally, if you need to make positive and negative testing, you’re going to use both of the testing constants.
6. Implement the widget until the tests are passed
The point of functional testing in test-driven development is to make sure the codes that you make satisfy the requirement of the task. For example, if you are tasked to create an edit profile page with requirements such as a header of an edit profile page, a form to edit profile, and a save button, you’re going to create three functional tests (six if you have to make positive and negative testing) that check whether the codes that you make later include the requirements. After you finish making the functional tests, you can focus only on passing the tests. If you have finished the code, passed the tests, and want to refactor your codes, you don’t need to worry that your codes will fail because the functional tests that you made will ‘notice’ you whether your changes will fail the codes or not.
Conclusion
At first, some people might think that functional testing is complicated and just adds unnecessary difficulties on the development, while actually, it helps you make codes focusly and prevents you from failing the codes whenever you want to refactor your codes. I hope my article can help you understand how to make functional tests in Flutter development. Thank you.
