JavaScript TDD with Mocha

开发现状


当新的版本快要发布的时候,大家都忙于加班,加紧修复BUG1、BUG2。我想这就是很多公司开发的现状。
为了不至于让上线的版本挂掉挂掉,少不了就是 人肉测试
在一个项目中,我们会做许许多多各种各样的测试,这些测试都必不可少的。测试是项目成功不可或缺的一部分。但 人肉测试 不在本博的讨论范围。

测试大体分为以下几类

  • 单元测试

  • 集成测试

  • 功能测试

测试驱动开发


TDD(Test-Driven Development)
从根本上改变了传统的开发模式,它要求你在写代码之前就写好测试,而不仅仅是待你写你代码以后的用作验证的目的。
TDD将测试提到了应用设计的阶段,在这期间你应该用你的测试理清你写代码时的思路,我们称作 Tasking.

以下是TDD开发时的基本要点

  1. Tasking (将项目需要拆分成小的task)

  2. Red (写测试代码,让其失败,变红)

  3. Green (写实现代码,让其通过,变绿)

  4. Refactor (重构,消失代码中的bad smell)

  5. Repeat (重复以上步骤)

这就是TDD开发过程中的基本过程,我们就在 “红-绿-红-绿” 中完成我们的软件开发。

JavaScript TDD

笔者将通过编写一个传统游戏的方式,来完成一个 JavaScript TDD 的实践。

4
digits
 
是一个猜数字游戏。在国外称为公牛和母牛,在中国人们就叫它猜数字。游戏的目标是在八次内用尽可能短的时间猜出一个随机的四位数:

  • 顺序与大小都相同的用 A 表示

  • 大小相同,但顺序不同用 B 表示

比如 输入 1234 | 猜数 2156 | 结果 0A2B

这是曾经在文曲星上有过的游戏,网友做过一个GUI版的,大家可以看下截图:

当然,本文的重点是 JavaScript TDD, 不是去实现一个太过细节逻辑。我们就把需求稍微改写一下:

  • 四位数先给定

  • 仅做算法处理(比较所猜数字与给定数字)

开发准备


  • Node

  • Mocha

如果不知道 Node,
估计你暂时还不用写 JavaScript。所以,本篇文章可能还不太适合你。


摩卡是一个功能丰富的运行在 Node 和浏览器上的JavaScript测试框架。它允许你使用你任意喜欢的断言库。比如

  • should.js

  • chai

  • expect.js

  • better-assert

本次工程就选择 should.js吧,写TDD很优美,下面正式开发我们的TDD之旅。

工程建立


1 mkdir -p digits/{src,test}
2 cd digits
3 touch src/digits.js test/digitsSpec.js
4 npm init
5 npm install -g mocha
6 npm install should --save-dev

工程就是这样搭建完成了,我们可以来看一下目录结构( 我把node_modules目录隐藏了):

就这样,我们就可以直接运行

mocha

跑测试了。当然,我们什么代码都没有写,当时没有测试可以跑,所以结果会是一个 0
passing
。那我们正式开始吧。

测试代码编写

先写出我们的第一个测试用例吧。 如果输入数字,或者所给数字的长度都不等于4,则返回-1。


 1 var should = require(‘should‘),
2 Digits = require(‘../src/digits‘).Digits;
3
4 describe(‘Digits‘, function() {
5 // Digits.compare(inputNum, givenNum);
6 describe(‘#compare()‘, function() {
7 it(‘should return -1 when input and given number length isnt 4‘, function() {
8 Digits.compare(‘123‘, ‘‘).should.equal(-1);
9 Digits.compare(‘123‘, null).should.equal(-1);
10 Digits.compare(‘123‘, ‘1234‘).should.equal(-1);
11 Digits.compare(null, ‘1234‘).should.equal(-1);
12 });
13 });
14 });

嗯,代码看起来不错,我们尝试着 mocha 跑一下。啊哦,意料之中,变红了:

什么原因喃?原来我们根本没有写实现代码,你这不废话么?确实是这样,这就是TDD中的第一步,。接下来,我们就编写一些代码,让它变绿吧。

实现代码编写

我们定义一个简单的Digits的function吧,通过 exports.Digits =
Digits;
 将函数接口暴露出去。就像这样:


 1 function Digits() {}
