在前端开发中，文档生成工具是必不可少的。而 ESDoc 是一个非常优秀的 JavaScript 文档生成器，它不仅可以生成 API 文档，还能生成 Class Diagram、Sequence Diagram 等各种图表。但是 ESDoc 默认不能集成测试覆盖率报告，这对于测试驱动开发(TDD)来说显得有些不方便。好在社区有人写了一个插件 esdoc-integrate-test-plugin，用于将测试覆盖率数据与 ESDoc 生成的文档集成。
本文将介绍如何使用 esdoc-integrate-test-plugin，在集成测试覆盖率和文档生成过程中，提高团队的协作和效率。
安装和配置
首先，需要安装 ESDoc 和 esdoc-integrate-test-plugin：
npm install --save-dev esdoc esdoc-integrate-test-plugin
然后，在项目根目录下创建 .esdoc.json 文件，并添加以下配置：
{ "source": "./src", "destination": "./docs", "plugins": [ {"name": "esdoc-standard-plugin"}, {"name": "esdoc-integrate-test-plugin", "option": {"coverageDir": "./coverage"}} ] }
在这个配置中，我们添加了两个插件：esdoc-standard-plugin 用来生成标准的文档信息，esdoc-integrate-test-plugin 用来集成测试覆盖率数据，并在文档中显示。
其中，coverageDir 是测试覆盖率数据的存放路径。你需要根据自己项目测试工具的配置，设置正确的路径。
生成文档和测试报告
配置完成后，就可以通过运行 ESDoc 命令来生成文档了：
./node_modules/.bin/esdoc -c .esdoc.json
运行成功后，文档会被生成到 ./docs 目录下。
此时我们还需要生成测试覆盖率数据，推荐使用 istanbul 工具。打开项目的 package.json 文件，在 scripts 字段中添加以下命令：
{ "scripts": { "test": "jest --coverage", "coverage": "istanbul report --root coverage/json html" } }
这里以 jest 为例，其他测试工具也可以使用对应的命令生成测试覆盖率数据。运行以下命令：
npm run test // 运行测试并生成测试覆盖率数据 npm run coverage // 生成测试覆盖率报告
运行成功后，测试覆盖率报告将会被生成到 ./coverage/html 目录下。
集成测试覆盖率数据
测试覆盖率数据和文档已经生成，现在我们需要将测试覆盖率数据集成到文档中。打开 ./docs/index.html 文件，找到 <body> 标签下的 esdoc-container 标签，添加以下代码：
-- -------------------- ---- ------- -------- --- ------------ - --------------------------------------------- ----------------------------------------------- - -- ----------- --- ---------- -- ---------- --- ------- -- ---------- --- ----------- - --- ---- - ----------------------------- -------- --- ------- - ---------------------------------- ------ - ---- - ------ -- ---------- ------- --- ---- - ------------------------------------ --- -------- - ------------------- -- ----------- ------- --- ------------- - ------ ------------- ------------------------ ----- ------------ ---- ---------- ---------- - ---- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
