使用.toHaveBeenCalledWith的Jasmine測試失敗，用於注冊表單

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 = "firstname.name@email.com";
      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 = "firstname.name@email.com";
      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 : 'firstname.name@email.com', \
    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();
});

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將事件“有時/通常/總是”發送到他的下一個事件循環（它的異步性質如何工作）的方式，所以既然你正在監視你想做的回調確保您的測試是為了解決該異步行為而編寫的。

在你的測試編寫時，你冒着第一次測試不會偶爾通過的風險（我很驚訝它的工作原理）。 您正在以非異步方式測試異步事件回調...有意義嗎？

Answer 2

你看到這個問題的原因是因為回調嵌套在其他一些方法中，可能是jQuery bind和jasmine的spy直接包裝在你的方法上所以當你設置測試時，你的方法直到下一個tick才會被執行。

我找到了這個頁面： http ： //trevmex.com/post/7017702464/nesting-spies-to-see-if-a-callback-in-a-deep-nest-有用，因為它描述了你的問題和潛在的工作周圍。

但是我發現最好不要測試回調，因為它們可以被認為是私有方法。 也許你可以測試它的最終結果？