这是介绍编写可测试的Javascript UI代码两篇文章中的第一篇。这一篇展示了一个基本的示例应用程序，该应用程序包含了几个常见的反模式以及它们的解决方案。
在第二篇中，我们将用文中描述的优化技能来重构该应用，提出了一个简单地XHR模拟，并且添加了一个测试用例以帮助后面的开发者维护代码。
前端开发带来了一系列的挑战，但是很少有文章是来讨论单元测试的。自动初始化，逻辑的封装，DOM事件处理，XHR请求以及回调嵌套都会使得测试变的困难。
幸运的是，我们可以编写可测试的前端代码，但是，这确实需要一些知识和思考。
常见的编码实践–容易理解，但难以测试
虽然较短，但这个人为的例子使用了几个常见的反模式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <title>An Untestable Authentication Form</title> </head> <body> <form id="authentication_form"> <label for="username">Username:</label> <input type="text" id="username" name="username"></input> <label for="password">Password:</label> <input type="password" id="password" name="password"></input> <button>Submit</button> <p id="username_password_required" style="display: none;"> Both the username and password are required. </p> <p id="authentication_success" style="display: none;"> You have successfully authenticated! </p> <p id="authentication_failure" style="display: none;"> This username/password combination is not correct. </p> <p id="authentication_error" style="display: none;"> There was a problem authenticating the user, please try again later. </p> </form> <script src="jquery.min.js"></script> <!-- Inline Javascript is impossible to test from an external test harness --> <script> // Even if test harness was included in the HTML, Javascript is // inaccessible to tests $(function() { // Pyramid of doom - A mixture of disparate concerns and // very difficult to test individual parts $("#authentication_form").on("submit", function(event) { // Event handler logic is mixed with form handling logic event.preventDefault(); var username = $("#username").val(); var password = $("#password").val(); if (username && password) { // Without a mock, XHR requests require a functioning // back end, adding extra dependencies and delay $.ajax({ type: "POST", url: "/authenticate_user", data: { username: username, password: password }, success: function(data, status, jqXHR) { // Knowing when this completes requires some sort // of notification if (data.success) { $("#authentication_success").show(); } else { $("#authentication_failure").show(); } }, error: function(jqXHR, textStatus, errorThrown) { $("#authentication_error").show(); } }); } else { $("#username_password_required").show(); } }); }); ="crayon-5812f12a39c03553122006-74"> }); }); 篇。这一篇展示了一个基本的示例应用程序，该应用程序包含了几个常见的反模式以及它们的解决方案。
在第二篇中，我们将用文中描述的优化技能来重构该应用，提出了一个简单地XHR模拟，并且添加了一个测试用例以帮助后面的开发者维护代码。 前端开发带来了一系列的挑战，但是很少有文章是来讨论单元测试的。自动初始化，逻辑的封装，DOM事件处理，XHR请求以及回调嵌套都会使得测试变的困难。 幸运的是，我们可以编写可测试的前端代码，但是，这确实需要一些知识和思考。 常见的编码实践–容易理解，但难以测试虽然较短，但这个人为的例子使用了几个常见的反模式：
|