2
3 Digits.compare = function(inputNum, givenNum) {
4 var len = 4;
5
6 if (inputNum === null ||
7 givenNum === null ||
8 inputNum.length !== len ||
9 givenNum.length !== len) {
10 return -1;
11 }
12 }
13
14 exports.Digits = Digits;

看吧,看起来也很不错的样子,那我们继续跑一下测试吧。啊哈,意料之中,变绿了:

repeat

由红变绿之后,这个task也就相当于是完成了。我们又可以按照这样的一个步骤,再写新的测试,然后再将它实现出来。到此为止,一个基本的 JavaScript
TDD流程也就完了,趁着热乎劲儿。我们把这个compare 函数的其他测试也一并写了吧。代码如下:

digitsSepc.js


 1 var should = require(‘should‘),
2 Digits = require(‘../src/digits‘).Digits;
3
4 describe(‘Digits‘, function() {
5 // Digits.compare(inputNum, givenNum);
6 describe(‘#compare()‘, function() {
7 it(‘should return -1 when input and given number length isnt 4‘, function() {
8 Digits.compare(‘123‘, ‘‘).should.equal(-1);
9 Digits.compare(‘123‘, null).should.equal(-1);
10 Digits.compare(‘123‘, ‘1234‘).should.equal(-1);
11 Digits.compare(null, ‘1234‘).should.equal(-1);
12 });
13
14 it(‘should return 4A0B when input numbers matched given numbers‘, function() {
15 Digits.compare(‘1234‘, ‘1234‘).should.equal(‘4A0B‘);
16 Digits.compare(‘5678‘, ‘5678‘).should.equal(‘4A0B‘);
17 });
18
19 it(‘should return 2A2B when 2 input numbers matched given numbers, and other 2 exist but not the right order‘, function() {
20 Digits.compare(‘2134‘, ‘1234‘).should.equal(‘2A2B‘);
21 Digits.compare(‘1324‘, ‘1234‘).should.equal(‘2A2B‘);
22 Digits.compare(‘3214‘, ‘1234‘).should.equal(‘2A2B‘);
23 Digits.compare(‘4231‘, ‘1234‘).should.equal(‘2A2B‘);
24 });
25
26 it(‘should return 2A0B when 2 input numbers matched given numbers, and other 2 was wrong numbers‘, function() {
27 Digits.compare(‘1256‘, ‘1234‘).should.equal(‘2A0B‘);
28 Digits.compare(‘7238‘, ‘1234‘).should.equal(‘2A0B‘);
29 Digits.compare(‘7834‘, ‘1234‘).should.equal(‘2A0B‘);
30 Digits.compare(‘1784‘, ‘1234‘).should.equal(‘2A0B‘);
31 });
32 });
33 });

digits.js


 1 function Digits() {}
2
3 Digits.compare = function(inputNum, givenNum) {
4 var len = 4,
5 aCount = 0,
6 bCount = 0;
7
8 if (inputNum === null ||
9 givenNum === null ||
10 inputNum.length !== len ||
11 givenNum.length !== len) {
12 return -1;
13 }
14
15 if (inputNum === givenNum) {
16 return ‘4A0B‘;
17 }
18
19 for (var i = 0; i < len; i++) {
20 if (inputNum[i] === givenNum[i]) {
21 aCount++;
22 } else if (givenNum.indexOf(inputNum[i]) !== -1) {
23 bCount++;
24 }
25 }
26
27 return aCount + ‘A‘ + bCount + ‘B‘;
28 }
29
30 exports.Digits = Digits;

最后再来跑一遍 mocha -R spec,结果如下(大功告成啦):

结语

大功告成了,此时的你其实可以洗洗睡了,不用再担心你的程序有问题啦。你的测试告诉你,你的程序都是绿色可行的。当然,如果你测试写有的问题就别当别说咯。
测试代码会有一些什么好处呢?

  • 测试代码在那里,可以保证你以后修改代码时,或者重构时不会对已有的功能产生影响。

这条是很重要的,也是相当重要的。如果没有测试代码的保证,你无从知道你自己所改的代码,对已有的代码会产生什么样的影响。与其每次上线时都得加班改BUG,为啥不先写好测试,上线时早些洗洗睡了呢?

