编写可测试的Javascript代码.pdf

编写可测试的Javascript代码 编写可测试的Javascript代码（1）：反模式及其解决方案 !DOCTYPE html html head titleAn Untestable Authentication Form/title /head body form id=authentication_form label for=usernameUsername:/label input type=text id=username name=username/input label for=passwordPassword:/label input type=password id=password name=password/input buttonSubmit/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