Integration test with Flutter — Part One —

Hey everyone!👋

Today I’m going to continue with the Random Cat app for the learning flutter test. If you are reading this article but if you haven’t read the ‘How can I start with flutter testing?, part one’ article, I highly recommend you to do it, because you are going to need the rest of the tests to understand better how the application works and also because integration test is normally the last step when you are doing testing.

Previous article: https://medium.com/@ana.polo.sanchez1991/how-can-i-start-with-flutter-testing-part-one-a51aaefdb6a2

The main goal of this kind of test is to prove the application.

Basically, we are going to simulate how the application should be work when the user uses our application. This kind of test it’s super cool because you could see it in real-time in the simulator. 😊

Let’s get started!🙌

First, we need to add the integration_test dependency into our pubspec.yaml.

After that, we need to create a new folder in our root project, which I called, test_driver.

Inside it, we are going to create a new file, integration_test.dart. Then we need to add this code:

Future<void> main() => integrationDriver();

What is that? Well, it is the adaptor that will help us when we are going to run an integration test.

Ok, let’s continue.✌️

The next step that we are going to do is create another folder into the root of the project, in this case, I called it integration_test.

Perfect!👏 Now we need to create a new file, I called it app_test.dart. I named it in that way because it will be the main file for all our integration tests.

Here, we are going to put the test cases.

First, we need to create an extension of WidgetTester. We are going to do that because it will be helpful for creating other methods that need a WidgetTester object.

extension on WidgetTester {}

Inside that extension, we are going to create three methods.

PumpApp method

Here, we are going to indicate to the test that we need to start the application, to do that we need to do the next steps:

1. Import the main.dart file and give it an alias.

import 'package:catsapp/main.dart' as app;

2. Create a Future<void> method to start the app.

Get next cat method

This method is very simple, here we are going to have the tap action on the button to get the next cat. Here is an important part, we are going to find the widget by the Key, so, it is super important to have keys in our widgets.

If you want to know more about Keys, I highly recommend you this video 🔑

Random cats method

This method is where we are going to have all the tests to get random cats.

I have created a method to do it because I think is cleaner to have the different parts of the app separated.
Imagine that you have to test the different parts of the pages of your bottom navigation widget. You can choose different ways to do it, in my case, I have chosen to use only one testWidget method to do the integration tests of the entire app. Therefore, if you need to test the second screen, all you should do is create a new method for these tests. With this, what we can avoid is calling pumpApp for each new test.

After that explanation, I’m going to show you the code.

And now… how can you run this?🤔

It’s simple, like in another test, we need a main method.

void main() {}

Inside it, we need to initialize the integration test flutter building. This is necessary to do an integration test.

IntegrationTestWidgetsFlutterBinding.ensureInitialized();

Then, we need to create a WidgetTest method (the method that I mentioned before).

testWidgets('Cats App', (tester) async {});

Inside it, we are going to put all the necessary tests:

1. Start the app.
2. Check the title of the app bar.
3. Get next cat.

And that’s all! If you run the code you are going to see the emulator testing all the parts.

This is a complete class.

This is the gif that visually shows the integration tests that we have created. It's a bit slow, the real test is more efficient.

Test integration demo

Thanks for reading it. ❤️

If you like the content please give me claps! 👏

You can find me on Twitter: @AnaPolo_dev

Follow Flutter Community on Twitter: https://twitter.com/FlutterComm