文档章节

测试驱动开发(TDD)入门

谢小呆
 谢小呆
发布于 09/19 10:37
字数 2862
阅读 2408
收藏 44

测试驱动开发(TDD)入门

测试驱动开发,英文全称 Test-Driven Development(简称 TDD),是由Kent Beck 先生在极限编程(XP)中倡导的开发方法。以其倡导先写测试程序,然后编码实现其功能得名。

本文不打算扯过多的理论,而是通过操练的方式,带着大家去操练一下,让同学们切身感受一下 TDD,究竟是怎么玩的。开始之前先说一下 TDD 的基本步骤。

TDD 的步骤

TDD 步骤

  1. 写一个失败的测试
  2. 写一个刚好让测试通过的代码
  3. 重构上面的代码

简单设计原则

重构可以遵循简单设计原则:

简单设计原则

简单设计原则,优先级从上至下降低,也就是说 「通过测试」的优先级最高,其次是代码能够「揭示意图」和「没有重复」,「最少元素」则是让我们使用最少的代码完成这个功能。

操练

Balanced Parentheses 是我在 cyber-dojo 上最喜欢的一道练习题之一,非常适合作为 TDD 入门练习。

先来看一下题目:

Write a program to determine if the the parentheses (), the brackets [], and the braces {}, in a string are balanced.

For example:

{{)(}} is not balanced because ) comes before (

({)} is not balanced because ) is not balanced between {} and similarly the { is not balanced between ()

[({})] is balanced

{}([]) is balanced

{()}[[{}]] is balanced

我来翻译一下:

写一段程序来判断字符串中的小括号 () ,中括号 [] 和大括号 {} 是否是平衡的(正确闭合)。

例如:

{{)(}} 是没有闭合的,因为 ) 在 ( 之前。

({)} 是没有闭合的,因为 ) 在 {} 之间没有正确闭合,同样 { 在 () 中间没有正确闭合。

[({})] 是平衡的。

{}([]) 是平衡的。

{()}[[{}]] 是平衡的。

需求清楚了,按照一个普通程序员的思维需要先思考一下,把需求理解透彻而且思路要完整,在没思路的情况下完全不能动手。

而使用 TDD 首先要将需求拆分成很小的任务,每个任务足够简单、独立,通过完成一个个小任务,最终交付一个完整的功能。

这个题目起码有两种技术方案,我们先来尝试第一种。

先来拆分第一步:

输入一个空字符串,期望是平衡的,所以返回 true

我们来先写测试:

import assert from 'assert';

describe('Parentheses', function() {
  it('如果 输入字符串为 "" ,当调用 Parentheses.execute(),则结果返回 true', () => {
    assert.equal(Parentheses.execute(''), true);
  });
});

此时运行测试:

  1. Parentheses 如果 输入字符串为 "" ,当调用 Parentheses.execute(),则结果返回 true: ReferenceError: Parentheses is not defined at Context.Parentheses (test/parentheses.spec.js:5:18)

接下来写这个 case 的实现:


export default {
  execute(str) {
    if (str === '') {
      return true;
    }
  }
};

运行:

Parentheses ✓ 如果 输入字符串为 "" ,当调用 Parentheses.execute(),则结果返回 true

1 passing (1ms)

第二步:

输入符串为 (),期望的结果是 true

先写测试:

it('如果 输入字符串为 () ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('()'), true);
});

运行、失败!因为篇幅原因这里就不再贴报错结果。

然后继续写实现:

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    if (str === '()') {
      return true;
    }

    return false;
  }
};

这个实现虽然有点傻,但的确是通过了测试,回顾一下 “简单设计原则” ,以上两步代码都过于简单,没有值得重构的地方。

第三步:

输入符串为 ()(),期望的结果是 true

测试:

it('如果 输入字符串为 ()() ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('()()'), true);
});

运行、失败!

实现:


export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    if (str === '()') {
      return true;
    }

    if (str === '()()') {
      return true;
    }

    return false;
  }
};

这个实现更傻,傻到我都不好意思往上贴,回顾一下 TDD 的步骤「通过测试」,可以重构了。

其中 if (str === '()')if (str === '()()') 看起来有些重复,来看看是否可以这样重构一下:


export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const replacedResult = str.replace(/\(\)/gi, '');
    if (replacedResult === '') {
      return true;
    }

    return false;
  }
};

将字符串中的 () 全部替换掉,如果替换后的字符串结果等于 '' 则是正确闭合的。

