品质保证：发布覆盖率测试报告

代码覆盖率才是评价一个项目品质的标准。在挑选一个项目的时候，有经验的使用者都会根据代码覆盖率来确定代码的可靠性。

虽然自动化测试工具可以自动验证代码的正确性，但是如果只有部分代码经过了测试，或者只是简单地跑通了代码，也不能说是一个合格的代码。比如组件库只测试一部分的组件，或者每个组件只测试了默认设置。譬如，按钮中某个属性或者某几个属性间的排列组合并没有得到测试，这样的测试还不能保证组件库的功能完全正确。

那么如何来客观评价这个测试的完备程度呢？答案就是代码覆盖率。

覆盖率概念

代码覆盖率（Code coverage）是软件测试中的一种度量指标，描述测试过程中（运行时）被执行的源代码占全部源代码的比例。

覆盖率指标种类

只是简单地做到行级覆盖还远远不够，可以看看下面的例子。

JavaScript

function getName(a, b) {
    if(a && b) {
        return 'Jane'
    }else {
        return 'Tony'
    }
}

以上代码只需要两个 Case，就可以将所有语句都跑一遍：

Case01: a = true ; b = true; 期待：Jane
Case02: a =false ; b= true; 期待：Tony

但是，显然这样测试甚至不能确定代码中 b 是否参与条件判断。比如下面代码可能也会出现相同的结果。

JavaScript

function getName(a, b) {
    if(a) {
        return 'Jane'
    }else {
        return 'Tony'
    }
}

所以假设覆盖率只有简单的代码行覆盖还远远不够。

在软件工程理论中会把覆盖率分为：

语句覆盖（statement coverage）
判定覆盖（decision coverage）
条件覆盖（condition coverage）
条件判定组合覆盖（condition decision coverage）
路径覆盖（path coverage）
多条件覆盖（multi-condition coverage）
修正条件判定覆盖（modified condition / decision coverage）

覆盖深度的提高显然会让代码功能验证更加全面，但是相应的实施成本也会明显提高。

理论的覆盖虽然全面但是实际生产很多指标的指导价值并不是很大。在实际生产中会将它进行简化。

在Javascript语言中，代码覆盖率通常会分为四级覆盖。

Function coverage 函数覆盖 - 每个函数是否被执行；
Line coverage 行覆盖 -- 每行是否被执行；
Statement coverage 语句覆盖 - 每个语句是否被执行；
Branch coverage 分支覆盖 - 每个 if 节点是否都被执行。

这是结合了函数式语言的特点和指标的实用程度的经验之谈，也是 JavaScript 世界比较受认可的标准。

用户故事(UserStory)

为组件库发布覆盖率报告，使测试覆盖率可视化。

任务分解(Task)

生成覆盖率报告；
将覆盖率报告任务加入到 CI；
上传覆盖率展示平台 Codecov；
获取覆盖率徽章。

Istanbul 代码覆盖率工具

代码覆盖率需要专用的工具生成。在 JavaScript 程序中的代码覆盖率通常都是通过 Istanbul 生成的。Istanbul 的来历是伊斯坦布尔的地毯，覆盖率报告其实就是用颜色来表示代码的运行情况，好像给代码铺上了地毯。

我们熟悉的 Jest 和组件库使用的 Vitest 测试框架，都是使用的 Istanbul。Istanbul 的实现原理是通过编译期代码插桩方式实现的。有兴趣的同学可以研究一下。咱们这里面只讲如何使用。

覆盖率原理介绍

生成覆盖率报告

在 Vitest 只需要在命令行中添加参数 --coverage 就可以生成覆盖率报告了。

package.json

Bash

"scripts": {
    "coverage": "vitest run --coverage"
  },

默认报告形式是一个静态网站。

如果想对报告进行进一步调整，可以在 vite.config.ts 中进行。

TypeScript

test: {
    coverage: {
      provider: "istanbul", // or 'c8',
      reporter: ["text", "json", "html"],
    },
  },

