当前位置:   article > 正文

从零开始vue 测试实践_vue 单元测试覆盖率

vue 单元测试覆盖率

概览

实践目标

单元测试实现:对用户接口进行测试,登录,获取用户信息,更新用户信息, 登出 ,各接口返回200状态码,即判断测试通过

e2e测试实现:自动化运行待测试vue应用,脚本控制登录信息(用户名、密码)的输入过程,完成登录过程

注:本例的vue应用相对简单,登录成功后,将用户信息输出到浏览器界面。


从脚手架开始 ——vue-cli

: unit 选项中默认第一个就是Jest,直接回车键选中。

脚手架后的原始项目,包含一例单元测试脚本HelloWorld.spec.js。但需安装下面的package才能编译运行。

做unit测试,需要安装对vue的包

“Jest 和 Vue Test Utils”:

npm install --save-dev jest @vue/test-utils


安装完成后,跑下:npm run unit 。可以看到表格,覆盖率等全是100%。


开始写unit test 脚本之前

常见问题及解决

CROS跨域问题。这里是因为jsdom模拟了浏览器(包括浏览器的跨域策略)。解决方法见后面

Jest做单元测试时,跨域问题以及会话状态管理的处理办法

a.改变adapter;

b.开发人员手动设置Cookie值;(考虑到本例中使用的是JWT,能够实现)


开始写e2e test 脚本之前

其他需注意的配置项:

注意:e2e测试时,浏览器是由测试脚本自动开启的,而非由开发者手动点开快捷图标。因此通过快捷图标进行的跨域配置无效

chrome 浏览器跨域问题,一般是添加如下参数

--disable-web-security --user-data-dir

到test/e2e/nightwatch.conf.js 文件中(下图所示)


写unit test 脚本

test/unit/user.spec.js 中测试用户更新接口的脚本

describe('user api:update', () => {
var g_done ={};//
var fn1 = function(res){
console.log(res.status)
expect(res.status).toBe(200)
g_done()
}
var fn2 = function(res){
//console.log(res)
g_done.fail;
}
   
   for(let dat in updateDatas)
   {
   let tesdata = updateDatas[dat];//{};
  it('should return 200', (done) => {
       g_done = done;
       fn1.done = done;
      update(tesdata,fn1,fn2,function(){done.fail});
  })
  }
})


测试数据updateDatas定义如下(examples.js)


测试接口update定义如下(user.js)



写e2e test 脚本

api

1:  这是本例子中一个e2e要用到的函数——setValue。用来模拟用户输入框中输入文本的行为。地址:nightwatchjs.org/api#setValue 


2:  这是另一个e2e要用到的函数——click。用来模拟用户点击按钮的行为。地址:nightwatchjs.org/api#setValue 


test/e2e/specs/test.js内容如下: 


var account = require ('./base.js').account

module.exports = {
  'default e2e tests': function (browser) {
    // automatically uses dev Server port from /config.index.js
    // default: http://localhost:8080
    // see nightwatch.conf.js
    const devServer = browser.globals.devServerURL

    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      .assert.elementPresent('input[name="username"]')
    
     
    browser.setValue('input[name="username"]',account.username);
    browser.setValue('input[name="password"]',account.password);
   
    browser.click('#login',function(){
   
    })
 
  }
}

 



运行e2e test 脚本

how:  输入 npm run e2e ,测试工具会自动打开浏览器。执行测试脚本(模拟用户的一系列操作)。 本例中的模拟是,输入用户名、密码,点击登录可以看到登录请求返回的服务器端信息,显示在页面底部

 输入 npm run e2e ,可以看到有输出2个绿色的勾勾。

运行unit test 脚本


how:  输入 npm run unit 。得到如下的测试运行结果。可以看到有非常醒目绿色的pass。证明测试代码运行通过,逻辑符合预期。 还有一个表格,这次不都是100%了。说明覆盖率还可以再高些。


好了,最后附上本例的源码:https://download.csdn.net/download/baidu_34503703/10384962

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/753212?site
推荐阅读
相关标签
  

闽ICP备14008679号