专栏首页用户6517667的专栏前端测试驱动开发模式(TDD)快速入门

前端测试驱动开发模式(TDD)快速入门

来源:http://www.ltesting.net

测试驱动开发(Test-Driven Development)是一种软件开发的思维和方法,我的理解是它是一种开发的循环,先写测试代码,再用最小的代码实现这个测试,再继续写测试代码,继续用最小的代码实现。当实现所有的测试用例,代码也就完成了。

最近也在实践Tdd开发,和之前先开发,再自测的方向不同,这次的开发顺序是, 文档--->测试用例--->代码--->测试通过--->下一个测试用例。这样做有以下优缺点:

优点

  • 在开始可以比较明确自己要做什么,把错误暴露在整个开发流程比较靠前的位置,修改的成本也比较小
  • 在之后对代码优化的过程中,因为有测试代码的存在,可以更好的优化代码,优化完之后再执行一遍代码,而不用担心优化过程中又出错
  • 通过测试代码,可以帮助理清楚程序中关键点
  • 也更有利于之后的维护

缺点

  • 加上测试的代码,会适当增加一些工作量
  • 可能会测的不全面

总体来说,如果对一些基数设施的建设,比如基础组件等,需要长期维护的项目,Tdd的应用,还是利大于弊。

前端TDD开发环境的搭建

如果想应用Tdd的方法到前端的开发中,主要用到以下几个工具(工具的用法在后面介绍):

mocha.js

mocha 主要提供了describe的语法,用来描述测试用例,并且把执行测试后的结果清楚的返回到终端上。

官网:mochajs.org

github: github.com/mochajs/moc…

chai.js

chai 主要提供了断言函数assert,用来断言和比较测试的结果和代码执行的结果。

官网:www.chaijs.com/

github: github.com/chaijs/chai

assert库方法文档: www.chaijs.com/api/assert/…

sinon.js

sinon 主要用来mock一些东西,比如可以用sinon mock一个假的函数,sinon也可以返回这个函数执行与否。

官网:sinonjs.org

github: github.com/sinonjs/

基础环境搭建

先npm init生成一个项目。 再执行以下安装语句:

npm install sinon moncha chai sinon-chai --save-dev
复制代码

建立一个test文件夹,可以把写测试用例的Js放在这个文件夹中, 为了可以方便执行单元测试,可以加一个npm scripts,在package.json的scripts中加入如下语句,表示使用mocha去执行test文件夹下的js测试:

"scripts":{
  "test": "mocha test/**/*.js"
}
复制代码

在test中建立一个js文件,在文件的中引入这些工具,为了连接sinon 和 chai,要使用到sinon-chai

const chai = require("chai")
const sinon = require("sinon")
const sinonChai = require("sinon-chai")
chai.use(sinonChai)
const assert = chai.assert // 从chai中引出assert
复制代码

如何实施TDD

如何写一个单元测试

首先我们看一个简单的单元测试代码:

describe('测试navigateTo方法', ()=>{
  it("new router后存在navigateTo方法", ()=>{
    let newRouter = new VictRouter()
    assert.isFunction(newRouter.navigateTo)
  })
})
复制代码
  • describe()表示测试的一个大范围,第一个参数是范围的名字,第二个是一个回调函数,其中可以放单元测试代码
  • it()里写单元测试的代码,第一个参数还是这个测试的名字,第二个回调函数中放入单元测试代码
  • assert 就是断言代码执行后的结果是什么,比如这个例子中,因为要测试"实例化后存在navigateTo方法",就断言new之后的实例包含navigateTo这个函数,所以用到了assert的isFunction的方法
  • 写完之后运行npm run test, 就能看到测试的运行结果了,如果没有报错就是测试成功了

如何写多个单元测试代码:

直接在describe中加入多个it函数即可:

describe('测试navigateTo方法',()=>{
    it(`new router 后存在navigateTo方法`, ()=> {
      let newRouter = new VictRouter()
      assert.isFunction(newRouter[key])
    })
  it(`navigateTo的入参类型必须为object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')}
    assert.throws(badFn, 'this.commonDirectFn is not a function')
  })
})
复制代码

npm run test之后可以执行所有的测试

一般的测试思路

  • 可以先从最简单的开始测试,比如存在某个方法,入参的类型等等
  • 最好是先写测试用例,再写业务代码
  • 用尽量小的成本实现测试

善用throw抛出错误

在执行的代码中,特别在开始一些对入参的判断的代码,可以使用throw出错误,再用assert捕获这个错误,这样可以比较方便的测试入参是否符合预期。但是使用assert.throws的时候,要用一个函数包装要测试的代码:

it(`navigateTo的入参类型必须为object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')} // 这里用一个函数包装
    assert.throws(badFn, 'this.commonDirectFn is not a function') // 再把包装后的函数传入throws
  })
复制代码

使用sinon模拟函数

如果需要模拟一个函数,可以用sinon去模拟,使用方法:sinon.fake(),并且课已通过这个sinon的called方法判断函数是否被执行。

let fn = sinon.fake() //生成一个模拟函数
assert(fn.called) //断言这个函数是否被执行
复制代码

小结

本文只是对Tdd的一个简单介绍,适用于快速入门。mocha,chai,sinon的一些高级的用法,还需要通过实践去学习。 另,本文只是对但纯js的测试,react,vue和小程序都有他们自己的ui测试的方案。 想通过本文,让大家可以简单了解Tdd,并且学到一种新的思路去写代码。

星云测试

http://www.teststars.cc

奇林软件

http://www.kylinpet.com

联合通测

http://www.quicktesting.net

本文分享自微信公众号 - 软件测试培训(iTestTrain),作者:软件测试培训

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 省掉 1/3 的回归测试:Facebook 用机器学习自动选择测试策略

    顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscr...

    小老鼠
  • 给你一个网站,你如何测试?

      一般包括以下几个部分:功能性测试;界面测试;性能测试;数据库测试;安全性测试;兼容性测试

    小老鼠
  • 测试报告如何编写?

    作为一个曾经是测试萌新的我,在首次接收到一个任务时总有一种忐忑慌张激动紧张期望的复杂情绪~~忐忑慌张紧张是怕自己做不好,得不到领导的赏识;激动期望是哇塞,我有任...

    小老鼠
  • Git 回滚代码的正确姿势 git revert 和 git reset 的区别

    BY
  • Git 命令行教程及实例教程

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

    用户2965908
  • HelloGitHub 一个分享 GitHub 上有趣、入门级的开源项目

    GitHub是通过Git进行版本控制的软件源代码托管服务平台,GitHub的最大亮点就是开源。它也是全球程序员的交流平台。网站提供了一系列社交网络具有的功能,例...

    不安分的猿人
  • 实战 | Elasticsearch实现类Google高级检索

    少废话,说正事。 一、高级检索的功能点 通过高级搜索配置搜索项,能更准确的过滤掉不相干信息,获取最想要的检索信息。 以Google搜索为例(截取核心片段):...

    用户1390885
  • CentOS7.3下安装MySql5.7 和 5.6

    以下为5.6 https://www.cnblogs.com/renjidong/p/7047396.html 安装pdo_mysql 找到教程之后执行...

    柴银磊
  • github二次提交本地新项目 原

    晓歌
  • git相关操作

    皇上得了花柳病

扫码关注云+社区

领取腾讯云代金券