从零开始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