QUnit : 웹 사이트 DOM 트리 내에서 결과를 출력하지 않는 공식 해결책은 무엇입니까?

JavaScript를 단위 테스트하기위한 프레임 워크 인 QUnit을 간략하게 살펴 보았습니다. 제 의도는 QUnit으로 복잡한 웹 사이트 동작을 디버깅하는 것이 었습니다.QUnit : 웹 사이트 DOM 트리 내에서 결과를 출력하지 않는 공식 해결책은 무엇입니까?

그러나 기본적으로 QUnit의 모든 출력은 DOM 트리 내에서 생성 된 것으로 보입니다. 따라서 DOM 트리에서 작동하는 모든 테스트 용 JavaScript는 단위 테스트를 실행할 때 다르게 작동합니다. 내 말은, 실제 웹 사이트에는 QUnit의 출력 섹션이 없을 것입니다. 내 tests.js 내

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>QUnit Example</title> 
    <!-- not needed  <link rel="stylesheet" href="qunit-1.15.0.css"> --> 
    <style> 
     #test { 
      background-color: #ff9900; 
     } 
    </style> 
</head> 
<body> 

<!-- not needed... 

    <div id="qunit"></div> 
    <div id="qunit-fixture"></div> 
--> 

    <script src="qunit-1.15.0.js"></script> 
    <script src="tests.js"></script> 

    <div id="testdiv">My normal DOM DATA</div> 
</body> 
</html>

내가 다음 코드가 :

나는 출력에 브라우저의 콘솔에 결과를 몇 가지 방법을 발견이 작동

QUnit.log(function(details) { 
    console.log("QUnit: '" + details.name + "' = " 
     + (details.result ? "PASS" : "FAIL, " + "'"+details.message+"'")); 
});

합니다. 그러나, 빠른 & 더러운 솔루션을 내 현재 열려있는 문제는 다음과 같습니다 내 브라우저의 콘솔을 열 필요가

. 기존 솔루션은 모든 테스트가 완료되면 alert()을 생성 할 수 있습니다 (모든 결과 합계). 단일 실패/통과 테스트에 alert()을 보내는 코드를 수정하는 것은 간단합니다 (문제 3 참조).
"noglobals"체크 기능을 사용할 수 없습니다.이 기능은 매우 편리합니다./의미, 나는 자바 스크립트 API를 통해 그것을 설정하는 방법을 찾을 수 없습니다.
기존/공식 솔루션이 있는지 궁금해합니다. (바퀴를 다시 만들 필요가 없습니다.)

출처

2014-10-24 SDwarfs

그럼 먼저 단위 테스트를위한 자바 스크립트! 이것은 강조하는 많은 이유 때문에 종종 피하는 것이기 때문에 노력하는 것을 보는 것이 좋습니다.

QUnit은 브라우저에서 실행됩니다. 을 제외한 다른 JS 테스트 라이브러리는 절대적으로 (예 : 모카)이어야하지만 실제로 웹 사이트 코드를 테스트 할 때는 그렇지 않습니다 (주로 노드 테스트 용). 웹 사이트 JS 코드를 테스트하려면 브라우저 컨텍스트에 있어야합니다. 그러나 더 중요한 점은 입니다. 브라우저에서 QUnit 결과를 볼 필요가 없습니다.

출력을 보는 가장 쉬운 방법은 설정이 가장 빠르지 만 자동화 도구를 사용하는 것입니다. 예를 들어 PhantomJS를 브라우저로 사용하는 Grunt과 QUnit plugin for Grunt을 사용하면 테스트 실행을 자동화하고 터미널에서 출력을 볼 수 있습니다 (브라우저 JS 콘솔이 아니라 Linux/Mac/Windows 터미널). Grunt는 Jenkins, Travis 또는 TeamCity와 같은 지속적인 통합 도구에서도 사용할 수 있습니다.

실제로 QUnit을 사용하면 테스트 실행 후 모든 결과를 얻고 원하는 결과를 얻을 수 있습니다.그래서 만약 당신이 (같은보고 아약스 엔드 포인트로 전송) 결과를 처리하고 그들과 함께 뭔가를 자신의 코드를 작성할 수 : 그래서

var log = []; 
// set up a handler to capture the output from QUnit.log() 
// then put that output into the array above for reporting later 
QUnit.testStart(function(testDetails){ 
    QUnit.log(function(details){ 
    if (!details.result) { 
     details.name = testDetails.name; 
     log.push(details); 
    } 
    }); 
}); 

// set up a callback for when the entire test suite is complete 
QUnit.done(function (totals) { 
    // do whatever you need to in here with the totals (http://api.qunitjs.com/QUnit.done/) 
    // and with the individual test `log` array 
});

을, 특히 당신의 질문에 대답 :

당신은 할 수 window.alert(...)에서 QUnit.done() 콜백에 연결하십시오 ...하지만 자동화 솔루션을 사용하는 것이 더 나을 것 같습니다. 내 위의 예, 우리는 우리의 모든 프로젝트에 그런트를 사용하여 볼 수 있지만, 십자가 http://localhost:1234/tests/index.html?noglobals=true
: 프로그래밍 방식으로 API를 통해 noglobals 스위치를 설정 할 수는 없지만
, 당신은 단순히 테스트 파일의 URL에 그것을 압정 수 있습니다 브라우저 테스트 Sauce Labs 및 해당 VM API를 살펴 보겠습니다.

행운을 빕니다!

출처

2014-10-24 13:33:13 jakerella

도움 주셔서 감사합니다. 자동화 솔루션은 복잡한 계산과 AJAX 통신 분석에 적합합니다. PhantomJS에 대해서도 자세히 살펴볼 것입니다. 이 기능은 특수 브라우저 및/또는 화면에 표시된 정보와 관련이없는 모든 자동화 된 테스트에 유용합니다 (수동 또는 스크린 샷을 비교하여 검사해야 할 가능성이 가장 높음). 소스 랩이 잘 되었다면 테스트 할 수 있습니다. 하지만, 비 자유형 옵션은 불행히도 제 비영리적 웹 사이트 프로젝트의 옵션이 아닙니다. – SDwarfs

추 신 : 상업적인 목적으로 돈을 사용하고 돈을 벌어들이는 다른 사람들이 아니기 때문에 저의 프로젝트는 폐쇄적입니다. 오픈 소스 프로젝트를위한 무료 옵션을 사용할 수 없기 때문에 ... – SDwarfs

QUnit : 웹 사이트 DOM 트리 내에서 결과를 출력하지 않는 공식 해결책은 무엇입니까?

답변

관련 문제