基于mocha、should.js、karma、travis ci实现前端自动化持续测试

前颜(yan)

首先你觉得测试重要吗?为什么重要?

这里举个例子,假如你写了一个逻辑稍微比较复杂的函数,这个函数被很多地方调用到,那么当过了N多天之后,你可能快要忘记这里面的逻辑了,此时你可能出于某种原因需要为这个函数增加一些功能,修改这个函数的代码,那么你要怎么做才能做到修改后不影响其他的调用者呢,或者说,你要怎么做,才能快速的知道哪些地方受影响,哪些地方不受影响呢?

很明显,答案就是:跑测试用例

对于单元测试,我能想到的好处有:

  • 改进代码设计,提高代码质量:单元测试会强制你对代码进行合理的设计,解耦,写出可测试的代码

  • 允许重构,你可以放心的对代码进行修改,因为你有测试用例来确保你的代码能够按符合预期要求

  • 快速定位bug

既然单元测试这么重要,那么就应该好好重视起来。

前端测试框架和库

目前前端测试框架和库主要有assertshould.jsexpectchaimochajasminekarma以及travis ci等等。

其中assert、should.js、expect、chai属于断言库,实现对js代码进行断言测试。

​而mocha、jasmine属于测试框架,测试框架通过使用断言库对js代码进行测试,生成测试报告,除此之外,测试框架还提供了各种生命周期。

​karma则属于测试工具,能够模拟各种环境来运行你的测试代码,比如Chrome,Firefox,mobile等等。

​重点要介绍的是travis ci,是一个远程免费的持续集成(CI)服务,你可以通过配置绑定你github上的项目,并且配置运行环境,实现只要github上有代码更新,travis就会自动运行构建和测试,并反馈运行结果。

​下面对不同断言库进行简单的介绍:

​断言库(主要实现对代码进行测试)

  • assert :TDD风格断言,是nodejs的一个断言测试模块,提供的api不是很多

    assert.equal(foo, 'foo');
    
  • should.jd:BDD风格断言库,should相对于assert有比较丰富的api,并且其语法非常的语义化

    foo.should.be();  
    bar.should.have();
    foo.should.bot.be();
    
  • expect:BDD风格断言,语法和should.js类似

    expect(foo).to.be();
    expect(foo).to.eql();
    expect(foo).to.be.a();
    expect(foo).not.to.be.an();
    
  • chai:支持BDD/TDD双模式,同时支持should/expect/assert三种风格的断言库,还有强大的插件机制

    should
    chai.should();
    foo.should.be.a('string');
    
    expect
    var expect = chai.expect;
    expect(foo).to.be.a('string');
    
    assert
    var assert = chai.assert;
    assert.typeOf(foo, 'string');
    

接下来,我将使用mocha、should.js、karma、travis ci实现几个前端js自动化持续测试的demo。大家可以克隆相应的代码下来对应着看,由于篇幅有限,下面只讲关键点。

demo1(mocha+should.js)

特点:直接使用mocha和should.js来跑测试用例。

代码地址:https://github.com/SimpleCodeCX/myCode/tree/master/test/demo1

关键点说明:

1 下载相关依赖(mocha和should.js)

npm instal -g mocha (全局)
npm install --save-dev should

2 添加主功能(待测试)代码

#src/main.js
function add(x, y) {
  return x + y;
}
module.exports = add;

3 添加测试用例

#test/test.js
var add = require('../src/main')

describe('add', function () {
  it('8 + 8 = 16', function () {
    add(8, 8).should.equal(16);
  })
})

4 配置mocha.opts

#test/mocha.opts
--require should

关于mocha.opts的更多配置(代替命令行参数):https://mochajs.org/#mochaopts

5 运行

mocha

输出测试结果

>mocha
add
    √ 8 + 8 = 16


  1 passing (10ms)

demo2(mocha+should.js+karma)

特点:

  • 通过karma调用mocha测试框架来进行代码测试
  • 优点在于karma能模拟浏览器比如Chrome、Firefox来运行测试代码

代码地址:https://github.com/SimpleCodeCX/myCode/tree/master/test/demo2

关键点说明:

1 下载相关依赖(mocha、should.js和karma)

npm install --save-dev mocha(demo1使用的是全局mocha,这里是karma调用mocha)
npm install --save-dev should
npm install --save-dev karma
npm install --save-dev karma-chrome-launcher
npm install --save-dev karma-mocha

2 添加主功能(待测试)代码

#src/main.js(注意和demo1的区别)

function add(x, y) {
  return x + y;
}

3 添加测试用例

#test/test.js(注意和demo1的区别)

describe('add', function () {
  it('8 + 8 = 16', function () {
    add(8, 8).should.equal(16);
  })
})

4 配置karma(karma.conf.js)

运行 karma init,按提示操作。

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> test/**/*.js
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "...\demo2\karma.conf.js".

然后在karma.conf.js中的files添加相关的依赖模块:

 files: [
      'node_modules/should/should.js',
      'test/**/*.js',
      'src/**/*.js'
    ]

关于karma的更多配置:http://karma-runner.github.io/3.0/config/configuration-file.html

5 运行

karma start

karma会运行chrome浏览器,并且输出测试结果

>karma start
08 11 2018 21:01:34.765:WARN [karma]: No captured browser, open http://localhost:9876/
08 11 2018 21:01:34.775:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
08 11 2018 21:01:34.775:INFO [launcher]: Launching browser Chrome with unlimited concurrency
08 11 2018 21:01:34.785:INFO [launcher]: Starting browser Chrome
08 11 2018 21:01:37.456:INFO [Chrome 70.0.3538 (Windows 7.0.0)]: Connected on socket h9aSRbkdzZNTgb2dAAAA with id 46125810
Chrome 70.0.3538 (Windows 7.0.0): Executed 1 of 1 SUCCESS (0.007 secs / 0.002 secs)

demo3(mocha+should.js+karma+travis)

代码地址:https://github.com/SimpleCodeCX/myCode/tree/master/test/demo3

1 复制demo2的工程作为demo3

2 在github上创建一个新工程demo3,并关联本地仓库

git remote add origin git@github.com:SimpleCodeCX/demo3.git

3 使用github账号登录travis官网,同步并激活监听github上的demo3项目

参考文章:
http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html

4 配置travis(.travis.yml)

在demo3的根目录下新建.travis.yml文件,并做如下配置:

language: node_js
node_js:
  - "8"
script: karma start --single-run
before_install:
  - npm install
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

5 提交到远程仓库上

git add . 
git commit -m 'add travis ci'
git push origin master

6 此时可以在travis上查看测试反馈


travis.jpg

有关travis的配置文档:https://docs.travis-ci.com/user/languages/javascript-with-nodejs/

参考文档:
https://nodejs.org/api/assert.html
https://github.com/shouldjs/should.js
https://github.com/Automattic/expect.js
https://www.chaijs.com
https://mochajs.org
https://jasmine.github.io
http://karma-runner.github.io
https://docs.travis-ci.com/user/languages/javascript-with-nodejs

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容