Qunit을 이용한 단위 테스트 자바 스크립트

Question

UI를 테스트 할 수있는 단위 테스트를 만들 수 있습니까? 다음은 예입니다.

addMessage = function (type, message) { 
     //success, error, info, block(alert)   
     $("body").append('<div id="messageCenter" class="alert alert-' + type + '" style="position: fixed; top: 0; width: 100%; text-align:center;">' + message + '</div>'); 
     setTimeout(function() { 
      $("#messageCenter").fadeOut(500, function() { 
       $("#messageCenter").remove(); 
      }); 
     }, 10000); 

    } 

이렇게하면 사용자에게 몇 가지 정보를 표시 할 메시지 표시 줄이 만들어집니다. 누군가이 함수에 대한 단위 테스트의 예제를 도울 수 있습니까? 미리 감사드립니다.

Answer 1

단위 테스트는 시각적 요소를 100 % 안정적으로 테스트 할 수 없으며 항상 수동으로 작동하는지 확인해야하지만 항상 할 수있는 일이 있습니다. 완전한 것이거나 코드 커버리지를 위해 아무것도 아닌 경우.

먼저 함수에서 수행해야 할 작업과 테스트에서 수행 할 작업을 설명하십시오. 예를 들어 메시지가 페이지

메시지에 추가됩니다

1. 정확한 내용이
2. 컨테이너는 메시지가 더 이상에 볼 수있는 메시지 유형에
3. 10.5 초 후에 해당하지 않는 클래스가 페이지 (타임 아웃 + 페이드 아웃).

이제 특정 요구 사항에 대한 단위 테스트를 작성하는 것이 쉬워졌습니다.

asyncTest("Message bar functionality", function() { 
    expect(4); 

    addMessage('info', 'test'); 
    equal($('#messageCenter').length, 1, "Div created"); 
    equal($('#messageCenter.alert-info').length, 1, "Message has correct class"); 
    equal($('#messageCenter').text(), 'test', "Message has correct content"); 

    setTimeout(function() { 
     equal($('#messageCenter').length, 0, "Message no longer visible after 11 seconds"); 
     start(); 
    }, 11000); // 10500 might be too tight, 10600 would probably be fine too 
});