Colorize Firestore Emulator Coverage

[alixaxel]

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:

.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:

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.

[abeisgoat]

@ryanpbrewster Please take a look and feel free to re-assign back to me if this isn't in your wheelhouse.

[samtstern]

Actually we've been prototyping some much slicker UIs for this report this week. Will update here if there is concrete progress.

[wiedzmin26]

@samtstern any news?

[samtstern]

@wiedzmin26 no specific news, we are still pursuing a more general "UI" for the emulator suite where we can put this and other features.

[laurentpayot]

@samtstern Any news one year later? It would be great if the new Firestore emulator UI had a link to a colorized version of the rules coverage. It should not be too complicated and make the rules coverage useful at last 😉

[mvergarair]

@laurentpayot I agree, as is the rules coverage html is useless 😞 .

[erlichmen]

bump, the OP css is VERY useful. in the meantime just add those under a flag or something until you decide on a better approach (if any)

[laurentpayot]

@yuchenshi you gave a generated coverage html file as an example of Rules Unit Tests V2.
I had to add a few lines to your example to concatenate @alixaxel’s <style> section to the generated coverage file to make it useful.
As you were once assigned to this issue I am gently pinging you for a fix 😉

[new-carrot]

I store all override CSS styles in a file override.css and I modify after function to override the css

after(async () => {
  // Close any open apps
  await Promise.all(firebase.apps().map((app) => app.delete()));

  // Write the coverage report to a file
  const coverageFile = 'database-coverage.html';
  await new Promise((resolve, reject) => {
    http.get(COVERAGE_URL, (res) => {
    let body = '';
    res.on('data', chunk => body += chunk);
    res.on("end", () => {
      let start = body.indexOf('<style>');
      let end = body.indexOf('</style>');
      body = body.substring(0, start + '<style>'.length) + fs.readFileSync('override.css').toString() + body.substring(end);
      fs.writeFileSync(coverageFile, body);
      resolve();
    });
    res.on("error", reject);
    });
  });

   console.log(`View database rule coverage information at ${coverageFile}\n`);
});

[imolorhe]

Still no updates on this?