testing - 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 站点。这是一个链接 HTMLHeadingElement (这就是 h1 的含义)。如果你看侧边栏，你会看到

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

• 继承。这是 HTMLHeadingElement

  的继承层次结构

     EventTarget
          |
         Node
          |
       Element
          |
     HTMLElement
          |
  HTMLHeadingElement
  

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

• 方法(缺少 HTMLHeadingElement，请参阅继承方法的父级)

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

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