【多图警告】学会JavaScript测试你就是同行中最亮的仔(妹)

顶部图

1、几种概念(稍微了解一下)

ATDD: Acceptance Test Driven Development(验收测试驱动开发)

这是一种在编码开始以前将客户带入测试设计过程的技术。它也是一个协做实践,用户,测试人员和开发人员定义了自动验收标准。 ATDD有助于确保全部项目成员准确理解须要完成和实施的内容。若是系统未经过测试可提供快速反馈,说明未知足要求。验收测试以业务领域术语进行指定。每一个功能都必须提供真实且可衡量的业务价值,事实上,若是您的功能没有追溯至至少一个业务目标,那么您应该想知道为何您要首先实施它。javascript

TDD:Test-driven development (测试驱动开发)

是一种使用自动化单元测试来推进软件设计并强制依赖关系解耦的技术。使用这种作法的结果是一套全面的单元测试,可随时运行,以提供软件能够正常工做的反馈。TDD重点是培养整个研发过程的节奏感,就像跳踢踏舞同样,“ti-ta-ti”。在编写真正实现功能的代码以前先编写测试,每次测试以后,重构完成,而后再次执行相同或相似的测试。该过程根据须要重复屡次,直到每一个单元根据所需的规格运行。css

BDD:Behavior-Driven Development (行为驱动开发)

BDD将TDD的通常技术和原理与领域驱动设计(DDD)的想法相结合。 BDD是一个设计活动,您能够根据预期行为逐步构建功能块。BDD的重点是软件开发过程当中使用的语言和交互。行为驱动的开发人员使用他们的母语与领域驱动设计的语言相结合来描述他们的代码的目的和好处。使用BDD的团队应该可以以用户故事的形式提供大量的“功能文档”,并增长可执行场景或示例。 BDD一般有助于领域专家理解实现而不是暴露代码级别测试。它一般以GWT格式定义:GIVEN WHEN&THEN。html

2、NodeJs中的Assert模块 - 断言

模块介绍:assert 模块提供了一组简单的断言测试,可用于测试不变量。存在严格模式(strict)和遗留模式(legacy),但建议仅使用严格模式java

简单尝试

(固然要先安装好node啦,安装node教程网上好像已经有不少了,我这里就不写了!)node

var assert = require('assert');

function add (a, b){
  return a + b;
}

assert.equal(6, add(3, 3), '预期 3 + 3 等于 6')
复制代码

正确输出
当调用add函数而且执行结果为6,执行不会报错,咱们将代码改一下。以下:

// assert.equal(6, add(3, 3), '预期 3 + 3 等于 6')
assert.equal(5, add(3, 3), '预期 3 + 3 等于 6')
复制代码

错误输出
咱们能够看到抛出了一个错误,错误信息是 预期 3 + 3 等于 6。 这是nodejs的assert模块简单尝试,更多详细内容可猛戳 Assert模块 PS: 还有不少断言库好比 should.jschai等等

3、Mocha - 单元测试框架

Mocha是一个在Node.js和浏览器上运行的功能丰富的JavaScript测试框架,使异步测试变得简单而有趣。 Mocha测试以串行方式运行,容许灵活准确的报告,同时将未捕获的异常映射到正确的测试用例。jquery

Mocha初体验

使用npm全局安装:git

$ npm install --global mocha
复制代码

也能够做为项目的依赖进行安装:github

$ npm install --save-dev mocha
复制代码

使用mocha -v能够查看版本号 chrome

mocha版本
新建一个test.js文件,输入以下内容:

var assert = require('assert')
describe('Array', function() {
    describe('#indexOf()', function() {
        it('should return -1 when the value is not present', function() {
            assert.equal(-1, [1, 2, 3].indexOf(4))
        })
    })
})
复制代码

能够在终端使用mocha test.js进行测试,输出结果以下: npm

mocha正确结果
咱们将代码修改一下:

// assert.equal(-1, [1, 2, 3].indexOf(4))
assert.equal(-1, [1, 2, 3].indexOf(3))
复制代码

mocha错误结果
给出了 failing结果,测试不经过,而且给出了 1) should return -1 when the value is not present的错误信息,准确的告诉咱们是哪里没有经过测试! PS: 单元测试框架还有 jestjasmine等等

4、Karma-测试工具

一个测试工具,能让你的代码在浏览器环境下测试。须要它的缘由在于,你的代码多是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器(chrome,firefox,ie等)环境下运行。

Karma初体验

全局安装 karma

$ npm install -g karma-cli
复制代码

由于我已经全局安装过了,这里就直接先安装依赖npm i,而后执行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 start效果以下:

执行成功

5、Travis CI - 持续集成服务

目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,简洁清新独树一帜。

尝试给项目集成Travis CI

猛戳Travis CI打开网站,而后能够选择使用github帐号登陆以下图:

这时候咱们须要在项目根目录添加 .travis.yml文件,大体内容以下(具体须要什么请参考官方文档):

language: node_js
# nodejs版本
node_js: 
 - '8'

# Travis-CI Caching
cache:
 directories:
 - node_modules


# S: Build Lifecycle
install:
 - npm install
 - export CHROME_BIN=chromium-browser
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start

before_script:

# 无其余依赖项因此执行npm run build 构建就好了
script:
 - npm test
复制代码

而后咱们将代码提交,咱们会看见Travis CI自动开始构建

咱们甚至能够看到详细信息
以及执行结果
而后发现执行之后,测试经过,可是程序并无自动结束
咱们只须要修改一下配置,找到 karma.conf.js: 将 singleRun: false改成 singleRun: true,而后将代码再提交一次,咱们再看执行结果:
喜大普奔,经过测试啦,嘿嘿嘿!!! 其实在github也是能够看到测试的结果啦:

还有不少高级玩法,你们能够去看一下文档!一样能够根据自身爱好集成其余的断言库和测试框架进行测试!

相关文章
相关标签/搜索