Làm thế nào để kiểm tra jQuery với Jasmine cho $ ("# element-id") nếu được sử dụng như $ (this)

Question

Tôi không biết cách chạy thử nghiệm Jasmine này cho JS của tôi và chắc chắn cũng ppl khác có vấn đề này. Có lẽ tôi đang làm sai hoặc có thể là không thể - tôi không tìm thấy bất kỳ gợi ý nào về điều này. Vấn đề phải làm với thực tế là - trong jQuery - $ (this) không giống như phần tử được chọn bởi ví dụ: $ ("# Này-id"):

Javascript:

[..] 
$("#button-id").on("click", function(e) { callSomeFunctionWith($(this)); }); 

Jasmine-Test (CoffeeScript):

[..] 
spyOn some.object, "callSomeFunctionWith" 
spyOnEvent($("#button-id"), 'click') 

$("#button-id").trigger("click") 
expect(some.object.callSomeFunctionWith).toHaveBeenCalledWith($("#button-id")) 

Đáng tiếc là thử nghiệm này không thành công (với bất kỳ biến thể như lưu trữ các ref để trong một biến đầu tiên trong bài kiểm tra Jasmine của tôi), bởi vì hàm KHÔNG được gọi với $ ("# button-id"), nhưng thay vào đó được gọi với $ (this), và $ (this)! = $ ("# button- ID").

Ai đó có thể cho tôi biết cách thực hiện bài kiểm tra này không? Tôi khá lạc. Ngay cả Remy Sharp's great article on jQuery and $(this) cũng không giúp tôi thêm nữa.

Answer 1

Ok, giờ tôi đã có giải pháp cho vấn đề của mình. Giải pháp là dễ dàng, giải thích không. Tôi sẽ giải thích các giải pháp từ đầu.

Đây là mã Javascript của tôi với jQuery mà tôi muốn thử nghiệm sử dụng hoa nhài-jquery:

$("input.toggler").on("click", function(e) { 
    [...] 
    doSomethingWith($(this)); 
}); 

Và bây giờ sử dụng Jasmine-jQuery tôi muốn đảm bảo rằng hàm JS "doSomethingWith" được gọi với đúng "$ (this)".

Thứ nhất có thể nghĩ rằng $ (this) === $ ("input.toggler"), nhưng điều đó không đúng. Bên trong chức năng gọi lại của trình xử lý nhấp chuột, $ (this) jQuery sử dụng không phải là đối tượng jQuery $ ("input.toggler") cũng như phần tử DOM được tham chiếu bởi đối tượng đó. Như Remy Sharp giải thích trong bài viết rất hay của mình "jQuery's this: demystified", "this" bên trong hàm gọi lại là phần tử DOM, nhưng $ (this) tạo một đối tượng jQuery từ phần tử DOM đó. Và điều đó không giống với đối tượng jQuery $ ("input.toggler"). Vì vậy, nếu bạn muốn thử nghiệm điều này với Jasmine bằng cách sử dụng hàm "toHaveBeenCalledWith", trước tiên bạn phải trích xuất phần tử DOM bằng cách sử dụng document.getElementById (...) hoặc else document.getElementsByTagName (...) [INDEX ] (trong đó INDEX là chỉ mục của phần tử bạn muốn, vì hàm sau cung cấp cho bạn một mảng các phần tử DOM), là Javascript cũ đơn giản. Sau đó, khi bạn đã giải nén phần tử DOM muốn, bạn phải tạo một đối tượng jQuery từ nó bằng cách đặt nó trong $ (và).

qua Jasmine-jQuery-thử nghiệm của tôi cuối cùng trông giống như thế này (sử dụng Coffeescript):

it "does something with my input element", -> 
    DOM_input_element = document.getElementsByTagName("input")[0] # Choose the correct DOM element here 

    spyOn myobject.functions, "doSomethingWith" 
    spyOnEvent($('input.toggler'), 'click') 

    [...] 

    $('input.toggler').trigger('click') 

    # Check for changes after click: 
    expect(myobject.functions.doSomethingWith).toHaveBeenCalledWith($(DOM_input_element)) 

Vì vậy, "$ (this)" từ mã Javascript của tôi chuyển thành "$ (DOM_input_element)" trong tôi Thử nghiệm Jasmine-jQuery.

Hy vọng điều này sẽ giúp bạn với các dự án của bạn! Phải mất một thời gian tôi mới hiểu được điều này.