我调整的两项是：

指定覆盖率引擎 istanbul；
指定输出格式，默认是没有 json 格式的。这个和后面的覆盖率展示有关，务必要加。

公布覆盖率报告

覆盖率报告放在本地只能给自己的单元测试提供依据，更大的用途在于将覆盖率报告公布展示出来，让使用者可以看到。通常会选用覆盖率展示平台，常用的有 Codecov 和 Coveralls。

Codecov 是一个开源的测试结果展示平台，将测试结果可视化。Github 上许多开源项目都使用了 Codecov 来展示单测结果。Codecov 跟 Travis CI 一样都支持 Github 账号登录，同样会同步 Github 中的项目。

还会自动的生成徽章。这个徽章是会根据报告结果动态变化的，属于客观的第三方数据，具有公信力。

首先需要登录 Codecov 网站。

一定要使用 Github 账号进行登录**，**这样它可以直接读取你的 Github 中的项目。

然后是添加访问授权，如果你的项目在你名下的组织下，也需要访问授权。

这时候你就可以在网站上找到所有 Github 中的项目。选择【Not yet setup 】，选择需要展示覆盖率报告的网站后的【 setup repo】链接，就可以看到安装指南。

它这个安装指南是针对所有语言项目的。这里面我们只需要得到它的上传 Token 就好了。

持续集成自动更新覆盖率报告

覆盖率报告最好能够自动按照最新版本持续更新，而不是自己手动上传。所以这个时候就需要使用 CI 工具来帮忙了。首先需要编写一个 Action。

.github/wokflows/codecov.yml

YAML

# .github/workflows/main.yml
# This is a basic workflow to help you get started with Actions

name: Code Coverage

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  CodeCov:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - uses: actions/checkout@v2
      - uses: pnpm/action-setup@v2.1.0
        with:
          version: 7.2.1
      - name: Install modules
        run: pnpm install
      - name: Run Test Coverage
        run: cd packages/smarty-ui-vite && pnpm coverage
      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v3
        with:
          directory: packages/smarty-ui-vite/coverage
          token: ${{ secrets.CODECOV_TOKEN }}

上传报告环节同样使用现成的 Action 。这里面需要添加 Token，把上面 codecov 安装指南中得到的 Token 放入 Secrets 中。

提交代码就可以自动生成覆盖率报告了。

Codecov Action 会自动识别语言与测试框架的覆盖率报告种类，然后上传相应的数据。这里面要特别说明，对于 Vitest ，是上传的 json 格式的报告，所以需要确定你确实生成了 json 报告。如何生成可以看上文介绍。

添加覆盖率徽章

最后就是富有仪式感的一步。Codecov 网站可以将测试结果生成为徽章。你可以把徽章直接放到 Github 中展示出来。

在项目的【 Settings 】中找到对应的徽章。

复盘

这节课的主要内容是介绍覆盖率概念和发布测试覆盖率报告。

覆盖率报告是项目品质的重要指标，成熟的项目都会把项目展示在显眼的位置，大家通常都会拿代码覆盖率指标评价开源代码的成熟度。当然过高的覆盖率也会带来成本的提高，和拉低项目进步速率。

品质、进度、成本是每一个项目管理中都需要均衡的东西。所以一味追求代码覆盖率也未必是好事。这个大家要客观看待。

最后留一些思考题帮助大家复习，也欢迎在留言区讨论。

分支覆盖和行覆盖间的关系？
如何用 Codecov 完成覆盖率展示？

下节课，我们将给大家讲解如何使用 PullRequest，下节课见。

品质保证：发布覆盖率测试报告 ​

覆盖率概念 ​

覆盖率指标种类 ​

用户故事(UserStory) ​

任务分解(Task) ​

Istanbul 代码覆盖率工具 ​

生成覆盖率报告 ​

公布覆盖率报告 ​

持续集成自动更新覆盖率报告 ​

添加覆盖率徽章 ​

复盘 ​