Provide a greatly customizable coverage visualizer.

I ever admired that code-cov or gitlab, or sonarqube had a pretty nice UI to show file coverage, comparing to the default output by go tool cover -html=cover.out.

But after searching github I did not find they or other persons had made a ready to use tool. And I doubt that even one is there will it suite my needs?

So I decided to make an open source coverage visualizer with highly customization and multi-language support with modern javascript techniques.

• coverage statistics, shown hierarchically
• nice decorations
• label filtering
• more...

# clone this repo git clone https://github.com/xhd2015/coverage-visualizer cd coverage-visualizer # run npm intall, add --force if failed. npm install npm run build # open another terminal, serve at http://localhost:8000 npx http-server --port 8000 # open dist/editor-basic-self-contained.html open http://localhost:8000/dist/editor-basic-self-contained.html

Output:

There is historically a problem with loading monaco-editor's tff file, it will cause icons to be displayed as blank sqaure, see the issue#1949 Icons not visible in find widget after Upgrading monaco-editor to 0.19.0

I actually find a solution that simply works: just copy the codicon.ttf to your build directory, and dynamically import it via css.

1. copy the ttf using webpack

npm install copy-webpack-plugin --save-dev

update webpack.config.js

// ...your code.... const path = require("path"); const CopyPlugin = require("copy-webpack-plugin"); module.exports = { // ...your code.... plugins: [ // ...your code.... // cp node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf dist/build/monaco-code-icons.tff new CopyPlugin({ patterns: [ { from: path.resolve( __dirname, "node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf" ), to: path.resolve(__dirname, "dist/build/monaco-code-icons.tff"), }, ], }), ], };

2. Load the ttf dynamically

We import the tff using dynamic load, see ./src/support/components/v2/Code.tsx for details.

let codeIconsTTFLoaded = false; function ensureCodeIconsTTFLoaded() { if (codeIconsTTFLoaded) { return; } codeIconsTTFLoaded = true; // runtime import const dynStyle = document.createElement("style"); dynStyle.textContent = ` @font-face {  font-family: "codicon";  src: url("/build/monaco-code-icons.tff");  }`; document.body.appendChild(dynStyle); } ensureCodeIconsTTFLoaded();

Behind this repository are monaco-editor,and code directly imported from monaco-tree.

Check documentation for more details.

Work still in progress, currently the default golang coverage visualizer is implemented.

1. no default export
2. prefer verbose syntax instead of one-liner code

open: xgo test-explorer - publish test explorer for the xgo project.