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

This article is a continuation of the first part TDD in Flutter Part 1: Introduction to Test Driven Development.

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:

random_user.json

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:

test/user_test.dart

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.

user_model.dart

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

00:00 +0: test 1
00:00 +1: All tests passed!

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.

- test/
  - test_resources/
    - random_user.json
  - user_test.dart

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 .