javascript - 如何测试 Javascript 是否提交了表单？

Question

我正在尝试使用 Jasmine 测试我的一些 javascript。

我是 Jasmine 的新手，我对 Javascript 的了解充其量只是基础知识。我想要做的是确保表单已提交。我不知道测试的语法应该是什么样子。我想我需要使用 spyOn，但我不太确定如何使用。如果有人能指出正确的方向，我会很高兴。

function submitform(array) {
    var token = array[0].replace("access_token=", "");
    if ((token !== "")) {
        $('input[name=Token]').val(token);
        var frm = document.getElementById("tokenform");
        frm.submit();
    }
}

Answer 1

要测试 frm.submit() 是否被调用，您必须模拟它。有两种方法。第一种方法可以在不更改代码的情况下通过监视 document.getElementById 工作，这将在您的示例中工作，因为您只使用它一次，如果使用 document.getElementById 会更难> 更频繁。

var submit;
beforeEach(){
  // when your code calls document.getElementById it return an object 
  // with just one property where you can spy on that it was called
  submit = jasmine.createSpy();
  spyOn(document 'getElementById').andReturn({submit:submit})
}

it ("should submit", function(){
  submitform([somedata]);
  expect(submit).toHaveBeenCalled();
})

更好的方法是重写代码以获得更好的可测试性。因此，不是通过调用 DOM 函数来获取表单，而是将表单作为参数注入(inject)到您的函数中。现在您可以将模拟传递到您的函数中，而不是模拟 document.getElementById。此模式也称为 Dependency Injection

function submitform(array, frm) {
    var token = array[0].replace("access_token=", "");
    if ((token !== "")) {
        $('input[name=Token]').val(token);
        frm.submit();
    }
}

it ("should submit", function(){
  var submit = jasmine.createSpy();
  var form = {submit: submit}
  submitform([somedata],form);
  expect(submit).toHaveBeenCalled();
})