Open ccforward opened 7 years ago
盖楼
说好的桌样大的馒头也不给我寄来。
@xiaowuming 给个地址
都过了这么多年,没诚意,算了。
2017-02-27 12:45 GMT+08:00 cc notifications@github.com:
@xiaowuming https://github.com/xiaowuming 给个地址
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ccforward/cc/issues/58#issuecomment-282627117, or mute the thread https://github.com/notifications/unsubscribe-auth/AD0hbVaYDIpBKXitMxbBybHhJlVyu1Dsks5rglT2gaJpZM4ML7_- .
@xiaowuming 给了地址 绝对诚意满满
我也要。
mark一下,后面刚好要用这个
你好,请问如果只想测试一个文件,要如何操作呢
@fe-hunk 建议你用 .only
函数的方式来单独测试某一个测试用例
Vue.js 项目使用 Karma 做自动化UI测试
环境
安装完 Karma 并自动生成
karma.conf.js
后选用
mocha
作为测试框架chai
作为断言库(添加sino-chai
做扩展)用 Chrome 和 Phantom.js 浏览器
同时测试代码还要用
karma-webpack
打包最后用
spec
和karma-coverage
来报告测试覆盖率因此,需要安装一堆的插件...
配置
karma.conf
重点要在 karma 自动生成的配置文件 karma.conf.js 基础上添加
files
preprocessors
webpack
plugins
完整的 karma.conf.js 文件
files 和 preprocessors
根据 Vue.js 官方提供的 例子
在
karma.conf.js
中files
的配置为files: ['./file.js'],
file.js 中对测试起最核心作用的代码如下:
这里使用webpack的 require.context 来引入子目录
specs
下的所有 .spec.js 文件preprocessors
的配置项为即
file.js
中 require 的文件都需要 webpack 来打包处理完整的 file.js 文件
webpack
上面引入的 webpack.test.conf.js 文件和普通的 webpack 配置没什么差别,除了
entry
之外,output
resolve
各种loader
等等都需要加上.webpack.test.conf.js 文件
plugins
这一项很简单,把需要的插件全写进去
引入组件库
因为 Rubik UI 的引入需要两步
Vue.use(Rubik)
mounted
中初始化:vm.$rubik.init()
因为
init
函数的本质是给body
元素添加 click 或者 touchstar 事件,所以在测试中可以不考虑mounted
钩子,只要存在body
元素即可同时上面配置中的
file.js
文件也会被 webpack 打包后在浏览器中加载,因此 Rubik UI 的初始化就放在了file.js
中Vue 的 Unit Test
关于 Unit Test 官方有文档
在 vm.js 文件中 我们可以建立几个工具函数来生成 Vue 的实例
createComponent
因为很多组件都是
.vue
的单文件组件,所以在测试中可以直接import
进来用createComponent
生成对应的实例挂载到 DOM 上createVM
和
createComponent
很像,可直接传 template 生成更复杂的实例对象,比如通过
createComponent
和createVM
连个函数就可以很灵活的生成.vue
这种单文件组件和自定义标签的组件的 Vue 实例,然后模拟各种操作来执行单元测试回到上面 引入组件库 一节中留下的问题
通过
createVM
生成一个空的 Vue 实例对象 vm 后,vm 就可以直接调用init
方法来注册事件了。因为
init
函数已经挂载 Vue 的原型链上了每一个单独的 Vue 实例对象都能方便调用
init
函数测试
主要就是在
*.spec.js
中写各种测试用例这一点就和组件、业务强相关了,有两点需要注意
Vue.nextTick
的回调中执行setTimeout( _ => { }, interval)
interval 可以根据元素动画的执行时间来调整模拟鼠标、键盘动作的代码也放在了 vm.js文件中
比如 raido 的一个测试用例
在模拟了
click
之后经过 100ms 再执行断言radio.spec.js 详细代码
最后