Question

我正在构建一个角度2应用程序，我需要一些关于量角器单元测试的信息。

事实上，对于角度1，我们能够制作一些类似的东西：

element(by.css('[ng-click="myFunction()"]'))

在我们的测试中验证我们在当前页面上有一个ng-click属性。

我用角度2尝试了以下内容：

element(by.css('[(click)="alert(\'test\')"]'))

但它似乎不起作用。

任何人都知道如何测试我有角度2和量角器的clic事件这个事实？

编辑：这是我在HomeComponent.html文件中使用的HTML：

<button (click)="alert('test')">Hello</button>

感谢您的帮助

Answer 1

您可以找到具有(click)属性的所有元素，并查看.count()：

expect($$("[\(click\)]").count()).toBeGreaterThan(0);

其中$$是到element.all(by.css())的快捷方式。 [$click$] CSS选择器将匹配具有(click)属性的所有元素。请注意，您必须转义括号，因为它们在CSS选择器中具有特殊含义。

另一种选择是使用.filter()：

var elements = $$("*").filter(function (elm) {
    return elm.getAttribute("(click)").then(function (attributeValue) {
        return !!attributeValue;
    });
});
expect(elements.count()).toBeGreaterThan(0);

或者，使用XPath匹配具有(click)属性的所有元素：

var elements = element.all(by.xpath('//*[@*[name() = "(click)"]]'))
expect(elements.count()).toBeGreaterThan(0);

另一个奇怪的选择是使用新的by.js()定位器：

var elements = element.all(by.js(function() {
    function getAllElementsWithAttribute(attribute)
    {
      var matchingElements = [];
      var allElements = document.getElementsByTagName('*');
      for (var i = 0, n = allElements.length; i < n; i++)
      {
        if (allElements[i].getAttribute(attribute) !== null)
        {
          // Element exists with attribute. Add to array.
          matchingElements.push(allElements[i]);
        }
      }
      return matchingElements;
    }
    return getAllElementsWithAttribute("(click)");
}));
expect(elements.count()).toBeGreaterThan(0);

getAllElementsWithAttribute()取自here。

Answer 2

使用双反斜杠转义括号：

element(by.css('[\\(click\\)="alert(\'test\')"]')).click();

量角器测试角度2和点击事件

2 个答案: