ジャスミンでjQuery ajaxを呼び出す

Question

jasmine 2.5.2を使用して、jQuery 3.1.1を使用してAjaxリクエストを実行するコードの単体テストを記述しています。私はAjax呼び出しを模擬して、自分の応答ステータスとテキストを提供したいと思います。

私はJasmine ajaxプラグイン（https://github.com/pivotal/jasmine-ajax）を使用しています。

XMLHttpRequestオブジェクトを使用するhttps://jasmine.github.io/2.0/ajax.htmlの例に従えば、正常に動作します。

describe("mocking ajax", function() { 
    describe("suite wide usage", function() { 
     beforeEach(function() { 
      jasmine.Ajax.install(); 
     }); 

     afterEach(function() { 
      jasmine.Ajax.uninstall(); 
     }); 

     it("specifying response when you need it", function() { 
      var doneFn = jasmine.createSpy("success"); 

      var xhr = new XMLHttpRequest(); 
      xhr.onreadystatechange = function(args) { 
       if (this.readyState == this.DONE) { 
        doneFn(this.responseText); 
       } 
      }; 

      xhr.open("GET", "/some/cool/url"); 
      xhr.send(); 
      expect(jasmine.Ajax.requests.mostRecent().url).toBe('/some/cool/url'); 
      expect(doneFn).not.toHaveBeenCalled(); 

      jasmine.Ajax.requests.mostRecent().respondWith({ 
       "status": 200, 
       "contentType": 'text/plain', 
       "responseText": 'awesome response' 
      }); 
      expect(doneFn).toHaveBeenCalledWith('awesome response');      
     }); 
    }); 
}); 

NB：これは文書化の例とは少し異なり、jasmine.Ajax.requests.mostRecent().respondWith()にjasmine.Ajax.requests.mostRecent().response()を変更しなければなりませんでした。

jQuery Ajaxを使用すると、doneFnは決して呼び出されません。

describe("mocking ajax", function() { 
    describe("suite wide usage", function() { 
     beforeEach(function() { 
      jasmine.Ajax.install(); 
     }); 

     afterEach(function() { 
      jasmine.Ajax.uninstall(); 
     }); 

     it("specifying response when you need it", function() { 
      var doneFn = jasmine.createSpy("success"); 

      $.ajax({ 
       method: "GET",    
       url: "/some/cool/url"}) 
      .done(function(result) { 
       doneFn(result); 
      }); 
      expect(doneFn).toHaveBeenCalledWith('awesome response');      
     }); 
    }); 
}); 

はジャスミンは

ジャスミン-Ajaxは XMLHttpRequestオブジェクトであなたの要求をあざけり、そうAJAX要求を行う他の のライブラリと互換性がなければならないと述べています。

$ .ajaxは、XMLHttpRequestではなく、1.4.xからjqXHRを返します。これは、Jasmine Ajaxでサポートを中断しますか？ここで

Answer 1

はあなたのジャスミンテスト

アプローチAにAJAXを模擬可能性はいくつかの方法です：モックajax.jsを使用して

• で説明したように、あなたは世界のXHRオブジェクトを模擬することができますあなたがcallThroughを（次のコードに見られるように）成功関数にスパイを指定し、それを聞かせする必要がありますしかしdoc

• は、アクションでそれを参照してください。 here

  describe('ajax test suite', function() { 
  
      beforeEach(function() { 
      jasmine.Ajax.install(); 
      }); 
  
      afterEach(function() { 
      jasmine.Ajax.uninstall(); 
      }); 
  
      it('sample test', function() { 
      var xhr = new XMLHttpRequest(); 
      xhr.onreadystatechange = function(args) { 
       if (this.readyState == this.DONE) { 
       testObj.successFunction(this.responseText); 
       } 
      }; 
      spyOn(testObj, 'successFunction').and.callThrough(); 
      xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); 
      xhr.send(); 
      expect(jasmine.Ajax.requests.mostRecent().url).toBe('https://jsonplaceholder.typicode.com/posts/1'); 
      expect(testObj.successFunction).not.toHaveBeenCalled(); 
      jasmine.Ajax.requests.mostRecent().respondWith({ 
       "status": 200, 
       "contentType": 'text/plain', 
       "responseText": 'awesome response' 
      }); 
      expect(testObj.successFunction).toHaveBeenCalledWith('awesome response'); 
      }); 
  }); 
  

アプローチB：

• 直接S.ajaxオブジェクトをモック。 get/post/loadまたはjqueryからのajaxフレーバーであれば、以下のように$ .ajaxを単純にモックすることができます。

  var testObj = { 
      ajaxFunction : function(url){  
      $.ajax({url : url}).done(this.successFunction.bind(this)); 
      }, 
      successFunction : function(data){ 
      console.log(data); 
  } 
  } 
  
  describe('ajax test suite', function(){ 
      it('sample test', function(){ 
      testObj.ajaxFunction('https://jsonplaceholder.typicode.com/posts/1'); 
      spyOn($, 'ajax').and.callFake(function(e) { 
        return $.Deferred().resolve({'text':'this a a fake response'}).promise(); 
      }); 
      spyOn(testObj, 'successFunction').and.callThrough(); 
      testObj.ajaxFunction('https://jsonplaceholder.typicode.com/posts/1'); 
      expect(testObj.successFunction).toHaveBeenCalledWith({'text':'this a a fake response'}); 
      }); 
  }); 
  

Answer 2

S.ajaxオブジェクトをからかっ は、渡されたパラメータが約束インタフェースを経由せずに、成功または失敗をトリガするために直接使用することができます。

spyOn($, 'ajax').and.callFake(function (options) { 
    var result = undefined, status, xhr; 
    options.success(result, status, xhr); 
}); 

spyOn($, 'ajax').and.callFake(function (options) { 
    var xhr = undefined, status, error; 
    options.error(xhr, status, error); 
});