Jasmine을 사용하여 JQuery 플러그인을 테스트하려면 어떻게해야합니까?

Question

Jasmine과 JQuery 코드를 테스트하는 가장 좋은 방법은 무엇입니까?

나는이 간단한 jQuery를 테스트 응용 프로그램이 있습니다

<div id='log'>log goes here</div> 
<button id='btnClearLog'>Clear log</button> 
<button id='btnAddLog'>Add log</button> 

<script> 
$(document).ready(function() { 

    $('#log').empty(); 

    $('#btnClearLog').click(function() { 
     $('#log').empty(); 
    }); 

    $('#btnAddLog').click(function() { 
     $('#log').append("<br />something");  
    }); 
}); 
</script> 

이 예상대로 작동 - 문서가로드, 클릭하면 #log 명확 #log에 추가 할 때 DIV 번호의 로그가 비어 있습니다.

하지만 JQuery 코드가 HTML 페이지 안에 있기 때문에 단위 테스트를 수행 할 수 없다고 생각합니다.

<div id='log'>log goes here</div> 
<button id='btnClearLog'>Clear log</button> 
<button id='btnAddLog'>Add log</button> 

<script> 
$(document).ready(function() { 

    $('#log').tester(); 

}); 
</script> 

별도의 파일에 jQuery 코드를 외면 화 한 - 그래서 같은 - 생성 jQuery 플러그인 코드를 기반으로 http://starter.pixelgraphics.us/

(function($){ 

    $.Tester = function(el){ 

    var base = this; 

      base.init = function(){ 

     $('#log').empty(); 

     $('#btnClearLog').click(function() { 
      base.clear(); 
     }); 

     $('#btnAddLog').click(function() { 
      base.add(); 
     }); 
      }; 

    base.clear = function(){ 
     $('#log').empty(); 
      }; 

    base.add = function(){ 
     $('#log').append("<br />something"); 
      }; 

      base.init(); 
    }; 

    $.fn.tester = function(){ 
     return this.each(function(){ 
      (new $.Tester(this)); 
     }); 
    }; 

})(jQuery); 

에서 :

그래서,이처럼 다시 작성했습니다

이것은 예상대로 작동합니다.

그러나 재 스민 스크립트에서 시도한 것이 작동하지 않습니다.

describe('tester', function() { 

    it('log should be empty', function() { 
     var log = "<div id='log'>log</div>"; 
     var result = $(log).tester(); 
     expect(result).toBeEmpty(); 
    } 

}); 

나는 위의 다양한 순열을 시도했습니다 - 모두 실패 :

"Expected '<div id="log">log</div>' to be empty" 

가이 방식으로 작성 플러그인을 테스트 할 수 있습니까?

더 테스트 할 수 있도록 다른 방법으로 코드를 작성하는 것이 더 좋습니까?

Answer 1

여기에 몇 가지 문제가 있습니다. 먼저 코드를 쿼리 코드의 테스트 기능과 혼합하여 테스트하십시오. 따라서 expect(result).toBeEmpty();은이 $('#log').empty() 코드가 호출되었는지 테스트 할 것입니다.이 코드는 테스트하기에 적합하지만 요소가 비어 있는지도 테스트합니다. 이는 사용자의 직업이 아닙니다.

둘째, 테스트하려는 코드에서 새 인스턴스를 만들고, 테스트하기가 어려우므로 $을 처리해야합니다.

(function($){ 

    $.Tester = function(el, log, btnClearLog, btnAddLog){ 

    var base = this; 

      base.init = function(){ 

     log.empty(); 

     btnClearLog.click(function() { 
      base.clear(); 
     }); 

     btnAddLog.click(function() { 
      base.add(); 
     }); 
      }; 

    base.clear = function(){ 
     log.empty(); 
      }; 

    base.add = function(){ 
     log.append("<br />something"); 
      }; 

      base.init(); 
    }; 

    $.fn.tester = function(){ 
     return this.each(function(){ 
      (new $.Tester(this, $('#log'), $('#btnClearLog'), $('#btnAddLog'))); 
     }); 
    }; 

})(jQuery); 

그래서 당신은 당신의 테스터를 테스트 할 수 있습니다 그 일을 대신 실제 DOM 요소의 일부 모의 객체를 전달 : 그래서 결국 당신의 Tester() 기능을 테스트하고 바로 모든 요소를 ​​삽입하는 것이 더 만 할 것이다. 가짜를 만들고 사용하는 방법에 관해서는 sinon을보십시오. 우리가 자바 스크립트 세계에 있기 때문에 JQuery를 멀리 조롱 할 수도 있습니다. jquery를 테스트 측에 삽입하지 말고 가짜로 옮깁니다.