Make Dart/Flutter test report readable
Tags: dart, flutter, testing
Published: 2019-12-17 07:50:21

---
title: Make Dart/Flutter test report readable
published: true
description: Description of a tool which allows making tests results more clear and readable on CI/CD
tags: dart,flutter,testing,opensource
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qpcins55zm18ljd074lh.png
---

Hello there! I will try to be short.

## Intro

### Short

Flutter test report is not human-friendly.

### Long

On my personal Flutter project, I’ve started the setup of Continuous Integration & Continuous Deployment. And in Flutter test report is difficult to use. The report is hard to read & understand in case of failure. Sure, in case of success, everything is good, because there is just one line.

Flutter has big error stack traces. When it has some exception not in your codebase, but in Flutter itself. I mean errors with positioning or sizing, and for them, you will see a few hundreds of lines in logs.

In the front-end development I like the dot notation usually used for unit tests. Dot notation is cool because it’s clear and you can identify skipped and failed tests easily. Such feature useful when you have over 500 tests in your project. But in Dart, there is no such thing, only default and machine reporter.

![Sample of failed test with the long output](https://thepracticaldev.s3.amazonaws.com/i/qpcins55zm18ljd074lh.png)

## What to do?

### Short

Here is a tool, I’ve created: [dart_dot_reporter](https://pub.dev/packages/dart_dot_reporter) which makes report readable.

### Long

[dart_dot_reporter](https://pub.dev/packages/dart_dot_reporter) tool transforms machine results to the more readable and clear output. And here is an example:

![Default output with color in console](https://thepracticaldev.s3.amazonaws.com/i/u96eolhadxfhunz6cval.png)


If you are not familiar with Dot notation

- `.` Dot for passed test
- `!` Warning that test was skipped
- `X` for Failed test

The summary line of icons will be displayed at the start of the report. And in case of skip or failure, it will display the name of the test after the icon on the new line.

I implemented a few features out of the box. If you want - you can:

- hide skipped tests
- show successful tests
- append few error details after test name in case of error
- display id number of the test (which is like the order number)
- disable color

Also, later I plan to display top of tests which execution took too much time. 

## Alternative

In some cases, you can find a JUnit report also useful. [junit](https://pub.dev/packages/junitreport)
But in my case, I wanted to have a possibility to understand which test failed from logs or email/slack message with a fast look on the report.

## Finally

And you can see the example of that tool usage [here](https://github.com/apastuhov/dart_dot_reporter/commit/23609661f188fc6d91c837fa7aea48c90ce07f57/checks?check_suite_id=359924535) in “Run tests” section. Because I use dart_dot_reporter on CI for itself with GitHub actions, which I found useful for personal projects.

---

If you find some issues - write me a note or create a bug on [GitHub](https://github.com/apastuhov/dart_dot_reporter).