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 select中注入字符串名称的包装函数似乎是错误的。我们想到的另一个选择是监视（$ .fn，＆＃34; show＆＃34;）但这只会让我们测试show是否被称为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"));

如何（我们应该）测试茉莉花中的UI元素可见性？

1 个答案: