Flutter Code Coverage with Gitlab CI

Before going to the heart of this article, let me talk about unit testing. Why is unit testing? Because we need unit testing so we can know how much code is covered. That is simple reason!

Within the scope of this article, I will not go into deeply unit testing instead I will only briefly outline the importance of unit tests.

There are some reasons why unit testing is important:

1. It helps us to identify bugs early while developing features. That mean reduce time testing for QC and fix bugs time.
2. When we can write full unit tests that mean our code is clean and all of functions be tested. If any code can not test, we have to refactor again and again. So it helps to improve quality of code.
3. Avoid breaking features. When we write a new function or feature, it may leads to break the old function or features. Unit tests help us realize that soon.
4. Documents! Why I say that? Actually, we may forget everything after a one week. Unit tests can remind us or other developers can know exactly what we expect while developing.

Now we will go to test coverage, the main purpose of this article . As I said before, test coverage tell us how many percent code is covered.

We will use lcov to show coverage report in flutter project. If you haven’t installed yet, you can install this tool via homebrew:

brew install lcov

You can take coverage on local before create merge request like this:

$ flutter test --coverage ./lib
$ genhtml -o coverage coverage/lcov.info
$ open coverage/index-sort-l.html

It’s time for code, you can check out my example project or you can create a flutter project then upload to your gitlab by yourself.

First of all, I just display a circle widget and display it on the screen.

And now, I want to check the widget has color and border radius same with design:

Now we will add gitlab CI for the project.

In this example, I just want to test and show coverage report when create merge request or merge to develop branch.

You also see I use docker image cirrusci/flutter, it has installed environment for Flutter included lcov tool that we use to show the coverage report later. And I also want to trigger this stage for merge request or code is merged to develop branch.

Let create a new merge request and can see pipeline is running:

This is pipeline passed and you can see code covered 100%. That’s cool!

We will configure something to show this percentage in overview of each merge request. It still not display right now unless we click on pipeline to see the result but it take time for us.

Now we open Settings -> CI/CD -> Expand General pipelines, we will see the text box to input a regular expression and use like this:

\s*lines\.*:\s*([\d\.]+%)

So what is this line?

You can take a look pipeline again, the final of report show like this:

Overall coverage rate:
58   lines......: 100.0% (7 of 7 lines)
59   functions..: no data found

The above regular expression just find strings that contains lines string then get a number.

The final result:

Let move to merge request section and retry pipeline. When test coverage job is success, the coverage percent will display on Merge Request.

The question is how can I see the coverage develop or master branch? I only see the coverage now. That’s also easy on gitlab!.

Let open Settings -> CI/CD -> Expand General pipelines again. We will see two kind of badge have been supported: Pipeline status and Coverage report. We just copy markdown links and choose branch that we want to display.

Then we open README.md file and paste two links to this file.

You also can preview your change in Preview tab or just save it. And let see how it changes.

It is covered 100%. That’s perfect project.

In fact, the CI progress not only has test coverage but also more and more stages base on the project. This is just a small part in this progress.