茉莉花測試使用.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 = "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

您看到了這個問題的原因是因爲回調嵌套在其他一些方法，可能jQuery的綁定和茉莉的間諜包直接通過你的方法，所以當測試設置時，你的方法不會被執行，直到下一個滴答聲。

我發現此頁：http://trevmex.com/post/7017702464/nesting-spies-to-see-if-a-callback-in-a-deep-nest-has有用，因爲它描述了您的問題和潛在的解決方法。

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

Answer 2

茉莉花的方式做同樣的事情，而不使用延期下劃線功能將是以下幾點：

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是正確的，問題是使用綁定和Javascript發送事件「有時方式/通常/總是「進入他的下一個事件循環（它的異步特性是如何工作的），所以既然你在回調間諜，你想確保你的測試是爲了解決異步行爲而編寫的。

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