Reputation: 288
I have been going through the testing tutorial on the angular website. I am curious if there is a listing of all of the items that are available for test through the debugElement. For example
let nav = fixture.debugElement.query(By.css('h1')).nativeElement;
expect(nav.innerText).toBe(fixture.componentInstance.homeHeader);
What other elements are there like the innerText value that I am testing. Thank you for any help.
Upvotes: 1
Views: 4585
Reputation: 209004
The list is too long. These are native JS DOM elements It depends on what type element it is to get a complete list of properties. You should learn to navigate the MDN site. Here is a link to HTMLHeadingElement
(this is what an h1
is). If you look at the sidebar, you will see
Properties (missing from HTMLHeadingElement, see below). This is a list of all direct properties of this element (see parent for inherited properties)
Inheritance. This is inheritance the hierarchy for HTMLHeadingElement
EventTarget
|
Node
|
Element
|
HTMLElement
|
HTMLHeadingElement
You can click any one of those links, and you will see the inherited properties. For instance, if you click on Node
, you will see that that's where the HTMLHeadingElement
gets the innerText
property from. If you go back to HTMLHeadingElement
, you will see that it has no direct properties. That means that all of its properties are inherited from its parents
Methods (missing for HTMLHeadingElement, see parent for inherited methods)
Events. These are all the events that can be triggered for the element
Related pages for HTML DOM. This is a list that is common to all the pages. You can see a list of all the different kinds of DOM elements. You can click through them. For the most part though, most of the properties you will use from any of the DOM elements will be inherited properties from the parent. So you probably want to just look at the parent properties list. Though some do have their own properties.
Upvotes: 6