从零开始掌握JavaScript TDD：构建自动售货机找零计算器的完整指南-平芜编程栈

从零开始掌握JavaScript TDD：构建自动售货机找零计算器的完整指南

【免费下载链接】learn-tdd:white_check_mark: A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)项目地址: https://gitcode.com/gh_mirrors/le/learn-tdd

Test Driven Development (TDD) 是一种能显著提升代码可靠性的开发方法，通过先编写测试再实现功能，让你的项目像精密钟表一样稳定运行。本文将通过构建自动售货机找零计算器，带你在30分钟内掌握TDD核心技能，即使你是编程新手也能轻松上手！

为什么选择TDD？告别" duct tape "式代码

没有测试的项目往往像用胶带勉强粘合的汽车，改一处断一处，修复一个bug又冒出新的。而TDD能让你的开发团队像F1维修团队一样高效协作，通过自动化测试保障代码质量，让你在迭代时充满信心，真正实现"快速开发而不破坏现有功能"。

TDD的核心流程：先写失败测试（Red），再编写足够代码使其通过（Green），最后优化重构（Refactor）

准备工作：30分钟就能开始的简单环境

你只需要：

一台安装了浏览器的电脑
基本的HTML和JavaScript知识
30分钟专注时间
（可选）Node.js环境用于高级功能

实战项目：自动售货机找零计算器

想象你正在开发一台自动售货机，需要根据商品价格和顾客支付金额计算找零。这个看似简单的功能，恰恰是学习TDD的绝佳案例！

需求分析：找零计算器应该做什么？

创建一个getChange函数，接收两个参数：

totalPayable：商品价格（以便士为单位）
cashPaid：顾客支付金额（以便士为单位）

函数应返回一个数组，表示需要找零的硬币，按从大到小排序。例如：

商品价格215便士（£2.15），支付300便士（£3.00）
应找零85便士，返回[50, 20, 10, 5]（50p+20p+10p+5p）

英国流通硬币，从200便士（£2）到1便士不等

第一步：创建基础HTML文件

首先创建index.html文件，引入QUnit测试框架：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Vending Machine Change Calculator TDD Tutorial</title> <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script> <!-- 测试代码将在这里 --> <script> // 测试用例 test('getChange(1,1) should return empty array', function(assert) { var result = getChange(1, 1); assert.deepEqual(result, []); }); </script> </body> </html>

打开浏览器时，你会看到测试失败，这是正常的！

初始测试失败是TDD的第一步，证明测试能正确检测问题

第二步：编写足够的代码让测试通过

现在实现最基础的getChange函数，让测试通过：

function getChange(totalPayable, cashPaid) { return []; // 最简单的实现，仅让当前测试通过 }

刷新浏览器，你会看到测试变为绿色：

测试通过表示我们的基础实现满足了当前需求

第三步：逐步添加测试和功能

TDD的精髓在于小步迭代。添加第二个测试用例：

test('getChange(215, 300) should return [50, 20, 10, 5]', function(assert) { var result = getChange(215, 300); assert.deepEqual(result, [50, 20, 10, 5]); });

现在测试再次失败，这正是我们想要的！接下来完善getChange函数：

function getChange(totalPayable, cashPaid) { var coins = [200, 100, 50, 20, 10, 5, 2, 1]; var change = []; var remaining = cashPaid - totalPayable; for (var i = 0; i < coins.length; i++) { var coin = coins[i]; while (remaining >= coin) { change.push(coin); remaining -= coin; } } return change; }

刷新浏览器，所有测试都通过了！

多个测试通过证明我们的实现具备了基本功能

提升代码质量：使用覆盖率工具检测未测试代码

即使所有测试都通过，也可能存在未被测试覆盖的代码。使用Istanbul工具可以帮我们发现这些"盲点"：

安装依赖：npm install istanbul --save-dev
添加测试脚本到package.json：

"scripts": { "test": "istanbul cover test.js" }

运行测试覆盖率：npm test

100%覆盖率意味着每一行代码都经过了测试验证

自动化测试：让CI帮你守护代码质量

通过Travis CI设置持续集成，每次提交代码都会自动运行测试：

创建.travis.yml文件：

language: node_js node_js: - "node"

在Travis CI网站启用项目

持续集成确保代码变更不会破坏现有功能

文档即代码：用JSDoc自动生成文档

为函数添加JSDoc注释，然后生成专业文档：

/** * 计算商品价格和支付金额之间的找零 * @param {number} totalPayable - 商品价格（便士） * @param {number} cashPaid - 支付金额（便士） * @returns {array} 找零硬币数组，从大到小排列 * @example getChange(215, 300) // returns [50, 20, 10, 5] */ function getChange(totalPayable, cashPaid) { // 实现代码 }

运行jsdoc change.js生成文档：

自动生成的文档让代码更易于维护和使用