如何(以及我们应该)在 Jasmine 中测试 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
        });
    };

我们一直在使用 Jasmine 进行 JavaScript 单元测试，我们正在讨论是否应该测试这个函数。有人说我们不需要，因为测试这是将视图与javascript测试耦合，但与此同时，如果不是jquery .show和.hide函数，而是包装器或其他函数，我们会测试它们。

在此之后，测试它的最佳方法是什么？制作一个接受字符串并在 jQuery 选择中注入字符串名称的包装函数似乎是错误的。我们想到的另一个选择是监视（$.fn，"show"），但这只会让我们测试节目是否被称为 X 时间而不是隐藏的内容......

谢谢

Answer 1

您可以使用 jQuery 来测试元素的可见性。

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

从相关问题中获取的代码

当然，正如您所说，这样做是将视图与测试耦合。 您可以将确定此函数结果的逻辑移动到单独的函数中，然后改为测试该函数结果。

**

编辑 **

下面说明了我关于使用 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"));