茉莉测试使用".toHaveBeenCalledWith"在注册表单中失败

Question

我正在开发的单页应用程序有一个登录视图，其中包含两个表单：登录表单和注册表单。以下规范描述了这些表单的测试。我正在使用Jasmine-jQuery 1.4.2.

// user_spec.js

describe("User", function() {

  var userController;

  beforeEach(function () {
    loadFixtures('menu.html');
    userController = new MyApp.User.Controller();
  });

  describe("LoginView", function() {

    beforeEach(function() {
      // Mock the $.ajax function to prevent XHR:
      spyOn($, "ajax").andCallFake(function(params) {});
    });

    it("should pass email and password with the 'signInForm:submit' event.", function() {
      var email = "[e-mail]";
      var password = "Passw0rd";
      var callback = jasmine.createSpy("FormSubmitSpy");

      userController.loginView.$el.find("#signInEmail").val(email);
      userController.loginView.$el.find("#signInPassword").val(password);
      userController.loginView.bind("signInForm:submit", callback, this);
      userController.loginView.ui.signInForm.trigger("submit");

      expect(callback).toHaveBeenCalledWith({
        email: email,
        password: password
      });
    });

    it("should pass name, email and password with the 'signUpForm:submit' event.", function() {
      var name = "John Doe";
      var email = "[e-mail]";
      var password = "Passw0rd";
      var callback = jasmine.createSpy("FormSubmitSpy");

      userController.loginView.$el.find("#signUpName").val(name);
      userController.loginView.$el.find("#signUpMail").val(email);
      userController.loginView.$el.find("#signUpPassword").val(password);
      userController.loginView.$el.find("#signUpPasswordConfirmation").val(password);
      userController.loginView.bind("signUpForm:submit", callback, this);

      userController.loginView.ui.signUpForm.trigger("submit");

      expect(callback).toHaveBeenCalledWith({
        name: name,
        email: email,
        password: password,
        password_confirmation: password
      });
    });

  });

});

登录表单的测试运行成功，但注册表单的测试失败。

Error: Expected spy FormSubmitSpy to have been called with \
    [ { name : 'John Doe', email : '[e-mail]', \
    password : 'Passw0rd', password_confirmation : 'Passw0rd' } ] \
    but it was never called.

    at new jasmine.ExpectationResult (http://localhost:3000/assets/jasmine.js?body=1:114:32)
    at null.toHaveBeenCalledWith (http://localhost:3000/assets/jasmine.js?body=1:1235:29)
    at null.<anonymous> (http://localhost:3000/assets/user_spec.js?body=1:233:24)
    at jasmine.Block.execute (http://localhost:3000/assets/jasmine.js?body=1:1064:17)
    at jasmine.Queue.next_ (http://localhost:3000/assets/jasmine.js?body=1:2096:31)
    at jasmine.Queue.start (http://localhost:3000/assets/jasmine.js?body=1:2049:8)
    at jasmine.Spec.execute (http://localhost:3000/assets/jasmine.js?body=1:2376:14)
    at jasmine.Queue.next_ (http://localhost:3000/assets/jasmine.js?body=1:2096:31)
    at jasmine.Queue.start (http://localhost:3000/assets/jasmine.js?body=1:2049:8)
    at jasmine.Suite.execute (http://localhost:3000/assets/jasmine.js?body=1:2521:14)

使用应用程序中的表单没有问题。数据已传输。一切都运作良好。只是测试不行。

解决方法

然而，当我延迟其执行时，测试是成功的。

_.defer(function() {
  expect(callback).toHaveBeenCalledWith({
    name: name,
    email: email,
    password: password,
    password_confirmation: password
  });
});

为什么这个方法能够成功而“正常”的实现失败了？

---

这是对给定情况的简化：

it("should evaluate true", function() {
  var foo = false;
  _.defer(function() {
    foo = true;
  });
  expect(foo).toBeTruthy();
});

- JJD

---

如果您删除“signInForm”测试会发生什么？或者将其移动到“signUpForm”测试之后会怎样？ - Tommi Komulainen

也许还有其他的因素阻止了事件，然后在某些操作后重新触发。在不应该刷新页面的表单提交中，这似乎相当有可能。如果阻止器不能同步地触发，那么这个监视程序将失败。 - fncomp

Answer 1

使用Jasmine的方式进行相同的操作，而不使用下划线函数进行延迟处理的示例如下：

var flag = false;
...

runs(function() {
  userController.loginView.ui.signInForm.trigger("submit");
  setTimeout(function() { flag = true; }, 1);
}

waitsFor(function() {
  return flag;
}, "Blah this should never happen", 10);

runs(function() {
  expect(callback).toHaveBeenCalledWith({
    name: name,
    email: email,
    password: password,
    password_confirmation: password
  });
}

@Marc是正确的，问题出在使用bind和Javascript将事件“有时/通常/总是”发送到下一个事件循环的方式上（这就是它异步性工作的方式），因此，由于你正在监视回调，你需要确保你编写的测试能够考虑到这种异步行为。

在你编写的测试中，你面临着第一个测试无法偶发通过的风险（我惊讶于它仍然能正常工作）。你正在以非异步的方式测试异步事件回调...有道理吗？

- Nick Sharp

Answer 2

您看到这个问题的原因是回调嵌套在其他方法中，可能是jQuery bind和jasmine的spy直接包装了您的方法，因此当测试设置时，您的方法直到下一个刻度才会执行。

我发现这个页面：http://trevmex.com/post/7017702464/nesting-spies-to-see-if-a-callback-in-a-deep-nest-has 描述了您的问题和潜在的解决方法，很有用。

但是，我发现最好不要测试回调，因为它们可以被视为私有方法。也许您可以测试其最终结果？

- Marc Greenstock