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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersimport 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } -
example test scripts ./test/widget_test.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters// This is a basic Flutter widget test. // // To perform an interaction with a widget in your test, use the WidgetTester // utility that Flutter provides. For example, you can send tap and scroll // gestures. You can also use WidgetTester to find child widgets in the widget // tree, read text, and verify that the values of widget properties are correct. import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:test_lcov_bedge/main.dart'; void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async { // Build our app and trigger a frame. await tester.pumpWidget(MyApp()); // Verify that our counter starts at 0. expect(find.text('0'), findsOneWidget); expect(find.text('1'), findsNothing); // Tap the '+' icon and trigger a frame. await tester.tap(find.byIcon(Icons.add)); await tester.pump(); // Verify that our counter has incremented. expect(find.text('0'), findsNothing); expect(find.text('1'), findsOneWidget); }); }
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
dev_dependencies:
flutter_test:
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/lcov.info
# Open in the default browser (mac):
open coverage/index.html
this is the html report, that generated out looks like.
- 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.
const lcov2badge = require("lcov2badge"); | |
const fs = require("fs"); | |
lcov2badge.badge("./coverage/lcov.info", function (err, svgBadge) { | |
if (err) throw err; | |
try { | |
if (fs.existsSync("./coverage_badge.svg")) { | |
fs.unlinkSync("./coverage_badge.svg"); | |
console.log("[INFO] remove old file"); | |
} | |
} catch (err) { | |
console.error(err); | |
} | |
console.log("[INFO] generate coverage image"); | |
fs.writeFile("./coverage_badge.svg", svgBadge, (_) => | |
console.log("[INFO] complete") | |
); | |
}); |
- what you get is the ./coverage_badge.svg that you can use inside the README.md file, like this.

- the example Github code can be found here!
3lVv0w
/
test_lcov_bedge
this repo demonstrate how to generate coverage badge form lcov.info for unit testing
test_lcov_bedge
A new Flutter project.
Getting Started
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
If you have any question/discussion with me, you can contact/ follow me
FB: Krisada Vivek
DEV.to: @3lvv0w
Follow me Krisada Vivek for a more upcoming tech publication
Top comments (0)