运行,通过!

我们再来增加一个case :

it('如果 输入字符串为 ()()( ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute('()()('), false);
});

运行,通过!

第四步

输入符串为 [],期望的结果是 true

测试:

it('如果 输入字符串为 [] ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('[]'), true);
});

运行、失败!

实现:

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    let replacedResult = str.replace(/\(\)/gi, '');
    replacedResult = replacedResult.replace(/\[\]/gi, '');
    if (replacedResult === '') {
      return true;
    }

    return false;
  }
};

运行,通过!

正则表达式可以将两条语句合并成一条,但是合并成一条语句的可读性较差,所以这里写成了两句。

第五步:

输入符串为 {},期望的结果是 true

测试:

it('如果 输入字符串为 {} ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('{}'), true);
});

实现:

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    let replacedResult = str.replace(/\(\)/gi, '');
    replacedResult = replacedResult.replace(/\[\]/gi, '');
    replacedResult = replacedResult.replace(/\{\}/gi, '');
    if (replacedResult === '') {
      return true;
    }

    return false;
  }
};

运行、通过!

第六步:

输入符串为 [({})],期望的结果是 true

写测试:

it('如果 输入字符串为 [({})] ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('[({})]'), true);
});

运行、失败!

原因是我们的替换逻辑是有顺序的,当替换完成的结果有值,如果等于输入值则返回 false,如果不等于输入值则继续替换, 这里用到了递归。

来修改一下实现代码:

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    let replacedResult = str.replace(/\(\)/gi, '');
    replacedResult = replacedResult.replace(/\[\]/gi, '');
    replacedResult = replacedResult.replace(/\{\}/gi, '');

    if (replacedResult === '') {
      return true;
    }

    if (replacedResult === str) {
      return false;
    }

    return this.execute(replacedResult);
  }
};

运行、通过!

再添加一些测试用例:

it('如果 输入字符串为 {}([]) ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('{}([])'), true);
});

it('如果 输入字符串为 {()}[[{}]] ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('{()}[[{}]]'), true);
});

it('如果 输入字符串为 {{)(}} ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute('{{)(}}'), false);
});

it('如果 输入字符串为 ({)} ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute('({)}'), false);
});

运行、通过!

这个功能我们就这样简单的实现了,需求如此,所以这个方案有些简陋,甚至我们都没有做错误处理。在这里我们不花太多时间进行重构,直接进入方案二。

方案二

我们将需求扩展一下:

输入字符串为:

const fn = () => {
    const arr = [1, 2, 3];
    if (arr.length) {
      alert('success!');
    }
};

判断这个字符串的括号是否正确闭合。

通过刚刚 git 提交的记录找到第二步重新拉出一个分支:

git log
git checkout <第二步的版本号> -b plan-b

运行、通过!

测试已经有了,我们直接修改实现:


export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (char === '(') {
        pipe.push(chart);
      }

      if (char === ')') {
        pipe.pop();
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

这个括号的闭合规则是先进后出的,使用数组就 ok。

运行、通过!

第三步:

上面的实现满足这个任务,但是有一个明显的漏洞,当输入只有一个 ) 时,期望得到返回 false ,我们增加一个 case:

it('如果 输入字符串为 ) ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute(')'), false);
});

运行、失败!

再修改实现:


export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (char === '(') {
        pipe.push(char);
      }

      if (char === ')') {
        if (pipe.pop() !== '(')
          return false;
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

运行、通过!如果 pop() 的结果不是我们放进去管道里的值,则认为没有正确闭合。

重构一下,if 语句嵌套的没有意义:


export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (char === '(') {
        pipe.push(char);
      }

      if (char === ')' && pipe.pop() !== '(') {
        return false;
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

( ) 在程序中应该是一组常量,不应当写成字符串,所以继续重构:


const PARENTHESES = {
  OPEN: '(',
  CLOSE: ')'
};

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (char === PARENTHESES.OPEN) {
        pipe.push(char);
      }

      if (char === PARENTHESES.CLOSE
          && pipe.pop() !== PARENTHESES.OPEN) {
        return false;
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

运行、通过!

再增加几个case:

it('如果 输入字符串为 ()() ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('()()'), true);
});

it('如果 输入字符串为 ()()( ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute('()()('), false);
});

第四步:

如果输入字符串为 ] ,这结果返回 false

测试:

it('如果 输入字符串为 ] ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute(']'), false);
});

