qUnit에서 DOM 객체를 테스트하는 방법은 무엇입니까?

Question

qUnit으로 일부 JavaScript를 테스트하고 있습니다. 한 객체에서 DOM 요소를 전달하고 일부 메소드는 요소의 일부 속성을 변경합니다.

어떻게 qUnit에서 DOM 개체를 조롱 할 수 있습니까?

솔루션 브라우저를 독립적으로 사용하고 싶습니다. XUL 응용 프로그램도 테스트합니다.

Answer 1

JavaScript로 요소를 만들 수 있습니다.

document.createElement('div'); // 'div' will create a '<div>' 

그래서 그냥뿐만 아니라 qUnit 테스트 기능이 사용할 수 있습니다 : 당신이 (예를 들면 몸에)을 추가하지 않으면 그것을 모의 요소를 호출 할 수 있도록, 그것은 표시되지 않습니다 : http://jsfiddle.net/LeMFH/.

test("test", function() { 
    expect(1); 

    var elem = document.createElement("div"); 

    elem.style.position = "absolute"; 

    equals(elem.style.position, "absolute"); 
}); 

Answer 2

나는 간단한 기본 트리 확장 기능을 제공하는 JQuery 플러그인에 대한 단위 테스트를 만들고 싶었다. QUnit "ok"메서드를 사용하여 더미 라인 항목 ("LI"요소)을 만들고이 DOM의 자식으로 테스트 DOM을 삽입하는 방법을 발견했습니다.이 방법으로 결과 조작 DOM을 테스트를 확장하여 검사 할 수 있습니다. 또한 테스트가 실패하면 조작 된 DOM 요소가 QUnit 시스템에 자동으로 표시됩니다. 그 결과 QUnit 출력처럼 보이는 다음

이 문제에 대한 나의 해결책은 QUnit 테스트 명령을 확인할 수 있도록 광고 항목의 텍스트와 테스트 HTML 정의 할 수있다 "testSpace"라는 함수를 만드는 것이 었습니다 결과의 DOM. 다음은이 기능을 사용하는 테스트 코드 경우 : "testSpace"기능은 QUnit "확인"방법을 사용하여 개별 항목을 정의

test("$.fn.tocControl", function() { 
    var sTest = 
      "<div>" 
      + "<ul>" 
       + "<li>item1</li>" 
       + "<li>item2" 
        + "<ul>" 
         + "<li>s1item1</li>" 
         + "<li>s1item2" 
         + "<ul>" 
          + "<li>s2item1</li>" 
          + "<li>s2item2" 
          + "</li>" 
          + "<li>s2item3</li>" 
          + "<li>s2item4</li>" 
         + "</ul>" 
         + "</li>" 
         + "<li>s1item3</li>" 
         + "<li>s1item4</li>" 
        + "</ul>" 
       + "</li>" 
       + "<li>item3</li>" 
       + "<li>item4</li>" 
       + "<li>item5</li>" 
      + "</ul>" 
     + "</div>"; 

    // Create the test HTML here. 
    var jqTest = testSpace("$.fn.tocControl.test", sTest); 

    // Invoke the JQuery method to test. 
    jqTest.find("ul").tocControl(); 

    // QUnit tests check if DOM resulting object is as expected. 
    equal(jqTest.find("ul.ea-toc-control").length, 1, '$("div#testSpace ul.tocControl").length'); 
    equal(jqTest.find("ul:first").hasClass("ea-toc-control"), true, '$("div#testSpace ul:first").hasClass("tocControl")'); 
}); 

을하지만, 처음 DOM이 QUnit 시스템을 정의 할 때까지 임시 위치에 객체를 생성합니다 광고 항목 이 함수는 다음과 같이 정의됩니다 :

function testSpace(sName, sHTML) { 
    ok(true, sName); 

    var jqTestItem = $("ol#qunit-tests > li:last"); 
    jqTestItem.append('<div id="testSpaceContainer" style="display:none;">' + sHTML + '</div>'); 

    var jqTestSpace = jqTestItem.children("div#testSpaceContainer:first"); 

    var moveTestSpaceStart = $.TimeStamp(); 
    var moveTestSpace = function() { 
     var jqTestArea = jqTestItem.find("ol > li:contains(" + sName + ")").filter(function() { return $(this).text() == sName; }); 
     if (jqTestArea.length <= 0) { 
      if (!$.HasTimedOut(moveTestSpaceStart, 5000)) setTimeout(moveTestSpace, 200); 
      return false; 
     } 
     var oTestSpace = jqTestSpace.detach(); 
     jqTestArea.append(oTestSpace); 
     jqTestArea.find("div#testSpaceContainer").show(); 
     return true; 
    } 
    moveTestSpace(); 

    return jqTestSpace.children().first(); 
}