DEV Community


Testing on Flutter: generate unit test badge using LCOV to your repository

Krisada Vivek
FullStack Developer, who loves hardware design and Digital Fabrication
・2 min read

TLDR; in this publication, I assumed that you all know how to write test and testing terminology and methods, no mentions here.

What is LCOV

LCOV is a graphical front-end for GCC’s coverage testing tool gcov. It collects gcov data for multiple source files and creates HTML pages containing the source code annotated with coverage information. It also adds overview pages for easy navigation within the file structure. LCOV supports statement, function, and branch coverage measurement.

Installing LCOV

brew install lcov
  • Generating an example app — flutter counter app

  • example test scripts ./test/widget_test.dart

Objective of lcov

  • To see the coverage of the code.
  • To deliver the code with quality.

To perform the test with coverage

install test_coverage library in pubspec.yml under dev_dependencies

       sdk: flutter
    test_coverage: ^0.4.2
  • then run test command with flags
flutter test --coverage
  • when test complete it will generate folder ‘coverage” in the project directory, to see the result in visualized, run this commands
genhtml -o coverage coverage/
# Open in the default browser (mac):
open coverage/index.html
this is the html report, that generated out looks like.

Alt Text

  • now you will get the coverage result, but I want to present in the GitHub repo how do I do that? you should get a badge!!!

To generate badge image

  • assume that you are at the root of the project
$ yarn init
$ yarn add lcov2badge — more detail here
  • then create a javascript script to generate a badge form the coverage file.
  • what you get is the ./coverage_badge.svg that you can use inside the file, like this.

Alt Text

  • the example Github code can be found here!

GitHub logo 3lVv0w / test_lcov_bedge

this repo demonstrate how to generate coverage badge form for unit testing

If you have any question/discussion with me, you can contact/ follow me
FB: Krisada Vivek @3lvv0w

Follow me Krisada Vivek for a more upcoming tech publication

ThankYou! ❤

Discussion (0)