运行、失败!

这个逻辑很简单,只要复制上面的逻辑就ok。

实现:


const PARENTHESES = {
  OPEN: '(',
  CLOSE: ')'
};

const BRACKETS = {
  OPEN: '[',
  CLOSE: ']'
};

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (char === PARENTHESES.OPEN) {
        pipe.push(char);
      }

      if (char === PARENTHESES.CLOSE
          && pipe.pop() !== PARENTHESES.OPEN) {
        return false;
      }

      if (char === BRACKETS.OPEN) {
        pipe.push(char);
      }

      if (char === BRACKETS.CLOSE
          && pipe.pop() !== BRACKETS.OPEN) {
        return false;
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

运行、通过!

接下来我们开始重构,这两段代码完全重复,只是判断条件不同,如果后面增加 } 逻辑也是相同,所以这里我们将重复的代码抽成函数。


const PARENTHESES = {
  OPEN: '(',
  CLOSE: ')'
};

const BRACKETS = {
  OPEN: '[',
  CLOSE: ']'
};

const holderMap = {
  '(': PARENTHESES,
  ')': PARENTHESES,
  '[': BRACKETS,
  ']': BRACKETS,
};

const compare = (char, pipe) => {
  const holder = holderMap[char];
  if (char === holder.OPEN) {
    pipe.push(char);
  }

  if (char === holder.CLOSE
      && pipe.pop() !== holder.OPEN) {
    return false;
  }

  return true;
};

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (!compare(char, pipe)) {
        return false;
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

运行、通过!

第五步

输入符串为 },期望的结果是 false

测试:

it('如果 输入字符串为 } ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute('}'), false);
});

运行、失败!

  1. Parentheses 如果 输入字符串为 } ,当调用 Parentheses.execute(),则结果返回 false: TypeError: Cannot read property 'OPEN' of undefined at compare (src/parentheses.js:22:4) at Object.execute (src/parentheses.js:45:12) at Context.it (test/parentheses.spec.js:29:48)

报错信息和我们期望的不符,原来是 } 字符串没有找到对应的 holder 会报错,来修复一下:


const PARENTHESES = {
  OPEN: '(',
  CLOSE: ')'
};

const BRACKETS = {
  OPEN: '[',
  CLOSE: ']'
};

const holderMap = {
  '(': PARENTHESES,
  ')': PARENTHESES,
  '[': BRACKETS,
  ']': BRACKETS,
};

const compare = (char, pipe) => {
  const holder = holderMap[char];
  if (!holder) return true;
  if (char === holder.OPEN) {
    pipe.push(char);
  }

  if (char === holder.CLOSE
      && pipe.pop() !== holder.OPEN) {
    return false;
  }

  return true;
};

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (!compare(char, pipe)) {
        return false;
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

运行、失败!这次失败的结果与我们期望是相同的,然后再修改逻辑。


const PARENTHESES = {
  OPEN: '(',
  CLOSE: ')'
};

const BRACKETS = {
  OPEN: '[',
  CLOSE: ']'
};

const BRACES = {
  OPEN: '{',
  CLOSE: '}'
};

const holderMap = {
  '(': PARENTHESES,
  ')': PARENTHESES,
  '[': BRACKETS,
  ']': BRACKETS,
  '{': BRACES,
  '}': BRACES
};

const compare = (char, pipe) => {
  const holder = holderMap[char];
  if (!holder) return true;
  if (char === holder.OPEN) {
    pipe.push(char);
  }

  if (char === holder.CLOSE
      && pipe.pop() !== holder.OPEN) {
    return false;
  }

  return true;
};

export default {
  execute(str) {
    if (str === '') {
      return true;
    }

    const pipe = [];
    for (let char of str) {
      if (!compare(char, pipe)) {
        return false;
      }
    }

    if (!pipe.length) return true;
    return false;
  }
};

因为前面的重构,增加 {} 的支持只是增加一些常量的配置。

运行、通过!

再增加些 case:

it('如果 输入字符串为 [({})] ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('[({})]'), true);
});

it('如果 输入字符串为 {}([]) ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('{}([])'), true);
});

it('如果 输入字符串为 {()}[[{}]] ,当调用 Parentheses.execute(),则结果返回 true', () => {
  assert.equal(Parentheses.execute('{()}[[{}]]'), true);
});

it('如果 输入字符串为 {{)(}} ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute('{{)(}}'), false);
});

