如何（而且應該）測試茉莉花中的UI元素可見性？

Question

我有隱藏和顯示基於什麼工廠爲我提供了我的網頁上項目的功能：

function toggleMenuItems(config) { 
     // hide all our elements first 
     $(".js-quickMenuElement").hide(); 

     config.data = config.data || []; 
     config.data.forEach(function (d) { 

      if (d === config.viewConfigCatalog.CalendarLink) { 
       $("#CalendarLink.js-quickMenuElement").show(); 
      } 

      if (d === config.viewConfigCatalog.ProductCreation) { 
       $("#ProductCreation.js-quickMenuElement").show(); 
      } 

      // etc etc etc 

     }); 

    }; 

我們已經使用茉莉花我們的JavaScript單元測試和我們討論我們是否應該測試此功能。 有人說我們不需要這樣做，因爲測試是將視圖耦合到javascript測試，但同時，如果不是jquery .show和.hide函數那些是包裝器或其他函數，我們會測試它們。

繼此之後，最好的測試方法是什麼？ 製作一個接受字符串並在jQuery select中注入字符串名稱的包裝函數似乎是錯誤的。 我們認爲對是刺探另一種選擇（$ .fn，「秀」），但只會讓我們測試，如果節目被稱爲的時間，而不是什麼隱藏的X量...

感謝，

Answer 1

您可以使用jQuery來測試元素的可見性。

$(element).is(":visible");

code taken from a related question

當然做這個，你說你用耦合試驗的看法。你可以將決定這個函數結果的邏輯移動到一個單獨的函數中，然後測試那個函數的結果。

** 編輯 **

下面說明了我的意思就用KVP列表簡化，你可以寫上獲得來自KVP價值功能的測試。

var config = { 
 
    data: [], 
 
    viewConfigCatalog: { 
 
    CalendarLink: "CalendarLink", 
 
    ProductCreation: "ProductCreation", 
 
    } 
 
}; 
 

 
var kvp = [{ 
 
    name: config.viewConfigCatalog.CalendarLink, 
 
    value: "#CalendarLink.js-quickMenuElement" 
 
}, { 
 
    name: config.viewConfigCatalog.ProductCreation, 
 
    value: "#ProductCreation.js-quickMenuElement" 
 
}]; 
 

 
function getSelectorString(name) { 
 
    var i = kvp.length; 
 
    while (i--) { 
 
    var pair = kvp[i]; 
 
    if (pair.name === name) 
 
     return pair.value; 
 
    } 
 
    return null; 
 
} 
 

 
function toggleMenuItems(config) { 
 
    // hide all our elements first 
 
    $(".js-quickMenuElement").hide(); 
 

 
    config.data = config.data || []; 
 
    config.data.forEach(function(d) { 
 
    $(getSelectorString(d)).show(); 
 
    }); 
 

 
}; 
 

 
document.writeln(getSelectorString(config.viewConfigCatalog.CalendarLink)+'<br/>'); 
 
document.writeln(getSelectorString(config.viewConfigCatalog.ProductCreation)+'<br/>'); 
 
document.writeln(getSelectorString("hi"));