Testing in Flutter

As you can see in the code coverage report, we have missed some code. So let’s add tests for that code.

head over to quotes_api_test.dart file and add the following test case

test('json fromJson test', () {
  final data = jsonDecode(mockQuotes);
  final quote =
      data['quotes'].map((quote) => Quotes.fromJson(quote)).toList();
  expect(quote[0].id, 1);
  expect(quote[0].author, 'Shree');
  expect(quote[0].quote, 'I am best');
});

The above test case tests the fromJson function of our Quotes model class. This test case will pass. But this test case will fail if we change the value of the id, author or quote in the mockQuotes variable. So this test case is good.

Now let’s generate the code coverage report again to check if this code gets covered. Now it’s a tedious task to run all these commands repeatedly. Instead, we can create a shell script to run all these commands.

Mac users Create a new file called coverage_report.sh in the project’s root and add the following code.

flutter test --update-goldens --coverage

lcov --capture --directory ./coverage --output-file lcov.info

genhtml ./coverage/lcov.info --output-directory ./coverage/html

And save this file.

Windows users, create a new file called coverage_report.bat in the project’s root and add the following code.

cmd /k "flutter test --update-goldens --coverage & perl C:\ProgramData\chocolatey\lib\lcov\tools\bin\lcov -o coverage\lcov.info & perl C:\ProgramData\chocolatey\lib\lcov\tools\bin\genhtml -o coverage\html coverage\lcov.info"

Save this file.

Now to generate the code coverage report, run the following command.

sh coverage_report.sh

or

coverage_report.bat

And you can see the terminal executing all the commands line by line and also running the test. Once the test is completed, you can see the code coverage report in the coverage folder.

Open the browser coverage report and see the code coverage report. You can see that the code we added is covered by the test.

This is how we can generate code coverage reports for our Flutter project.

Let’s revise what we have covered in this testing series.

First, we covered Unit Testing - Unit Tests are used to test the individual unit of code. We used Mocktail to mock the dependencies and test the code.

Then we covered Widget Testing - Widget Tests are used to test the app’s UI. We used goldens to generate goldens and compare them with the new goldens.

Then we covered Integration Testing - Integration Tests are used to test the app as a whole. We used Mocktail to mock the dependencies and test the code.

Then we covered Code Coverage - Code Coverage is used to check the code coverage of the test. We used lcov and genhtml to generate code coverage reports.

This is the end of the testing series. I hope you enjoyed the series and learned something new. Please let me know in the comments below if you have any questions. I will answer them as soon as possible.

Where to go from here?

Firstly you should practice what you have learned in this series. You can also check out the official documentation of flutter testing. I will leave the link in the description below.