Adding Badges in GitLab Repositories

GitLab：14.7.0

組織在運作一段時間以後，內部專案通常都會多如牛毛，因此在盤點專案時，如果資訊沒辦法一目瞭然，就可能會造成許多溝通的成本。

GitLab 有一個功能叫做 Badges，這個功能可以將你的 Pipeline 狀態 及你的 Code Coverage 直接以標籤的方式顯示在 Repository 的資訊頁，方便相關人士進到這個專案時，就能大概知道這個專案的基本狀態。

Pipeline Status Badge

在設定 Pipeline 標籤之前，必須先到該 repo 的設定裡面進行 Badge 相關的設定調整：

1. 在左邊側欄選取 Settings -> General。
2. 展開 Badges。
3. 填入專案的 Pipeline 連結： https://gitlab.your-domain.com/%{project_path}/pipelines。
4. 填入 Badge image URL： https://gitlab.your-domain.com/%{project_path}/badges/%{default_branch}/pipeline.svg。
5. 點選 Add badge，產生新的 Badge。

完成後即可以在專案首頁看到 Pipeline 的標籤。

Code Coverage Badge

要製作 Code Coverage Badge 必須完成兩件事：

1. 產生 Badge
2. 抓取 CI 裡 Code Coverage 的 percentage

產生 Badge

這個步驟跟設定 Pipeline Status Badge 類似：

1. 在左邊側欄選取 Settings -> General。
2. 展開 Badges。
3. 填入專案的連結： https://gitlab.your-domain.com/%{project_path}。
4. 填入 Badge image URL： https://gitlab.your-domain.com/%{project_path}/badges/%{default_branch}/coverage.svg。
5. 點選 Add badge，產生新的 Badge。

成功以後，你就會看到新的標籤，但值卻是 unknown，因此我們要進行第二步，去抓取 coverage 的數字。

抓取 CI 裡 Code Coverage 的 percentage

以 PHPUnit 為例，我們在 .gitlab-ci.yml 檔裡，只需要直接將結果輸出就可以了。

php ./vendor/bin/phpunit --coverage-text --colors=never

接著再去設定 CI 的 Parser，讓 CI 可以抓到我們輸出的結果：

1. 在左邊側欄選取 Settings -> CI/CD。
2. 展開 General pipelines。
3. 在 Test coverage parsing 填上：^\s*Lines:\s*\d+.\d+\%

不同語言 or 套件的 Regular Expression 可以參考 官網文件。

這樣一來就大功告成了。

Notice： 這邊有一個重點要注意，在 GitLab 14.9 以後，透過設定 Test coverage parsing 以拿到 coverage 資訊的方法會被淘汰，之後會改成直接在 CI 裡產生文件，相關資訊可以參考 Test coverage visualization。