前端单元测试以及自动化构建入门

44次阅读

共计 4015 个字符,预计需要花费 11 分钟才能阅读完成。

写在开头
本文涉及的知识点会比较广,所以每个知识点不会很深入,都有有对象的资料和 demo, 需要读者自己查漏补缺。学习最好的方法就是自己动手查阅资料的过程。希望这篇文章能够帮助到你。
所涉及的知识

Node assert
mocha
should.js
karma
Travis CI

先了解两个知识点
TDD
测试驱动开发是敏捷开发中的一箱核心实践和技术,也是一种设计方法论。在开发项目之前,先编写单元测试用例,基本思路是通过测试用例来推动整个项目开发,但也不仅仅只是单纯的测试工作,我们依然可以在整个项目的需求分析、设计以及质量控制中灵活运用。
BDD
行为驱动其实在测试驱动开发上面的拓展,是着眼于想要实现的业务行为,核心是设计,并引导整个团队更好的前进。
Node assert 的 api 大家自己看一下,还是掌握其中几个经常用到的,比如 assert.strictEqual、assert.fail 以及 assert.throws
简单讲一下 mocha

mocha 是个测试框架工具,浏览器和 Node 环境都可以运行。mocha 的官网文档写的真的是,阅读起来实在太痛苦了,可能作者喜欢这种流水式的写法。
先来看一个简单的例子,一下代码的运行环境需求 node, 还需要全局安装 mocha。具体代码可以查看我的 github 里的 exercise1
var assert = require(‘assert’)

describe(‘#indexOf()’, function () {
it(‘should return -1 when the value is not present’, function () {
assert.equal(-1, [1, 2, 3].indexOf(4))
})
})
上面是其中一个测试用例,它可以单独执行,先引入一个断言库 asset,断言库还有很多,比如 chai;
基本写法就一个 describe 块包含至少一个 it 块。
describe 块被称为 ” 测试套件 ”(test suite), 表示一组单元测试。第一个参数用来编写描述用例的功能和结果,第二个参数实际执行的函数。
it 块被称为 ” 测试用例 ”(test case), 表示一个单独的测试,第一个参数是测试用例的名称,第二个参数是一个实际执行的函数。
mocha 基本用法在控制台通过一下语法运行脚本
mocha test/test.js
就会得到如下结果:
mocha 命令后面可以紧跟多个测试脚本的路径
mocha url1 url2 url3
mocha 也有属于自己生命周期, 看取名基本就明白意思了。
describe(‘hooks’, function() {
before(function() {
// 所有测试用例的统一前置动作
});

after(function() {
// 所有测试用例的统一后置动作
});

beforeEach(function() {
// 每个测试用例的前置动作
});

afterEach(function() {
// 每个测试用例的后置动作
});
});
还有很多方法,具体可以看下阮大神的 mocha 教程, 更加通俗易懂,当然看官网文档还是最全面的。

should.js 简读
should.js 的 api 就多了,我是没有全部用过,平时用的最好的也就那么几个,这种链式写法是不是有中 JQ 的感觉。写起来如行云流水,真舒服。在环境运行是最常见到的就是明明装了 should 模块,却报错说 cannot find module ‘should’, 如下图。心中有一万只草泥马奔过,路骂,你是不是瞎呀。。。哈哈。小伙子不要急躁,所谓代码虐我千百遍,我待代码如初恋。找不到 should 模块是有原因的,一般尝试降低些版本。毕竟外国鵀用的 linux 多,对于 windows 还是支持没那么快。或者换个淘宝镜像再重新 npm 下。也许就跑通了。

项目例子在这里,下面展示部分代码
var should = require(‘should’);
var add = require(‘../lib/add’);

