How to display test coverage for flutter apps in visual studio code?

• Flutter Coverage

• Coverage Gutters

Test Subject

A straightforward class called test_service.dart was built. It permits signing in, signing out, and checking the status (logged in or not). It’s really simple and has issues (such as a username and password that are hard-coded), but it’ll do to show how coverage works. The group is displayed below.

class TestService {
  final String testPwd = "test@123#";
  final String testUser = "test";

  bool _isLogOut = true;

  void test(String? user, String? pwd) {
    if (!_isLogOut) throw Exception("Please log out first");

    if (user != testUser) throw Exception("user name is wrong");
    if (pwd != testPwd) throw Exception("password is wrong");

    _isLogOut = false;
  }

  void isLogout() {
    _isLogOut = true;
  }

  bool isLoggedIn() {
    return !_isLogOut;
  }
}

 Unit Tests

To cover all potential statements of the TestService, we also have some unit tests. It is displayed in the file below.

import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_test_coverage/test_service.dart';

void main() {
  test("incorrect user login failure", () {
    var _sut = TestService();
    expect(() => _sut.test("user", "test@123#"), throwsException);
    expect(_sut.isLoggedIn(), isFalse);
  });

  test("incorrect pwd login failure", () {
    var _sut = TestService();
    expect(() => _sut.test("test", "password"), throwsException);
    expect(_sut.isLoggedIn(), isFalse);
  });

  test("Check for logout before logging in", () {
    var _sut = TestService();
    _sut.test("test", "test@123#");
    expect(_sut.isLoggedIn(), isTrue);

    expect(() => _sut.test("test", "test@123#"), throwsException);
    expect(_sut.isLoggedIn(), isTrue);
  });

  test("Check for a successful login", () {
    var _sut = TestService();
    _sut.test("test", "test@123#");
    expect(_sut.isLoggedIn(), isTrue);
  });

  test("Check that the logout function works", () {
    var _sut = TestService();
    expect(_sut.isLoggedIn(), isFalse);

    _sut.test("test", "test@123#");
    expect(_sut.isLoggedIn(), isTrue);

    _sut.isLogout();
    expect(_sut.isLoggedIn(), isFalse);

    _sut.isLogout();
    expect(_sut.isLoggedIn(), isFalse);
  });
}

Coverage information

A built-in command in Flutter allows you to get coverage data while running all tests. Therefore, all you have to do is open the shell of your choosing, go to the project root folder, and run the command below.

flutter test --coverage

This will run each test in your project and generate a file called lcov.info that contains data on coverage. The file is required by the extensions you previously installed in order to display the data.

Display coverage details for each file

You should be able to see a list of the files in larger projects that have enough test coverage and those that don’t. Use the Flutter Coverage addon to fix this issue. The coverage % for each dart file in your project is displayed. Open the Flutter Coverage drawer in VS Code’s Test Explorer. You need to observe something similar.