QUnit 테스트는 기능 테스트중인 내부 문서 준비 블록이 선언 될 때 실패 (인생)

나는이 게시물에하지만 몇 가지 개선을 기반으로 jQuery로 웹 위젯을 짓고 있어요 : 이제 http://alexmarandon.com/articles/web_widget_jquery/QUnit 테스트는 기능 테스트중인 내부 문서 준비 블록이 선언 될 때 실패 (인생)

나는 몇 가지를 쓰기 시작 테스트는하지만 실패하고 있으며, 위의 링크에서 제안 된 것처럼 함수 내에 문서 준비 블록을 선언하는 것과 관련이 있다고 생각합니다. 그러나

: 여기

var MyWidget = (function(w, d, $, undefined){ 

    var _getContent = function() { 
     return 'My Widget Content'; 
    } 

    var render = function(){ 
     $(function(){ 
      var content = _getContent(); 
      $('#container').html(content); 
     }); 
    } 

    return { 
     render: render 
    } 

})(window, document, jQuery, undefined);

시험이다 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>MyWidget Tests</title> 
    <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css"> 
</head> 
<body> 
    <div id="qunit"></div> 
    <div id="qunit-fixture"> 
     <div id="container"></div> 
    </div> 

    <script src="../bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="../bower_components/qunit/qunit/qunit.js"></script> 
    <script src="mywidget.js"></script> 

    <script> 
     QUnit.test('Test Content', function(assert){ 
      MyWidget.render(); 

      assert.equal($('#container').html(), 'My Widget Content'); 
     }); 
    </script> 
</body> 
</html>

그리고 여기에서 결과

여기서 위젯의 벗었 버전 $(function(){ 코드를 삭제하면 테스트 패스 에스.

어떤 아이디어가 실현 될까요?

감사합니다!

출처

2017-05-06 goathi

글쎄, 내 첫번째 추측은 그 DOMCont 주위에 jQuery의 [래퍼 entLoaded] (https://api.jquery.com/ready/) 이벤트가 이미 발생했기 때문에 어떻게 든 트리거되지 않으며 QUnit은 이벤트 처리기의 지연된 실행을 방해합니다. 까다로운 일 ... 위젯 일을 쉽게 테스트 할 수 있어야합니다. QUnit의 버그 일 수도 있습니다. 내가 당신의 위젯 밖에서 재현 할 수 있는지 보겠습니다. – jakerella

이 작업을 수행하려면 다르게 작업 하시겠습니까? – goathi

아마 위젯에서'ready' 함수를 사용하지 않을 것입니다. 나는'ready' 물건을 만들기 위해 내 위젯을 사용하는 코드에 의존 할 것이다. 30 개의 위젯을 가진 앱이 있다고 상상해보십시오. 모두 자신의'ready' 이벤트 핸들러가 필요합니까? 아마도 그렇지 않습니다. – jakerella

좋아요, 문제가 무엇인지 알았습니다. 나는 그것을 더 일찍보아야했다. 당신의 render 기능이 후 를 호출되고 있지만 문서 (테스트가 바닥에 그것을 호출 때문에) 준비, 그것은 여전히 비동기 때문에 사용하는 ready 핸들러 ($(function() {})이다. 따라서 비동기 테스트를 수행해야합니다. 또한, (a) 호출 코드에 완료 코드 (예 : Promise 또는 jQuery's Deferred)를 알리기 위해 위젯에서 일부 메커니즘을 생성해야합니다. 또는 (b) 도 필요합니다. 시험에서 ready 처리기를 사용하십시오. 여기에 소스 코드와 함께 작동 시험 (그리고 JSBin to see it)입니다 : 당신이 jQuery를 이연 경로를 이동하고 싶다면

QUnit.test('Test Content', function(assert){ var done = assert.async(); MyWidget.render(); $(function() { assert.equal($('#container').html(), 'My Widget Content'); done(); }); });

, 당신은 당신의 render 소스 같은 것을 할 수 있습니다 :

var render = function(){ var defObj = jQuery.Deferred(); $(function(){ var content = _getContent(); $('#container').html(content); defObj.resolve(); }); return defObj; }

그런 다음 테스트 만 약속 핸들러로, 위의 테스트 예제에서 내가 무엇을 할 본질적 것 :

QUnit.test('Test Content', function(assert){ var done = assert.async(); MyWidget.render() .then(function() { assert.equal($('#container').html(), 'My Widget Content'); done(); }) .fail(done); }); });

출처

2017-05-11 15:00:57 jakerella

연구에 시간을내어 솔루션을 제공해 주셔서 감사합니다.그것은 매우 합리적이긴하지만 지금은 그렇게 우아하지 않습니다. 다른 옵션들 중 가장 간단한 이유는 첫 번째 옵션과 함께 갈 것입니다. 감사! – goathi

QUnit 테스트는 기능 테스트중인 내부 문서 준비 블록이 선언 될 때 실패 (인생)

답변

관련 문제