如何（我们应该）测试 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 select 的包装函数似乎是错误的。我们想到的另一个选择是监视 ($.fn, "show") 但这只会让我们测试 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"));

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

How to (and should we) test UI element visibility in jasmine?

javascript

unit-testing

jasmine