Protractor测试Angular 2和点击事件

Question

我将翻译以下内容，这是关于IT技术的：

我正在构建一个Angular 2应用程序，需要有关使用Protractor进行单元测试的信息。

事实上，对于Angular 1而言，我们能够完成一些像以下这样的工作：

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

在我们的测试中，验证当前页面上是否有ng-click属性。我曾经在Angular 2中尝试了以下方法:

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

但好像不起作用。

有没有人知道如何测试使用 Angular 2 和 Protractor 的单击事件？

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

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

感谢您的帮助。

- mfrachet

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() 取自这里。

- alecxe

---

我认为OP是在询问angular2。 - asdf_enel_hak

我确认我在谈论Angular 2。 - mfrachet

好的，让我改进答案。 - alecxe

@Skahrz 更新了答案，你能测试一下是否可行吗？谢谢。 - alecxe

@alecxe 实际上没有起作用，但意图是好的 :) - mfrachet

@Skahrz 是的，希望那样会起作用。更新了几个选项，请查看一下。谢谢。 - alecxe

Answer 2

用双反斜杠转义括号：

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

- Florent B.

---

如果我使用你的解决方案尝试 expect(item.isPresent()).toBe(true);，结果会是 false。看起来它似乎没有起作用 :-/。感谢您的帮助。 - mfrachet

我用 Chrome 和 Firefox 测试了这个示例，元素是存在的。可能是另外一个问题，请提供定位元素的精确 HTML 代码。您在控制台中能否得到结果？ - Florent B.

在控制台中没有任何输出，但是以下测试结果如下：1）主页按钮添加板块应该有一个验证按钮 消息： 预期结果为 false，实际得到的却是 true。 - mfrachet

可能是一个时间问题。在一个静态页面中尝试这个按钮，你会发现定位器返回了一个元素。 - Florent B.