2013-02-21 1 views
3

qUnit에 깊이 들어가기 시작했으나 문제가 발생하여 테스트를 올바르게 작성하는 방법을 모르겠습니다.jQuery UI 대화 상자에 대해 qUnit 테스트를 작성하는 방법은 무엇입니까?

이 기능은 기본적으로 버튼을 누르면 jQuery UI 대화 상자에 경고합니다.

test("If Text is Type, and Control is Textbox, Check Alert if Two Values are Present", function() { 

    //Add New Row 
    $('.button').click(); 


    equal($('#jquery_ui_id').is(':visible'), true, "Prompt is Shown"); 

}); 

문제는 테스트가 qUnit, 에 있지만 다시로드에 전달하는 것입니다 : 여기 내 qUnit 테스트입니다. 그래서 테스트를 처음 실행하면 항상 실패하고 다시로드 할 때 성공합니다.

여기에 무슨 일이 일어나고 있는지, 또는 전에이 문제가 있었는지 아는 사람이 있습니까?

+2

이것은 이전 테스트를 올바르게 정리하지 않은 것과 관련 될 수 있습니다. 각 테스트가 끝날 때 DOM에 추가하는 요소를 제거해야합니다. – jbabey

+0

이것은 문제가되는 것 같습니다. qUnit은 모든 '테스트'모듈마다 자동으로이를 수행했다고 생각했습니다. 이것은 사실이 아닌가? (답장에이 글을 쓰는 경우 올바른 것으로 선택해야합니다!) – streetlight

+0

이 질문은 DOM이 재설정되지 않은 이유에 대한 세부 정보를 제공합니다. 간단히 말하면, JQuery는 # qunit-fixture 외부에 html 코드를 추가합니다. – AXMIM

답변

4

일반적으로 페이지를 다시로드 할 때 qUnit 테스트가 실패하고 성공할 때 전환되면 테스트 후 제대로 정리되지 않고 서로 충돌하는 것입니다.

#qunit-fixture 요소를 사용하지 않고 DOM에 요소를 추가하고 모듈에서 조작하거나 테스트하는 경우 해당 모듈의 끝에서 요소를 제거해야 다음 모듈을 새로 시작할 수 있습니다.

자세한 내용은 keeping qUnit tests atomic 섹션을 참조하십시오.

QUnit은 각 테스트 이후에 # qunit-fixture 요소 내부의 요소를 재설정하여 존재할 수있는 이벤트를 제거합니다. 이 픽스처 내에서만 요소를 사용하는 한 수동으로 을 제거하지 않아도 테스트 후 정리가 필요 없습니다.

0

에 동일한 문제가 있으며 요소 #qunit-fixture에서 모든 내 DOM을 렌더링해야합니다. 조사 중, JQuery-UI가 대화 상자의 요소를 직접 <body>에 추가한다는 것을 알았습니다.

이렇게 몸체 앞에 # qunit-fixture를 렌더링하는 것이 좋습니다. 내 경우에는 몸 안에 자바 스크립트 스크립트가 있는데 이것은 # qunit-fixture 아래에 가지 않습니다. 그래서 나는 그 전에 신체에서 대본을 제거해야 할 것입니다.

<html> 
    <head></head> 
    <div id="qunit-fixture"><!--Wrap whole body into fixture--> 
     <body> 
     </body> 
    </div> 
</html> 


주위에 또 다른 방법은 수동으로 분해에 추가 된 물건을 제거하는 것입니다. 정리하려면

module("SomeModule", 
{ 
    teardown: function() 
    { 
     $('.ui-front').remove();//Need to be reset manually, because jquery dialog add these outside of fixture... 
    } 
}); 

는 모든 클래스 'UI를 전면 "을 가지고 우리가 사실을 사용하여 요소를 추가했다.