Visualizing Coverage with Coverage Gutters in agoric-sdk

[dckc]

Want to see which lines your tests actually hit without leaving VS Code? With c8 --reporter=lcov and the Coverage Gutters extension, you get instant visual feedback in the editor—green for covered, red for missed. Unlike the HTML reporter, there's no context switch: just run your tests, load coverage, and keep coding.

Setup

If you're already running coverage via yarn test:c8, you're 90% there. Just make sure it includes --reporter=lcov (you can pass it via env var like this: C8_OPTIONS="--reporter=lcov" yarn test:c8). That should produce coverage/lcov.info.

Next, install the Coverage Gutters extension: Coverage Gutters on Marketplace

Then in VS Code, open the command palette (Cmd/Ctrl+Shift+P) and run:

Coverage Gutters: Display Coverage

You’ll see green and red marks in the gutter indicating which lines are covered. No HTML viewer, no scrolling through a browser. Just glance and go.

Want it to reload automatically? You can add this to .vscode/settings.json:

{
  "coverage-gutters.showGutterCoverage": true,
  "coverage-gutters.coverageBaseDir": "coverage",
  "coverage-gutters.coverageFileNames": ["lcov.info"]
}

That’s it—you’re now visualizing coverage inline with your code.

Limitations

• Performance: Running Coverage Gutters: Display Coverage can take 10–15 seconds even on smaller packages like packages/portfolio-contract. It's parsing lcov.info and matching paths across your workspace. This is normal, but noticeable—especially if you’re expecting instant feedback.

• Branch coverage visibility: While c8 collects full branch coverage, Coverage Gutters only shows line-level indicators. If any part of a line is covered, it appears green—even if only one branch of an if/else was exercised. For detailed branch info, use the HTML report or inspect lcov.info directly.

References

• Coverage Gutters extension
• c8 coverage tool
• AVA test runner