كيفية اختبار jQuery مع الياسمين مقابل $ ("# Element-id") إذا تم استخدامه ك $ (هذا)

Question

لا أعرف كيفية تشغيل اختبار الياسمين هذا لبلدي JS وبالتأكيد أيضا شركته تنوي أخرى لديك هذه المشكلة.ربما أفعل الخطأ أو ربما من المستحيل - لم أجد أي تلميح على هذا.يجب أن تفعل المشكلة مع حقيقة أن - في مسج - $ (هذا) ليست هي نفس العنصر الذي تم اختياره بواسطة E.G.$ ("# هذا المعرف"):

جافا سكريبت: giveacodicetagpre.

jasmine-test (coffeescript): giveacodicetagpre.

لسوء الحظ فشل هذا الاختبار (مع أي اختلاف مثل تخزين المرجع في متغير أولا في اختبار الياسمين الخاص بي)، لأن الوظيفة لا يتم استدعاؤها ب $ ("# زر" معرف ")، ولكن بدلا من ذلك يطلق عليه $ (هذا)، $ (هذا)!= $ ("# زر" معرف ").

هل يمكن لأي شخص أن يقول لي كيفية إنجاز هذا الاختبار؟أنا ضائع جدا.حتى مقالة ريمي شارب كبيرة على مسج و $ (هذا) DIDNر الحصول على لي أكثر.

Answer 1

Ok, now I've got the solution to my problem. The solution is easy, the explanation not. I'll explain the solution from scratch.

This is my Javascript code with jQuery that I want to test using jasmine-jquery:

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

And now using Jasmine-jQuery I want to ensure that the JS function "doSomethingWith" gets called with the correct "$(this)".

First one might think that $(this) === $( "input.toggler" ), but that is not true. Inside the callback function of the click handler, the $(this) jQuery uses is neither the jQuery object $( "input.toggler" ) nor the DOM element referenced by that object. As Remy Sharp explains in his really nice article "jQuery's this: demystified", the "this" inside the callback function is the DOM element, but $(this) creates a jQuery object from that DOM element. And that is not identical to the jQuery object $( "input.toggler" ).

So if you want to test this with Jasmine using the function "toHaveBeenCalledWith", you have to first extract the DOM element using either document.getElementById(...) or else document.getElementsByTagName(...)[INDEX] (where INDEX is the index of the element you want, since the latter function gives you an array of DOM elements), which is plain old Javascript. Then, when you have extracted the DOM element wanted, you have to create a jQuery-object from it by enclosing it in $( and ).

My passing Jasmine-jQuery-test finally looks something like this (using 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 ) )

So the "$(this)" from my Javascript code translates to "$(DOM_input_element)" in my Jasmine-jQuery test.

Hopefully this helps you with your projects! It took me quite a while to figure this out.