如何在GitLab仓库徽章中展示两个项目的代码覆盖率

1. 拆分单元测试Job，生成独立覆盖率报告 #

当前unit-testsJob合并运行两个项目测试，导致仅第一个项目的覆盖率被记录。我们需要拆分为两个独立Job，分别对应NPM包和Angular应用：

# NPM包单元测试Job
pkg-unit-tests:
  stage: test
  rules:
    - when: on_success
    # 可选：仅默认分支运行时更新徽章
    # - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  image: trion/ng-cli-karma:$ANGULAR_VERSION
  before_script:
    - *angular-env-setup-script
  coverage: '/Statements \W+: (\d+\.\d+)%.*/'
  script:
    - npm run build:ds-prod
    - npm install dist/ds
    # 替换<你的NPM包项目名>为angular.json中对应的项目ID
    - ng test <你的NPM包项目名> --code-coverage --progress false --watch false
  artifacts:
    expose_as: "Pkg Coverage Report"
    paths:
      - coverage/<你的NPM包项目名>/
  tags:
    - kubernetes-runner

# Angular应用单元测试Job
app-unit-tests:
  stage: test
  rules:
    - when: on_success
    # 可选：仅默认分支运行时更新徽章
    # - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  image: trion/ng-cli-karma:$ANGULAR_VERSION
  before_script:
    - *angular-env-setup-script
  coverage: '/Statements \W+: (\d+\.\d+)%.*/'
  script:
    - npm run build:ds-prod
    - npm install dist/ds
    # 替换<你的Angular应用项目名>为angular.json中对应的应用ID
    - ng test <你的Angular应用项目名> --code-coverage --progress false --watch false
  artifacts:
    expose_as: "App Coverage Report"
    paths:
      - coverage/<你的Angular应用项目名>/
  tags:
    - kubernetes-runner

2. 提取覆盖率并更新自定义徽章 #

2.1 准备GitLab访问令牌 #

• 进入项目Settings > Access Tokens，创建带api权限的令牌，命名为GITLAB_BADGE_TOKEN
• 进入项目Settings > CI/CD > Variables，添加该令牌，勾选Mask variable和Protect variable

2.2 在测试Job中添加徽章更新脚本 #

在每个测试Job的script末尾添加提取覆盖率、调用GitLab API更新徽章的命令：

以pkg-unit-tests为例：

script:
  - npm run build:ds-prod
  - npm install dist/ds
  - ng test <你的NPM包项目名> --code-coverage --progress false --watch false
  # 从summary.txt提取覆盖率百分比
  - PKG_COVERAGE=$(grep -Po 'Statements\s+:\s+\K\d+\.\d+' coverage/<你的NPM包项目名>/summary.txt)
  # 替换<你的GitLab域名>和<Pkg徽章ID>
  - |
    curl --request PUT --header "PRIVATE-TOKEN: $GITLAB_BADGE_TOKEN" \
    "https://<你的GitLab域名>/api/v4/projects/$CI_PROJECT_ID/badges/<Pkg徽章ID>" \
    --form "image_url=https://img.shields.io/badge/Pkg%20Coverage-$PKG_COVERAGE%25-brightgreen"

app-unit-tests同理：

script:
  - npm run build:ds-prod
  - npm install dist/ds
  - ng test <你的Angular应用项目名> --code-coverage --progress false --watch false
  - APP_COVERAGE=$(grep -Po 'Statements\s+:\s+\K\d+\.\d+' coverage/<你的Angular应用项目名>/summary.txt)
  # 替换<你的GitLab域名>和<App徽章ID>
  - |
    curl --request PUT --header "PRIVATE-TOKEN: $GITLAB_BADGE_TOKEN" \
    "https://<你的GitLab域名>/api/v4/projects/$CI_PROJECT_ID/badges/<App徽章ID>" \
    --form "image_url=https://img.shields.io/badge/App%20Coverage-$APP_COVERAGE%25-blue"

2.3 创建初始自定义徽章 #

• 进入项目Settings > Badges > New badge：
  • Pkg Coverage：
    • Name: Pkg Coverage
    • Link: 可链接到该项目的覆盖率报告（如https://<你的GitLab域名>/<项目路径>/-/jobs/artifacts/main/browse/coverage/<你的NPM包项目名>?job=pkg-unit-tests）
    • Image URL: 临时填https://img.shields.io/badge/Pkg%20Coverage-0%25-brightgreen，后续流水线会自动更新
  • App Coverage：按同样逻辑创建，Image URL临时填https://img.shields.io/badge/App%20Coverage-0%25-blue
• 创建后，在徽章列表的Edit页面URL中获取徽章ID（如/badges/123/edit中的123）

3. 可选：从coverage-final.json提取覆盖率 #

如果项目未生成summary.txt，可从coverage-final.json提取：

# 提取NPM包覆盖率（保留1位小数）
PKG_COVERAGE=$(jq '.total.statements.pct' coverage/<你的NPM包项目名>/coverage-final.json | awk '{printf "%.1f", $0}')
# 提取应用覆盖率
APP_COVERAGE=$(jq '.total.statements.pct' coverage/<你的Angular应用项目名>/coverage-final.json | awk '{printf "%.1f", $0}')

若镜像无jq，可在before_script中添加安装命令：apt-get update && apt-get install -y jq（Debian系镜像）

内容的提问来源于stack exchange，提问作者ineedtoknow