4.7 KiB
测试
本文档介绍项目测试流程，每次开发完新的功能或者修复bug，团队成员务必养成完善测试用例的习惯，并且保证在本地运行所有测试用例都能通过，再去提交PR。目前项目已经集成了单元测试和 E2E 测试，并且已经添加到CI流程里面，CI流程的工作流会帮我们做最后的检查。
单元测试
单元测试是一个项目最基础的测试，也是一个项目质量保证的第一关，所以确保一定的单元测试覆盖率还是很重要的。我们项目的单元测试使用了业界内比较受欢迎的 jest ，文档完善，生态发展也不错，也比较适合来写单元测试。
目录介绍
目前我们的单元测试放在根目录下的 test 目录，下面是具体的目录介绍：
- helpers 用来存放配合测试的一些 utils；
- setup 用来引入一些更加方便我们测试的
jest库，比如在这里我们就引入了jest-dom来配合我们测试 HTML 相关的部分； - unit 主要用来存放所有单元测试文件，里面就基本按我们项目核心代码的目录结构存放对应的单元测试，比如 editor 目录就是存放编辑器相关的测试文件，以此类推。
可以看到，单元测试目录结构职责还是比较分明，unit下的测试文件基本是跟项目核心代码的结构保持一致的，这样也让我可以很清晰地定位到相关功能的测试文件。
编写测试
可以根据你需要测试的功能选择对应的目录创建测试文件，目前的目录结构基本满足了编辑器所有功能了。如果之前没有写过或者学习过单元测试的同学，可以先去 jest 官网先进行一定的学习，再加入到单元测试中来。
运行测试
在我们的 package.json 配置了相关的单元测试运行的命令，你只要运行 npm run test 即可运行所有的单元测试文件。如果想查看单元测试的覆盖率，可以运行 npm run test-c 命令。
E2E测试
为了更好的保证项目的质量，我们添加了自动化的 E2E 测试流程，目前已经覆盖了几乎所有的基本菜单功能，当然一些比较复杂的交互或者功能暂时没有覆盖到，后续我们会慢慢完善，也欢迎大家来帮我们完善。
技术方案
综合对比了各种业界开源的 E2E 框架，我们选择了 Cypress 作为我们的 E2E 测试框架，它开箱即用、API简单、强大的 debug 能力吸引了我们，直接将测试用例运行在浏览器中的架构也更加符合我们的富文本场景，比较适合我们团队。
安装
如果你的项目之前没有安装过 Cypress ，可以直接运行命令：
npm install cypress -g --registry=https://registry.npm.taobao.org
部分的系统有概率安装后，提示找不到 Cypress 的 app 程序，如果运行测试的时候还有报错，根据报错信息指导，使用 npx cypress install 再安装一次。由于 Cypress 依赖比较多，安装有点慢，请耐心等待安装完成。
E2E目录介绍
所有的 E2E 相关测试都放在根目录下的 cypress 中，它下面有如下目录：
- fixtures 目录，主要用来存放一些 mock 数据，我们暂时还没用到；
- integration 目录，存放所有的测试文件；
- plugins 目录，用来引入
cypress插件； - support 目录，用来引入自定义命令，或者引入一些想要在每个测试用例运行之前运行的脚本。
编写测试
上面介绍目录提到过，所有测试文件都放在 cypress 下的 integration 目录下，下面目前还有一个 menus 目录，所有菜单功能相关的测试放在此目录下，如果需要添加菜单相关的测试，可以直接在此目录下创建测试文件，其它的非菜单功能可以视情况创建新目录或者直接放在当前目录。团队新成员或者其它成员，如果还没有阅读团队内部语雀上的 E2E测试开发指南，请务必先去阅读该文档，并对 Cypress 进行一定的学习，再加入到写测试的流程中来。
运行测试
目前运行测试有两种方式，一种是通过 npm run cyress:open，这种方式会帮我们启动 cypress 的桌面工具，让我们更加方便地管理我们的测试文件和进行一些简单运行测试时的设置，在我们写测试的过程中也比较适合用这种方式，可以让我们便捷地 debug 一些出错的测试用例。另外一种则是 npm run cypress:run，更加适合用于跑在 CI 中，或者说当你不需要对测试进行修改，只是单纯地想要运行一下 E2E 测试，看下功能是否有问题，也可以使用这种方式。