it('如果 输入字符串为 ({)} ,当调用 Parentheses.execute(),则结果返回 false', () => {
  assert.equal(Parentheses.execute('({)}'), false);
});

运行、通过!

再加最后一个 case:

const inputStr = `
    const fn = () => {
      const arr = [1, 2, 3];
      if (arr.length) {
        alert('success!');
      }
    };
  `;

it(`如果 输入字符串为 ${inputStr} ,当调用 Parentheses.execute(),则结果返回 false`, () => {
  assert.equal(Parentheses.execute(inputStr), true);
});

完成!

总结

通过上面的练习,相信大家应该能够感受到 TDD 的威力,有兴趣的同学可以不使用 TDD 将上面的功能重新实现一遍,对比一下两次实现的时间和质量就知道要不要学习 TDD 这项技能。

资料

https://martinfowler.com/bliki/BeckDesignRules.html

《测试驱动开发的艺术》

本文代码

© 著作权归作者所有

谢小呆
粉丝 39
博文 9
码字总数 24564
作品 0
朝阳
其他
私信 提问
加载中

评论(3)

蝈蝈先森
你们公司没测试部门?这个锅一下子丢测试不就好,这么简单的道理都不懂,bug多又不考核绩效的。。。干就行。😞
Rwing
Rwing
不错,能进一步就好了
谢小呆
谢小呆 博主
谢谢关注😄,不知道您指的进一步是?我去再写一篇,哈哈
书评:测试驱动开发的艺术

读罢《测试驱动开发的艺术》,忽然想起中国传统文化中的“道器之辩”。《易经》曰:形而上者谓之道,形而下者谓之器。中国的传统文化常常是重道轻器,认为道本器末,即道是根本,其他一切是道...

wayfarer
2011/02/11
0
0
如何把BDD,ATDD和TDD结合起来?

笔者最近在研究BDD,尽管在做BDD(行为驱动开发,或者ATDD,可接受性测试)的时候,不一定需要TDD(测试驱动开发),或者在做TDD(测试驱动开发)的时候也不需要BDD(为驱动开发)。但是如果项...

chancein007
2017/01/01
0
0
TDD、BDD、ATDD、DDD 软件开发模式

四个开发模式意思: TDD:测试驱动开发(Test-Driven Development) BDD:行为驱动开发(Behavior Driven Development) ATDD:验收测试驱动开发(Acceptance Test Driven Development) DDD:...

飓风2000
07/11
49
0
关于TDD、BDD和DDD

在实际的项目中,我们可能随时面对各种不同的需求,它的各个方面的要素决定了我们所采用的开发模式。 比如,它的复杂度如何?所有的需求是否足够清晰?开发人员对相关的业务是否足够了解?项...

jimyao
2016/03/12
81
0
关于TDD、BDD和DDD的一些看法

在实际的项目中,我们可能随时面对各种不同的需求,它的各个方面的要素决定了我们所采用的开发模式。 比如,它的复杂度如何?所有的需求是否足够清晰?开发人员对相关的业务是否足够了解?项...

Euray
2014/11/16
235
1

没有更多内容

加载失败,请刷新页面

加载更多

Andorid SQLite数据库开发基础教程(2)

Andorid SQLite数据库开发基础教程(2) 数据库生成方式 数据库的生成有两种方式,一种是使用数据库管理工具生成的数据库,我们将此类数据库称为预设数据库,另一种是使用代码生成的数据库。...

大学霸
21分钟前
2
0
YecPad 开源啦!: 基于C#的功能强大的可编辑记事本文本编辑软件

JY Lin 开源:YecPad : 基于C#的功能强大的可编辑记事本文本编辑软件 YecPad 是一款基于C#编程语言开发的功能强大的可编辑记事本文本编辑软件。 可以进行文本文件的打开、保存、删除及编辑功...

YDOOK
28分钟前
2
0
StringBuilder 与 StringBuffer 的区别

StringBuffer是线性安全的,支持并发操作,适合多线程。 StringBuilder线性不安全,不支持并发操作,适合单线程。 也就是说他们俩区别就在于支不支持并发操作,使用上基本上类似...

无名氏的程序员
31分钟前
3
0
js 找数组中的最值

本文转载于:专业的前端网站➸js 找数组中的最值 背景: 2个数组以下 , 比如 [[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]] 找最值的时候,我一开始想用两个...

前端老手
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部