NutUI 3.0 中单元测试的探索和实践

发表于:2020-3-11 13:36

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:宋成林    来源:京东设计中心

 
  同时,在项目根目录,会自动创建 coverage 文件夹,里面有生成测试覆盖率报告文件 (Icov.info+html)。
  
  接下来我们还要介绍一下持续集成服务
  持续集成服务
  持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期之后,再将新代码集成到主干, 有助于提高项目质量。通过持续集成可以自动编译、打包、签名项目,配合单元测试可以实现持续集成+自动化测试。我们的项目维护在 Github 上。Github 有个好朋友 Travis CI,是一个在线托管的分布式持续集成服务,我们可以用它来构建并测试托管在 Github 上的软件项目。你可以轻松用 Travis CI 同步你的 Github 项目,并且你可以在几分钟内就能测试你的项目。
  值得注意的是,Travis CI 分为免费和自费的,对于我们 Github 上的开源项目,直接可以用免费的,访问 免费版 即可。
  下面来看一下怎么让自己的 Github 项目用 Travis CI 测试。
  首先,访问 Travis CI 并使用项目的 Github 账户登录。
  登录之后,代表你的 Github 对 Travis 进行了授权,Travis 可以访问你的 Github 上所有代码仓库。选择需要 Travis CI 帮你持续集成的仓库,点击右侧的激活开关即可。这样Travis CI 就会帮你监听这个仓库的所有变化自动构建,完成预定的操作。
  接下来,我们需要在我们代码仓库的根目录添加一个 .travis.yml 文件,来告诉 Travis CI 定义预定的命令,它会告诉 Travis CI 做什么,怎么做。配置如下内容,可按需更改:
sudo: required
language: node_js
node_js:
- '8'
script:
- npm test
- npm run coveralls
  Travis 的运行流程很简单,包含两个阶段:install(安装依赖)和 script(执行脚本)。对于 Node 项目来说,install 和 script 阶段都有默认脚本,如不需要修改,可以省略不写。
  了解一下参数的含义:
  – sudo: required 表示需要 sudo 权限。
  – language: 指定了项目的语言,node_js 指定运行环境为 Node 。
  – node_js: 指定 Node 版本,可指定多个。
  – install: 安装依赖,用来指定安装脚本,的默认脚本是 npm install
  – script: 用来指定构建或测试脚本, 默认脚本 npm test。
  还有很多参数,我就不一一列举了,具体可以查看官网配置
  完成上面的操作后,push 这个这个文件到你的 Github 仓库。之后每次往 Github 的该仓库 push 代码,Travis 就会去找这个文件,执行配置好的预定义指令了。
 
  这里可以看到运行结果,可点击查看构建过程的详细信息。如运行有误,会有如下提示,我们要知道,script构建阶段只要有一个失败,状态就会显示失败。
 
  以上就是简单的 Travis CI 和 Github 项目的关联过程。
  Travis CI 确实很给力,如果想在 Github 项目中直接看到 CI 结果徽标,只需要点击该图标,选择 markdown,然后将 result 文本框内容复制到 Github 上的 README.md 文件中即可。
  
  Coveralls自动测试代码覆盖率
  最后,我们想要生成一份代码覆盖率的报告,这里需要使用 Coveralls。Coveralls 支持 Github 上的项目,也可以与 Travis CI集成。
  访问 https://coveralls.io/,使用 Github 账号登录,之后点击上面的 Add Repo,接着将按钮置为 ON 状态
  
  点击右边 detail,点击 detials 进入详细配置页面,页面右侧,获取该项目的 token,根据自己的环境类型编辑相应配置文件
  在根目录下添加 .coverall.yml 文件,并添加下面内容:
service_name: travis-ci
repo_token: bOzghLfr6hi9x**************56vdl1YG
  给 Coveralls 上传的测试报告需要有统一的 lcov 格式,上文中我们有对 nyc 进行配置,在根目录 coverage 文件夹中生成 lcov.info
  在 package.json 文件的 scripts 字段添加下面这行命令
"coveralls": "cat ./coverage/lcov.info | coveralls",
  push 代码到Github仓库。
  同样,我们可以获取一个测试覆盖率的徽标,进入刚才的详情配置页。点击按钮复制 markdown 内容到 Github 上的 README.md 文件中即可。
 
  总结
  单元测试功能已集成在由我们团队开发的 NUTUI 组件库 上面进行实践,NutUI 是一套京东风格的移动端Vue组件库,开发和服务于移动 Web 界面的企业级前中后台产品。通过 NutUI,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于京东的各个移动端业务中。后期我们会对整个 NutUI 系统架构进行革新,将整个组件库构建工具抽离出,采用 WebPack Node API构建,对编译做出更细粒度的控制,同时加大对编译配置的优化调整,大幅提高性能和减少打包文件体积,提供独立构建的 NutUI-CLI。单元测试的功能也保证了组件的规范化,减少错误。欢迎各位使用,如在使用中有任何问题,我们也会及时反馈跟进。流年笑掷,未来可期~

本文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
22/2<12
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号