JavaScript TDD with Mocha,码迷,mamicode.com

时间: 2024-11-08 10:33:46

JavaScript TDD with Mocha的相关文章

JavaScript的TDD训练营环境搭建

下周一准备去蹭听公司组织的javascript TDD训练营.以前只是零散的使用javascript,水平相当于小白,笨鸟先飞,提前把环境鼓捣一下. 步骤: 1.nodejs安装 到http://www.nodejs.org/下载pkg包.然后一路next.安装后得到安装路径提示 Node was installed at /usr/local/bin/node npm was installed at /usr/local/bin/npm Make sure that /usr/local/b

前端 TDD 开发

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px ".PingFang SC"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px "Helvetica Neue"; color: #454545; min-height: 17.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; f

PhantomJS是一个基于WebKit的服务器端JavaScript API

PhantomJS是一个基于WebKit的服务器端JavaScript API,它基于 BSD开源协议发布.PhantomJS无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM 处理.JavaScript.CSS选择器.JSON.Canvas和可缩放矢量图形SVG.PhantomJS主要是通过JavaScript和CoffeeScript控制WebKit的CSS选择器.可缩放矢量图形SVG和HTTP网络等各个模块.PhantomJS主要支持Windows.Mac OS.L

PhantomJS:基于WebKit、开源的服务器端JavaScript API

PhantomJS是一个基于WebKit的服务器端JavaScript API,它基于 BSD开源协议发布.PhantomJS无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM 处理.JavaScript.CSS选择器.JSON.Canvas和可缩放矢量图形SVG.PhantomJS主要是通过JavaScript和CoffeeScript控制WebKit的CSS选择器.可缩放矢量图形SVG和HTTP网络等各个模块.PhantomJS主要支持Windows.Mac OS.L

ModSecurity web application firewall (WAF) Research

catalog 0. 引言 1. OWASP ModSecurity Core Rule Set (CRS) Project 2. Installation mod_security for Apache 3. Installation mod_security for nginx 4. Installation mod_security for IIS 5. mod_security Configuration Directives 6. Processing Phases 7. Variab

认识phantomjs

PhantomJS是一款webkit内核的headelsss的浏览器,使用QtWebkit, 支持DOM操作.CSS选择器.JSON.Canvas和SVG,可以模拟浏览器的服务. 安装 mac同学使用 brew install casperjs 可以做什么? 1. Headless的网站集成测试 可以和单元测试框架如Jasmine.Mocha和WebDriver集成 2. 屏幕捕捉 可以捕捉的web页面 3.网络监控 性能分析 监控page loading支持输出HAR标准文件,支持使用YSlo

Web 自动化测试与智能爬虫利器:PhantomJS 简介与实战

估计部分同学没听过这个工具,那先简单介绍下它的背景与作用. 1.PhantomJS 是什么? PhantomJS是一个基于WebKit的服务器端JavaScript API,它无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM 处理.JavaScript.CSS选择器.JSON.Canvas和可缩放矢量图形SVG.PhantomJS主要是通过JavaScript和CoffeeScript控制WebKit的CSS选择器.可缩放矢量图形SVG和HTTP网络等各个模块.Phan

关于JavaScript测试工具:QUnit, Jasmine, MoCha

在进行前端开发过程中,在某些场景下,需要通过编写单元测试来提高代码质量.而JavaScript常用的单元测试框架有这几个:QUnit, Jasmine, MoCha.下面就基于这三个工具,简单做一比较: 1. QUnit QUnit是一个JavaScript单元测试框架. 它是个强大,容易使用和上手的JavaScript单元测试框架.它被用于进行 jQuery, jQuery UI and jQuery 移动工程的测试,以及其他通用的JavaScript代码测试. Features:- Simi

测试驱动开发(TDD)及测试框架Mocha.js入门学习

组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅存很少的QA用于系统模块间的集成测试. 因此代码的测试与开发都将由开发者(Developer)来保证. 这就需要借助优秀测试框架的帮助,尤其是支持TDD开发模式的自动化测试框架更为重要,因为我使用的编程是语言是Node.js,那么广泛使用的Mocha.js将成为我的首选. 在团队转型过程中,很多事情