firebase / firebase/firebase-tools

Colorize Firestore Emulator Coverage

Open
#1,289 10 comments 20 reactions 0 assignees View on GitHub
emulator-suite emulators: firestore polish type: feature request
Dominant language
TypeScript
Stars
4.5k
Forks
1.3k
Avg merge
1d 12h
Merged PRs (30d)
84

Description

Context: we have pretty extensive Firestore security rules and when viewing the emulator coverage report, it gets really difficult to see what went wrong and where due to the sheer size of it.

I'm using the following CSS overrides to provide some visual cues:

```css
.coverage-expr:hover {
border-bottom: 3px dashed rgb(0, 0, 0);
cursor: default;
}

.coverage-expr[title="Expression never evaluated"] {
background: lightyellow;
}

.coverage-expr[title^="Value true returned"] {
background: lightgreen;
}

.coverage-expr[title^="Value false returned"] {
background: lightcoral;
}

.coverage-expr[title^="Expression short-circuited"] {
background: lightgrey;
}
```

Sample:

![image](https://user-images.githubusercontent.com/262782/57717672-a7338980-7673-11e9-807f-0241dfab153b.png)

![image](https://user-images.githubusercontent.com/262782/57717731-c500ee80-7673-11e9-821b-b06b5adaf85b.png)

The CSS selectors might not be perfect, but we find them pretty helpful while analyzing coverage.

It would be great if something like this was incorportated into the emulator by default.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.