Sully Group Entreprise de Services du Numérique
Generic selectors
Exact matches only
Search in title
Search in content

Actualité

TDD in Flutter Part 2: How to write a unit test ?

03/09/2021

TDD in Flutter Part 2: How to write a unit test ?

Guillaume l’un de nos experts du Pôle Mobilité, vous explique comment appliquer les principes du développement piloté par les tests (TDD en abrégé) à un projet Flutter (ou Dart).

Cet article sera composé de deux parties en anglais, découvrons la deuxième qui permet de comprendre comment écrire un test unitaire.

Write your first unit test

Let’s consider that you have created an application which fetch data from an API. How can you test that you will be fetching and parsing your data correctly into a model class ?

In this example I am going to use the JSON Placeholder API. First thing you should do would be to grab some response which you could use for your tests, here’s mine:

Next step would be to create some UserModel class, but remember that we are trying to apply TDD so the first thing you should do is to create a test file inside the test/ folder which will be the base to define our class:

Note that I’ve called the file user_test.dart the “_test” part of the filename is important. It is needed so your file will be recognized as a test file.

What we did in our file is only defining that we need a UserModel class which will takes all four of our parameters defined in the JSON and will store their values so we can access them. Now that we have a failing test, we can create our UserClass with all the needed properties in our code.

We can now try to run our test by using the command flutter test you should get an output similar to this:

Because we have a passing test we need to write another or change our current one before coding again. Now that we have defined our model the next step would be to parse a sample JSON file so we can confirm that our UserModel would be usable to parse the API data. To use a file in your tests you can simply create a new folder inside test/ and add inside it all your test resources.

And you can grab it from your code like this:

We now have all we need to add a new test:

As you can see we have defined a new constructor UserModel.fromJson which we will need to code like this:

And you are done ! Your class is fully tested, the last and final step would be to mock an HTTP client.

Mocking an HTTP client

For this article I am going to use the package http as it is the easiest to mock and test. First thing you should do is define the base class and method which will be used for your API call.

What we want to do is simply use the MockClient provided by the package to simulate fake API calls, instead of receiving a response from the API we will return our sample file random_user.json.

Now we need to code our ApiProvider class and its method getUser() :

As you can see our ApiProvider is taking an HTTP client as parameter, by doing so you are able to pass either the MockClient or a real Client object to perform your request. You should now be able to test your API calls.

Conclusion

Congratulations, this is the end of this 2nd part. As always I hope that I was clear in my explanations and if you liked this article and want to support this series you can clap it and leave your impressions in the comment section.

I want to thank the community for all the support you have shown for the first article, it is really motivating. The 3rd part will be dedicated to widget testing using testWidgets and snapshot comparison using the golden_toolkit .

Share