本地生成测试覆盖率徽标

在代码库 README.md 中放一排徽标（badge）是技术水平的象征，比如「测试覆盖率」，由 Codecov.io、Coveralls.io 提供，但他们只支持 GitHub、Bitbucket、Gitlab 这些英语系的代码托管服务，而不支持自建或国内的代码库 CODING.net，那我们就自己生成一个。

Codecov.io

测试覆盖率是在跑完测试时生成，有几个时间可以考虑：

简单方案：本地 git pre-commit：本地提交时，自动跑测试，生成徽标图片，再把图片 git add 和提交到代码库。
极客方案：持续集成跑完测试，获得测试覆盖率，生成徽标图片，提交到代码库的另一个静态分支（避免死循环，比如 gh-pages 和 coding-pages）或者云存储，并且把HTML版的测试覆盖率报告发布成静态网站（这样就和 Codecov 一样了）。

本文将讲解简易方案。

获得测试覆盖率

通过各个语言的测试工具和 awk 即可。比如 PHP 是这样的：

./vendor/bin/phpunit --coverage-text=coverage.txt ./tests/
grep -m 1 'Lines:' coverage.txt | awk '{print $2}'

$ ./vendor/bin/phpunit --coverage-text=coverage.txt ./tests/
PHPUnit 8.4.1 by Sebastian Bergmann and contributors.

...........                                                       11 / 11 (100%)

Time: 7.27 seconds, Memory: 32.00 MB

OK (11 tests, 71 assertions)
ubuntu@pc:code/sinkcup/laravel-ui-socialite$ cat coverage.txt


Code Coverage Report:
  2019-10-24 06:18:45

 Summary:
  Classes: 78.57% (11/14)
  Methods: 81.08% (30/37)
  Lines:   90.31% (205/227)

AddAvatarToSocialAccountsTable
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% (  8/  8)

$ grep -m 1 'Lines:' coverage.txt | awk '{print $2}'
90.31%

根据测试覆盖率生成徽标

打开 Coding 的持续集成状态徽标，发现 SVG 格式不佳，无法直接替换字符串；而 codecov 的 SVG 格式良好，可直接替换。

coding.net CI badge SVG

codecov badge SVG

<svg xmlns="http://www.w3.org/2000/svg" width="112" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1" />
        <stop offset="1" stop-opacity=".1" />
    </linearGradient>
    <mask id="a">
        <rect width="112" height="20" rx="3" fill="#fff" />
    </mask>
    <g mask="url(#a)">
        <path fill="#555" d="M0 0h60v20H0z" />
        <path fill="#a3b114" d="M60 0h52v20H60z" />
        <path fill="url(#b)" d="M0 0h112v20H0z" />
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="30" y="15" fill="#010101" fill-opacity=".3">coverage</text>
        <text x="30" y="14">coverage</text>
        <text x="85" y="15" fill="#010101" fill-opacity=".3">90%</text>
        <text x="85" y="14">90%</text>
    </g>
</svg>

使用上一步获得测试覆盖率数字，对这个 SVG 进行正则替换即可。需要注意 sed 里的正则不支持 \d 等语法，参考：《sed替换字符串时，使用正则表达式的注意事项》。

sed 's/>[0-9]\+\.\?[0-9]\+%/>66.66%/g' coverage.svg

由于 SVG 在 Git 里是纯文本，无法直接显示，所以需要转换成 png。

SVG is text/plain in Git

rsvg-convert coverage.svg > coverage.png

完整代码请看：https://codes-farm.coding.net/p/laravel-demo/d/laravel-demo/git

最后编辑于：2021.11.02 15:05:14