爲JavaScript應用程序編寫單元測試

-3

因此，通常應該先學習單元測試的基本知識。我已經閱讀了幾次關於單元測試的內容。但我可能缺乏良好的知識。通常的方法是首先學習基礎知識，然後應用到您的應用程序。不幸的是我沒有那麼多時間。這當然不是你的問題，在這裏有降低風險的風險，但我抓住機會。爲JavaScript應用程序編寫單元測試

這是一個非常小的JavaScript應用程序。我在尋找的是將單元測試的理論與這個小小的項目聯繫起來，並理解如何構建測試，基本上是測試什麼。

一個JavaScript文件（app.js）在另一個文件（funcs.js）中調用函數以從json格式的資源獲取結果。 app.js然後將驗證解碼的json是否長度大於0. 在這種情況下，它會在此json結構中的帖子之間進行迭代。對於每次迭代，app.js都會調用funcs.js中的函數從json中爲一篇文章提取數據，同時生成html結構，該結構返回到app.js.

最後，app.js將使用funcs.js提供的html結構填充html元素（在app.html中）。

所以我現在需要創建幾個單元測試。我猜測最好的部分是func.js？該文件包含一些功能。例如打開，解析和返回json結果的函數。或者獲取json結構的字段（迭代過程中）並構建html元素的函數。然後返回它。

我對嗎？我該如何測試？這可能是一個好策略：

我創建一個test.js文件。我在funcs.js中找到了一些函數（相關的）。我試圖調用它們幾次，同時傳遞好的和壞的參數（例如，首先是現有資源，然後是請求json資源的函數的空參數資源）。

林還是有點不確定如何測試將返回HTML元素的部件。如果你能提出一些建議，那將會很棒。

----- -----編輯

林添加一些代碼，以便更好地瞭解情況。

在funcs.js：

function get_resource (url, method){ 
    var xhReq = new XMLHttpRequest(); 
    xhReq.open(method, url, false); 
    xhReq.send(null); 
    var json = xhReq.responseText; 
    var obj = JSON.parse(json); 
    return obj; 
} 

function set_text(value, id){ 
    if(value !== undefined){ 
     document.getElementById(id).textContent = value; 
    } 
} 

function set_img(value, id, img_class){ 
    if(value !== undefined && imageExists(value)){ 
     var img = document.createElement("img"); 
     img.src = value; 
     img.className = img_class; 
     document.getElementById(id).appendChild(img); 
    } 
}

在app.js：

var json = get_resource('example.com', 'GET'); 

set_text(json.name, 'title'); 

set_img(json.src, 'main_div', 'img_class');

app.html：

<body> 
    <div id="title"></div> 
    <div id="main_div"></div> 
</body>

來源

2016-07-07 oderfla

請出示一些代碼。 – Ben

您的funcs.js聽起來像單元測試的合理候選者，如果它沒有掛接到UI。你的app.js也可以進行單元測試，具體取決於它的性質，它與UI元素的連接程度。您可以更好地將視圖與動態功能分開，對於測試目的來說更好。 – ManoDestra

我添加了幾行代碼以更好地理解情況。 – oderfla

我想你大概在什麼FUNC測試題.js強調單元測試的主要（恕我直言）好處。它允許你創建app.js和func.js之間的契約並顯示你想要如何訪問代碼。我一直認爲測試的客戶端採用我的代碼，如果它是很難測試它通常是很難有人使用你的代碼。通過更改代碼以使其更容易測試，還可以使代碼更易於使用。

所以，現在你已經添加了一些代碼，我可以給你一個具體的例子。你的set_text很難測試，因爲它引用了一個html元素。你可以嘲笑一下，但如果你真的傳入了元素，那麼測試會更容易，只需使用斷言而不是console.log消息。

此外，如果它只是返回一個json和另一個函數處理http調用。另外，當你開始爲app.js寫測試時，你會明白你將如何使用func.js，如果你只是初始化它並設置你可以檢索的值等。

希望有幫助。

function set_text(value, el){ 
 
    if(value !== undefined){ 
 
     el.textContent = value; 
 
    } 
 
} 
 

 
var value; 
 
var el={textContent:'not set'} 
 

 
set_text(value,el); 
 

 
console.log(el) 
 

 
value='value' 
 

 
set_text(value,el) 
 

 
console.log(el)

來源

2016-07-07 17:19:31 kingd9

所以你基本上說funcs.js沒有寫得那麼好，與單元測試有關嗎？ – oderfla

理想情況下，您應該將測試和代碼編寫在一起，如果您先編寫代碼，則會使編寫測試變得困難。 funcs.js可能沒問題，只是在編寫代碼的時候編寫測試，測試驅動代碼 – kingd9

的設計謝謝。我通過修改獲取json數據的函數開始。我現在正在使用try/catch。如果它嘗試，然後我返回json對象。如果它進入捕獲狀態，那麼我返回null。我寫了一個測試驗證，如果使用不存在的URL，則返回null。我想知道的是如何測試資源被獲取。在測試單位，我比較預期的結果。期待null很容易。但是如何定義你期望的json結果？ – oderfla

爲JavaScript應用程序編寫單元測試

回答

相關問題