TyAnthoney
TyAnthoney

Reputation: 288

Angular 2 testing nativeElement

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

Answers (1)

Paul Samsotha
Paul Samsotha

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

Related Questions