测试客户端的JavaScript代码茉莉

Question

我的javascript代码，看起来像这样：

this.ProgressBarUpdater = { 
    poll: function() { 
    setInterval(ProgressBarUpdater.request, 5000); 
    }, 

    request: function() { 
    $(".progress_bar_updater[data-url]").each(function(i, elem) { 
     url = $(elem).data("url"); 

     $.getJSON(url, function(data) { 
     if (isFinished(data)) { 
      location.reload(); 
     }; 

     $.each(data, function(key, val) { 
      updateProgressBar(key, val); 
     }); 
     }); 
    }); 
    } 
}; 

isFinished = function(obj) { 
    var correct = true; 
    for (key in obj) { 
    var progress = typeof obj[key] == 'string' ? obj[key] : obj[key][1]; 
    if (progress != '100%') correct = false; 
    } 
    return correct; 
} 

updateProgressBar = function(key, val) { 
    var progress_info_value = typeof val == 'string' ? val : val[0]; 
    var progress_bar_value = typeof val == 'string' ? val : val[1]; 
    $(key + ' .progress_info').html(progress_info_value); 
    $(key + ' .progress-bar').width(progress_bar_value); 
} 

我怎样才能茉莉测试吗？我找不到任何关于此的好教程...

Answer 1

它通常很难测试对象。

你可以做什么：

1. 创建你的函数使用
2. 把它们放进DOM
3. 调用您的函数
4. 检查元素
5. 从DOM删除元素的元素

显示这是一种激励措施：

describe('Test ProgressBarUpdater', function() { 
    var elements = []; 

    beforeAll(function() { 
     // create elements and put into array 

     elements.forEach(function(elem) { 
      document.body.appendChild(elem); 
     }); 
    }); 

    afterAll(function() { 
     // remove all elements from DOM 
    }); 

    it('call functions...', function() { 
     // call the functions to test 

     // check the elements 
    }); 
});