前端动手开始试着写单元测试

单元测试分为 TDD(测试驱动开发)和 BDD(行为驱动开发)两种类型
两者的区别是驱动者、主导者不同

断言库

node是内置断言模块assert的,也有一些其他的断言库,如should.js expect.js

下面是assert, should.js, expect.js的一些写法

let a = 10, obj = {a: '1'}
// assert
assert.equal(a, 10, 'a != 10啊老铁')

// should.js
a.should.equal(10, 'a != 10啊老铁')
should(a).equal(10, 'a != 10啊老铁')
obj.should.have.key('a').be.a.Number()

// expect.js
expect(a).to.equal(10, 'a != 10啊老铁')
expect(obj).to.have.property('a').to.be.a('number')

断言库各有优缺点,可根据实际情况,选择使用哪种断言

测试框架

Mocha

Mocha是一个能够运行在Node和浏览器中的多功能的js测试框架

首先在我们测试的项目中安装Mocha
npm i mocha -D

然后在我们的项目中新建一个test文件夹,Mocha会自动检索这个目录下的测试文件并运行。

test/hello-test.js

const should = require('should')
let a = 10
describe('it is test', function() {
  it('a should equal 10', () => {
    should(a).equal(10, 'a != 10啊老铁')
  });
  it('a should equal 11', () => {
    should(a).equal(11, 'a != 11啊老铁')
  });
})

在控制台中输入mocha,即可看到运行结果

it is test
  ✓ a should equal 10
  1) a should equal 11


1 passing (11ms)
1 failing

1) it is test a should equal 11:

    AssertionError: a != 11啊老铁
    + expected - actual

    -10
    +11

describe用来描述你要测的主体是什么,可以多层嵌套
it 描述具体的一条测试用例的内容

Karma

Karma是个将我们的测试用例跑在浏览器上的框架

karma的使用

首先安装karma
npm i -g karma-cli
npm i --save-dev karma

然后在测试项目里输入karma init来初始化karma项目

$ karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
// 是选择你所用的测试框架 这里我们选择mocha(按tab健切换至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
// 是否在测试项目里使用require.js, 这里我们选择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
// 默认打开的浏览器,选择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.
// 哪些是需要引入的文件,这里除了本地文件,也可以引入cdn文件,和听过npm安装在依赖包里的文件,比如https://cdn.bootcss.com/jquery/2.2.4/jquery.js   node_modules/should/should.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
// 是否watch所有的文件
Config file generated at "/mocha_lean/karma.conf.js".
// 会生成karma.conf.js在测试的项目里,刚才所有的选项都可以在这里就行修改

在命令行中输入 karma start就会起一个端口默认为9876的服务,并且自动打开chrome,命令行中也出现了测试结果

09 11 2018 20:03:53.283:WARN [karma]: No captured browser, open http://localhost:9876/
09 11 2018 20:03:53.312:INFO [karma-server]: Karma v3.1.1 server started at http://0.0.0.0:9876/
09 11 2018 20:03:53.312:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
09 11 2018 20:03:53.320:INFO [launcher]: Starting browser Chrome
09 11 2018 20:03:56.367:INFO [Chrome 70.0.3538 (Mac OS X 10.14.0)]: Connected on socket gUMQo5IzqR60ZdIVAAAA with id 35123873

如何在浏览器中查看当前运行的测试结果呢?

http://localhost:9876页面的右上角有一个debug按钮,点开后,在打开的页面中打开控制台,测试结果会输出在控制台中

karma.conf.js的内容
// Karma configuration
// Generated on Fri Nov 09 2018 19:57:45 GMT+0800 (CST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '', //基础路径


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],//测试框架


    // list of files / patterns to load in the browser
    files: [ //引入的文件,这里的文件会被karma以标签移入到html中,所以需要注意文件的顺序
      'test/hello-test.js',
      'https://cdn.bootcss.com/jquery/2.2.4/jquery.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876, //端口号


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false, // 持续集成模式 如果该值为true,karma将会启动和捕获配置的浏览器,运行测试然后退出 这里需要注意的是如果配置了travis-ci的话,需要设置为true,不然travis-ci会一直跑下去,没法自动结束

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

框架适配器(framework adapters)比如:Karma-mocha, Karma-chai ,reporters 比如 Karma-spec-reporter (后面我们还会介绍 Karma-coverage),以及预处理器,比如 Karma-webpack, Karma-sourcemap-loader,还有加载器(launchers),比如 Karma-chrome-launcher,都是作为 Karma 插件工作的。

针对这些 Karma 插件 我们都要安装对应的 npm 包,这些插件一般是以 karma- 开头,而 Karma 默认会自动加载 karma- 开头的 npm 包。因此我们没有在配置文件中明确指定 plugins 配置项(实际上它的默认配置项为 karma-*),但是一定要记得安装相应的 npm 包,特别是框架适配器和加载器,框架指定 Mocha 就要安装 Karma-mocha,浏览器指定 Chrome ,就要安装 Karma-chrome-launcher。

更多karma.conf.js的配置

Travis CI

Travis CI 提供的是持续集成服务 它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。

首先我们需要进入Travis CI官网
用我们的github账号登录,并将我们github上的一个项目关联到travis-ci上,并加以配置

之后在我们的项目的根目录下新建一个.travis.yml文件,这是配置文件,指定了 Travis 的行为。之后我们每次向github提交代码时都会在travis-ci中跑一遍我们的测试脚本

Travis 提供了7个钩子。

before_install:install 阶段之前执行
before_script:script 阶段之前执行
after_failure:script 阶段失败时执行
after_success:script 阶段成功时执行
before_deploy:deploy 步骤之前执行
after_deploy:deploy 步骤之后执行
after_script:script 阶段之后执行

.travis.yml文件

language: node_js // 指定运行的语言
script: npm run test // 所需要跑的script命令, 如果不需要运行,可设置为true
# 缓存 node_modules 文件夹,不需要每次都下载安装全部 npm 包。
cache:
  directories:
    - node_modules
# 指定 node 版本
node_js:
  - "11"
os: osx // 指定跑的测试脚本的环境
before_install: //在运行之前所需要运行的脚本,这里是安装karma-cli
- npm install karma-cli -g
// 可能会报没有chrome的错,需要加这两条命令
sudo: required 
addons:
  chrome: stable
// 如果travis-ci测试脚本一直跑,无法终结,可以通过配置karma的singleRun为true即可解决

配置好后把项目代码提交至github上,就可以去Travis CI官网查看是否运行通过了。
Travis-CI 还可以做很多事情,想要了解更多有关 Travis-CI 的使用方式,可以自行去 Travis-CI 官网 查看文档。我们只是使用了它的自动化测试的功能

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

推荐阅读更多精彩内容