Angular 2 个测试 nativeElement

Question

我一直在浏览 angular 网站上的测试教程。我很好奇是否有可用于通过 debugElement 进行测试的所有项目的列表。例如

let nav = fixture.debugElement.query(By.css('h1')).nativeElement;

    expect(nav.innerText).toBe(fixture.componentInstance.homeHeader);

还有哪些其他元素像我正在测试的 innerText 值。 感谢您的帮助。

Answer 1

列表太长。这些都是原生的JS DOM 元素 获取完整的属性列表要看是什么类型的元素。您应该学习浏览 MDN 站点。这是 link 到 HTMLHeadingElement（这就是 h1）。如果你看侧边栏，你会看到

• Properties（HTMLHeadingElement 中缺少，见下文）。这是该元素所有直接属性的列表（继承属性见父级）

• 继承。这是继承 HTMLHeadingElement

  的层次结构

     EventTarget
          |
         Node
          |
       Element
          |
     HTMLElement
          |
  HTMLHeadingElement
  

  您可以单击这些 link 中的任何一个，您将看到继承的属性。例如，如果您单击 Node，您将看到 HTMLHeadingElement 从那里获取 innerText 属性。如果你回到HTMLHeadingElement，你会看到它没有直接的属性。这意味着它的所有属性都继承自其父代

• Methods（缺少 HTMLHeadingElement，请参阅继承方法的父项）

• 事件。这些是元素可以触发的所有事件

• HTMLDOM的相关页面。这是所有页面共有的列表。您可以看到所有不同种类的 DOM 元素的列表。您可以单击它们。不过，在大多数情况下，您将从任何 DOM 元素中使用的大多数属性都是从父元素继承的属性。所以您可能只想查看父属性列表。虽然有些确实有自己的属性。