CODEWITHSUNDEEP
angularangular-test
LppEdd
LppEdd

Reputation: 21134

Angular Component testing - query by Component

When testing the DOM representation of a @Component, you're able to query its nested elements via its fixture

fixture.debugElement.queryAll(By.css('.example'));

You can also filter by @Directive

fixture.debugElement.queryAll(By.directive(RouterLinkDirectiveStub));

Now, let's say you have an inner @Component NzButtonComponent used like this

<button nz-button>Example</button>

How can I precisely query for it? There is no By.component(...).

Upvotes: 2

Views: 5571

Answers (2)

The Head Rush
The Head Rush

Reputation: 3357

You can select by CSS attribute if you use the nativeElement instead of the debugElement:

fixture.debugElement.nativeElement.querySelector<HTMLButtonElement>('[nz-button]');

For multiple elements the querySelectorAll method can be used.

Upvotes: 2

Thomas
Thomas

Reputation: 657

Query like directive

Possibly you can use

fixture.debugElement.query(By.directive(AnyComponent)) it returns DebugElement of that component

That works because in Angular Component inherits after Directive

Upvotes: 5

Related Questions