使用Qunit對javascript函數進行單元測試

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. 容器具有與消息類型對應的類
4. 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
});