Einen jQuery-Selektor-Aufruf absetzen?

Ich versuche, besser darin zu werden, mein JavaScript zu testen. Ich habe folgenden Code:

var categoryVal = $('#category').val();
if (categoryVal === '') { 
    doSomething();
} 

Mein Testläufer hat das nicht #category Eingabe auf der Seite, also wie würde ich den jQuery-Selektor hier stubn/mocken? Ich habe mir beide angeschaut Jasmin und Sünde Dokumentation, kann aber nicht herausfinden, wie man sie hier zum Laufen bringt, da ihre Stubs auf Objekten operieren, die $ ist nicht.

Das Problem hier ist das $() ist eine Funktion, die ein Objekt mit der Methode zurückgibt val(). Sie müssen also $() stubben, um ein Stub-Objekt mit der Methode val zurückzugeben.

$ = sinon.stub();
$.withArgs('#category').returns(sinon.stub({val: function(){}}));

Aber der Hauptfehler besteht darin, den Code, den Sie testen möchten, die Funktion $() aufrufen zu lassen, um neue Instanzen zu erstellen. Wieso den? Es empfiehlt sich, keine neuen Instanzen in Ihrer Klasse zu erstellen, sondern sie an den Konstruktor zu übergeben. Angenommen, Sie haben eine Funktion, die einen Wert aus einer Eingabe erhält, ihn verdoppelt und in eine andere zurückschreibt:

function doubleIt(){
    $('#el2').val(('#el1').val() *2);
}

In diesem Fall erstellen Sie 2 neue Objekte durch Aufruf $(). Jetzt müssen Sie stubsen $() um einen Mock und einen Stub zurückzugeben. Mit dem nächsten Beispiel können Sie dies vermeiden:

function doubleIt(el1, el2){
    el2.val(el1.val() *2);
}

Während Sie im ersten Fall $ stubn müssen, um einen Stub zurückzugeben, können Sie im zweiten Fall problemlos einen Stub und einen Spion an Ihre Funktion übergeben.

Der Sinon-Test für den zweiten würde also so aussehen:

var el1 =  sinon.stub({val: function(){}});
    el1.returns(2);

var el2 = sinon.spy({val: function(){}}, 'val')

doubleIt(el1, el2)

assert(el2.withArgs(4).calledOnce)

Da Sie hier also keine Dom-Elemente haben, können Sie Ihre Anwendungslogik einfach testen, ohne denselben Dom wie in Ihrer App erstellen zu müssen.

jQuery verwendet die CSS-Selektor-Engine Sizzle unter der Haube und wurde entkoppelt, sodass es nur an wenigen Stellen einhakt. Sie können dies abfangen, um jegliche Interaktion mit dem Dom zu vermeiden.

jQuery.find Es ist wichtig zu ändern, um mit allem zu reagieren, was Sie wollen. Sinon könnte hier verwendet werden oder die Funktion temporär auslagern.

z.B

existingEngine = jQuery.find
jQuery.find = function(selector){ console.log(selector) }
$(".test")
//>> ".test"
jQuery.find = existingEngine

Sie könnten auch eine bestimmte Catch-Bedingung mit einem Fallback anwenden

existingEngine = jQuery.find
jQuery.find = function(selector){
  if(selector=='blah'}{ return "test"; }
  return existingEngine.find.apply(existingEngine, arguments)
}

In meiner jüngsten Arbeit habe ich ein Dummy-Objekt erstellt, das wie ein Dom-Knoten reagiert, und dieses in ein jQuery-Objekt verpackt. Dies wird dann korrekt auf val() antworten und alle jquery-Methoden vorhanden haben, die es erwartet. In meinem Fall ziehe ich einfach Werte aus einem Formular. Wenn Sie tatsächliche Manipulationen vornehmen, müssen Sie möglicherweise klüger sein als dies, indem Sie möglicherweise einen temporären Dom-Knoten mit jQuery erstellen, der das darstellt, was Sie erwartet haben.

obj = {
  value: "blah",
  type: "text",
  nodeName: "input",
}
$(obj).val(); // "blah"

Hier ist eine ziemlich gute Anleitung zum Testen Ihrer Ansichten, wenn Sie Backbone.js und Jasmin verwenden. Scrollen Sie nach unten zum Abschnitt Ansicht.

http://tinnedfruit.com/2011/04/26/testing-backbone-apps-with-jasmine-sinon-3.html

Die Stubs arbeiten zwar mit Objekten. Ich denke, der Punkt, einen solchen View Stub zu erstellen.

this.todoViewStub = sinon.stub(window, "TodoView")
        .returns(this.todoView);

Ist nur um die Ansicht später rendern zu können.

this.view.render();

Mit anderen Worten, fügen Sie das Div ‘#category’ an das DOM des Testrunners an, damit $ darauf reagieren kann. Wenn sich Ihr „#category“-Div nicht in this.view befindet, können Sie wahrscheinlich einfach eine test.html-Seite erstellen, auf der Sie Ihren isolierten Test ausführen. Dies ist ein allgemeines Muster im Javascript-MVC-Framework, das ich eher an dieses Backbone gewöhnt bin.

Hier ist ein einfaches Beispiel für eine JMVC-Anwendungsstruktur:

/todo
   /models
      todo.js
   /list
      /views
         init.tmpl
         listItem.tmpl
      list.css           
      list.js        (Controller)
      unitTest.js    (Tests for your list.)
      list_test.html (A html for your unit tests to run on.)

Mit diesem Setup könnten Sie einfach das “#category” div in Ihre list_test.html einfügen, wenn Sie es nicht bereits in einer der Ansichten haben.