qunit 및 mockjax로 ajax 테스트 테스트

Question

아약스 호출을 테스트하려고합니다. 올바른 데이터와 결과로 올바른 URL이 호출되는지 테스트해야합니다. 실패한이 테스트로 시작합니다. 내가 얻는 오류는 "예상 : 저장 됨, 실제 :"입니다. 내 녹아웃 뷰 모델에

기능 -

self.functions.save = function() { 
    $.ajax({ 
     url: '/x', 
     data: { test: "" }, 
     dataType: "json", 
     success: function (response) { 
      self.saved(response.message); 
     } 
    }); 
}; 

Qunit 테스트 -

test('save does ajax call', function() { 
     $.mockjax({ 
      url: '/x', 
      dataType: 'json', 
      responseText: 
       { 
        message: 'saved' 
       } 
     }); 
     mock.functions.save(); 
     equal(mock.saved(), "saved"); 
}); 

Answer 1

여기서 문제는 실행의 순서입니다. save() 메서드는 비동기 작업을 수행하며 Mockjax는이를 존중합니다. 따라서 테스트에서 mock.functions.save();을 호출하면 해당 함수 이 즉시을 반환합니다. 이는 equal() 어설 션이 소스 코드에서 ajax 호출의 success 핸들러보다 먼저 발생 함을 의미합니다. 테스트가 Ajax 호출이 완료된 시점을 알 수있는 방법을 추가해야합니다. 아래 예제에서는 간단한 콜백을 사용했지만 Promises 또는 다른 방법을 사용하여이 작업을 수행 할 수도 있습니다.

소스 코드 : 테스트에서

self.functions.save = function (callback) { 
    callback = callback || function(){}; // ensure we have a callback 
    $.ajax({ 
     url: '/x', 
     data: { test: "" }, 
     dataType: "json", 
     success: function (response) { 
      self.saved(response.message); 
     }, 
     // when the call is finished, execute the callback (success or error) 
     complete: function() { 
      callback(); 
     } 
    }); 
}; 

, 당신은 QUnit의 비동기 기능을 사용해야합니다. 거기에 new way to do async testing in v1.16.0, 그래서 중 하나를 업데이트하거나 the old way를 찾아 볼 수 있습니다 :

는

QUnit.test('save does ajax call', function (assert) { 
    // first tell QUnit you need to perform async actions... 
    var done = QUnit.async(); 

    $.mockjax({ 
     url: '/x', 
     dataType: 'json', 
     responseText: 
      { 
       message: 'saved' 
      } 
    }); 
    mock.functions.save(function() { 
     // this callback fires when the async action is complete, 
     // so now we do our assertions 
     assert.equal(mock.saved(), "saved"); 

     // ...and now we tell QUnit we're done with async actions 
     done(); 
    }); 
});