Code Coverage Visualization for Dart/Flutter (Specially for Windows and VS Code)

user_4756173 0
Viewed 2262

This was originally a Github Issue in the Dart-Code repository.

1. Context

I've been working on a package that has hundreds of tests, so an easy way of visualizing code coverage would be incredibly handy.

I would like to run my tests with, say, a .vscode configuration with an lcov.info output which would automatically be recognized by VS Code and highlighted on the respective editors with either red or green.

2. What I've Already Tried

I've tried many different solutions in the past few days — months actually — but none of them worked as the ideal one described above:

  • flutter test --coverage --coverage-path=lcov.info does work to generate the necessary file, but it's clunky to have to visualize it through a 3rd party program such as genhtml, all the more if you're on Windows.
    • And it does need Flutter in the end, which should not be necessary if you're working on pure Dart...
  • IntelliJ would supposedly work ideally, but I just can't seem to enable the Run with Coverage button on mine, even after installing the test_coverage package.
    • Though one person on Gitter told me he has it working on his IntelliJ.
  • Both the coverage and the test_coverage packages offer something close to what I described above, but their solutions are way clunkier — and on Windows they are tough to set up...
  • codecov.io is an alternative with a 3rd party, but it's annoying to have to handle this externally when the editor offers a much more flexible and faster experience.
    • And there is also the problem of ambiguous coverage, which is not clear with respect to codecov.io. For example, if one folder tests stuff that indirectly calls another folder, does that count as coverage for the indirectly called folder as well? That's almost always undesirable.

3. Other Resources

  1. There's this old question on StackOverflow that was helpful initially.
dart flutter visual-studio-code code-coverage command-line-interface
1 Answers

  1. You can take the genhtml.perl script here.

  2. If you have Git for Windows installed on your machine, you already have Perl installed, it should be here: <git-install-dir>\usr\bin\perl.exe

  3. Replace backslash characters (\\) with slash characters (/) in all file path lines (prefixed with SF:) in the lcov.info file.

  4. Run genhtml.perl script. For example — assumed current working directory is root directory of your project —:

    <git-install-dir>\usr\bin\perl.exe \
    C:\Scripts\genhtml.perl \
    -o .\coverage\html .\coverage\lcov.info

    Note. It may be useful also to add the --prefix option.

As a result of these actions, you should get generated HTML report in the .\coverage\html/ directory. Open .\coverage\html\index.html file in your browser to see the report.

I hope this helps — at least, it worked for me.

user_157377060
Related