describe(‘ 大数相加 add 方法 ’, function () {

it(‘ 字符串 ”42329″ 加上字符串 ”21532″ 等于 ”63861″‘, function () {
add(‘9987’, ‘987’)
.should.equal(‘10974’)
})

it(‘”843529812342341234″ 加上 ”236124361425345435″ 等于 ”1079654173767686669″‘, function () {
add(‘843529812342341234’, ‘236124361425345435’)
.should.equal(‘1079654173767686669’)
})
})
单元测试实现的一个大数相加的功能,涉及的知识点还是蛮多的。大家仔细解题还是会有很多收获的。至于哪些知识点,就靠你自己去挖掘了。
最后通过后如下图所示:
karma 是个什么东东
karma 是 google angular 团队开源的产品,主要目的就是给开发人员提供一个高效的测试环境。就如同一个脚手架,你只需要设置简单的配置即可,然后编写测试代码就能获得你想要的结果,是一个提高团队生产力和创造力的强有力的工具。
安装步骤
// 选全局安装 karma-cli
npm install -g karma-cli

// 然后在你的项目里安装 karma
npm i karma -D

// 安装一些插件
npm i npm install karma-jasmine karma-chrome-launcher jasmine-core –save-dev
接下里初始化 karma
在上面项目的根目录下使用下面命令
karma init
按照如下配置选择配置项
1. Which testing framework do you want to use ? (mocha)
2. Do you want to use Require.js ? (no)
3. Do you want to capture any browsers automatically ? (Chrome)
4. What is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js)
5. Should any of the files included by the previous patterns be excluded ? ()
6. Do you want Karma to watch all the files and run the tests on change ? (yes)
最后一步结束后就会在项目根目录中出现一个 karma.conf.js 的配置文件。我们来看下几个比较重要的配置项。
frameworks
所依赖的测试工具,我这里是用了 mocha, 你也可以使用默认的 jasmine.
files
项目中文件的本地地址,数组的形式展开,也可以是服务器地址,这里面的配置将会全部以 js 的形式通过 script 从浏览器里加载出来。放到页面底部。
browsers
所依赖的浏览器环境,一般是填写 Chrome, 我的 Chrome 浏览器是需要填写 Chrome_travis_ci 才行。并安装 karma-chrome-launcher 插件。
singleRun
默认是 false, 如果是 true,运行 karma start 只会测试一次测试用例,然后返回结果并退出。
autoWatch
默认为 true, 实时监听文件的修改,当有修改时就会重加加载测试用例,有点热加载的意味。
通过下面命令跑起整个项目
karma start
你会发现浏览器自动打开了一个如下图所示的页面
然后点击 DEBUG 按钮,跳转到另外一个页面,这时候打开控制台,你就会看到一个配置加载好的页面,这时候你就惊讶原来 karma 的设计思想是这样的。
项目地址, 最后要是运行成功,就会出现下面的结果。

Travis CI 的作用又是什么。
我们先了解下什么持续集成
通俗点讲,就是每天都要向老板报告一天的工作情况,并且还要反思总结。专业性点讲就是每天将代码集成到主干。
优点
1、快速发现错误,可以说当日问题当日解决,不留隐患。2、因为集成的频繁,所以分支并不会大幅度偏离主干。
如果想详细解读,请参考阮大神的文章
Travis CI 就是一个持续集成的工具,并且集成了 GitHub, 能够自动化的构建和测试操作,并且对公有的仓库 free, 这是极大的有利于开源项目的健康发展呀,我们就可以很方便,高效的维护开源项目
要使用这么强大的功能,第一步是配置文件,在我们项目的根目录中创建一个.travis.yml 文件。这个文件就包含了 Travis CI 需要用到的配置和指令。比如项目中常用的几个配置。具体请自行查看
// 编程语言所需的环境
language: node_js
node_js:
– “10”
– “8”
// 执行的脚本
script: node_modules/karma/bin/karma start karma.conf.js –single-run
// 脚本运行前不要安装的内容
before_install:
– export CHROME_BIN=chromium-browser
– export DISPLAY=:99.0
– sh -e /etc/init.d/xvfb start
项目中配置好.travis.yml 文件后,提交代码到远程 github 仓库,然后打开 travis-cli 上和你的 github 已经关联好的仓库, 如下图所示:
页面上那个 taggle 按钮就是是否开启自动化构建,这时候把 exercise3 项目打开,并点击进去详情,就会看到一个已经构建成功的项目。如果想重新构建也可以点击 more options 选择 tiragger build, 见下图:
到这里,一个简单的项目算是构建成功了。更多深入的学习,请持续关注。
如果大神您想继续探讨或者学习更多知识,欢迎加入 QQ 或者微信一起探讨:854280588

正文完
 0