Integrate Flutter Code Coverage Report to Azure DevOps
If you’re among the 10% of people who truly care about testing your apps this article is exactly for you!
When you need your app development to be sustainable and have your codebase handled by multiple programmers, automated testing is the only answer to keep everything in check.
One key aspect to determine whether your test case is sufficient is code coverage.
Code Coverage 101
Code coverage is a metric that shows how many lines of code are covered by your test case. It’s a very handy metric to look and we can say whether our test is enough or not.
Flutter has its own built-in tools to generate code coverage reports in the lcov format using the command flutter test --coverage . The lcov file then can be used to generate visual reports such as the example above
Integration with Azure DevOps
Ideally we want to run our test suite during the build phase of our application. Azure DevOps provides this capability by providing pipelines to build & deploy our apps automatically via CI/CD.
The pipeline is pretty sophisticated if we have generated a code coverage report during the build, it can automatically produce a visual page for it. However, this feature is only supported natively for .NET & .NET Core apps. With the other framework, we need to do some workaround. So, I’ll show you the steps on how to do it
- Create a new pipeline. In this example, I use the classic editor since it provides easy UI. You can also definitely use YAML to do this
2. Install flutter on your machine if you don’t have one. Since I use the Azure pipeline agents I need to install Flutter each time we want to build the apps. Shout out to Hey24Sheep, who created this azure flutter task!
3. Add the flutter test task, and enable the options ‘Generate code coverage report’ and ‘Publish Test Result’
4. Copy the .lcov file to your Build Artifact Staging Directory
5. Convert the .lcov to Cobertura format. Platforms such as DevOps and GitHub is already advanced enough to automatically capture the code coverage report. However, the format generated by default by Flutter isn’t accepted. So we need to convert it to cobertura (.xml)
Here we use the dart package cobertura to help convert the report. Here’s the command :
set PATH=%PATH%;C:\Users\VssAdministrator\AppData\Local\Pub\Cache\bin
dart pub global activate cobertura
cd [root_folder]
cobertura convert6. Publish the code coverage result. You can put it in the default location in flutter : [root_folder]/coverage/cobertura.xml
7. (Optional) You can publish the artifact so you can access your raw code report file.
8. Save your pipeline & run them. Voila! Your code coverage can be seen in the ‘Code Coverage’ tab! You can also see the test summary in another tab
Closing
Today we have learned integrate flutter code coverage report to Azure DevOps. I hope this article may give you inspiration on how to do sorting efficiently. I’m also open to discussion and input via the comments. Happy Learning!
