Testing in Flutter

Sep 19 2023 · Dart 2.19.3, Flutter 3.7.6, Android Studio 2021.3.1, Visual Studio Code 1.7.4

Part 6: Generate Coverage Report

19. Generate Code Coverage Report

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 18. Add Custom Fonts to Goldens Next episode: 20. Add Test Case for Missed Code

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Transcript: 19. Generate Code Coverage Report

In the previous videos, we learned about unit tests, widgets tests, integration tests, and generating goldens. We also wrote a lot of tests. But if I ask, how much of our code is covered by the test? We don’t have an answer to that.

So in this video, we will learn how to generate the code coverage report for our test. The code coverage report shows how much of our code is covered by the test. This helps us identify the code not covered by the test, and we can write a test for that code.

We need to run the code coverage command to generate the code coverage report. Head over to bash or terminal and run the command.

flutter test --coverage

This will run all the tests and generate the code coverage report. You can see a new folder. If this command fails, that might be because Goldens are not updated. So run the command to update the goldens and rerun the code coverage command.

If you check the project folder, you can see a new folder called coverage has been created. This folder contains the code coverage report. Open this folder, and you can see lcov.info file.

Hmm… what is this file? lcov.info file has all the information about the code coverage. Let us parse this file into a readable format.

Before we do that, we will need to install Lcov into our systems. Installing lcov is very easy.

Mac users just run this command in the terminal.

brew install lcov

Windows users can download and install the lcov from the link in the description.

Now that we have lcov installed. Let’s parse the lcov.info file. Run the following command in the terminal

lcov --capture --directory ./coverage --output-file lcov.info

The command lcov --capture --directory ./coverage --output-file lcov.info is used to generate a coverage report using LCOV.

Here’s what each argument means:

lcov: This is the name of the LCOV command that we are using to generate the coverage report. --capture: This option tells LCOV to capture coverage data. --directory ./coverage: This option specifies the directory where the coverage data files are located. In this case, it is ./coverage. --output-file lcov.info: This option specifies the name of the output file. In this case, it is lcov.info.

So, when you run this command, LCOV will capture coverage data from the ./coverage directory and save the report to a file named lcov.info. This report can be used to analyze code coverage and identify areas of the code that need to be tested more thoroughly.

After this, we can generate the HTML report from the lcov.info file. Run the following command in the terminal.

genhtml ./coverage/lcov.info --output-directory ./coverage/html

The command genhtml ./coverage/lcov.info --output-directory ./coverage/html is used to generate an HTML coverage report from the LCOV coverage data using the genhtml command.

Here’s what each argument means:

genhtml: This is the name of the genhtml command that we are using to generate the HTML coverage report. ./coverage/lcov.info: This specifies the path to the LCOV coverage data file that we want to generate the report from. --output-directory ./coverage/html: This specifies the directory where the HTML report should be generated. In this case, it is ./coverage/html.

So, when you run this command, genhtml will generate an HTML coverage report using the LCOV coverage data file located at ./coverage/lcov.info and save the report to a directory named ./coverage/html. This report can be viewed in a web browser and visually represents the code coverage data.

Now head over to the coverage folder, and you can see a new folder called HTML. Open this folder, and you can see a file called index.html. Open this file in the browser to see the code coverage report.

This is what the test coverage report looks like. You can see the coverage for each file. You can also see the line-by-line range for each file.

Red lines are code that is not covered, and blue lines are covered by the test. With this, we know how much of our code the test covers. You can see some files are not covered by the test.

In the next episode, we will learn how to write a test for the code not covered by the test and see how we can automate this entire process.