Jasmine-Tests - Get elements inside <ng-template> (Angular)

Question

I would like to test HTML elements within a ng-tamplate.

<ng-template>
  <button class="create"></button>
</ng-template>

Jasmine Test:

fixture = TestBed.createComponent(SomeComponent);
const htmlElement: HTMLElement = fixture.nativeElement;
// Does not work:
const p = htmlElement.querySelector('.create');

How can I get the html element inside the ng-template? If I place the button outside of the ng-template tag, it works. I think it has something to do with the shadow dom.

Versions: Jasmine 2.8.0; Angular 5.2.9

You have to create EmbeddedView.

yurzui
– yurzui

2018-05-02 07:42:21 +00:00
Commented May 2, 2018 at 7:42 — yurzui
– yurzui, Commented May 2, 2018 at 7:42
Could you please clarify how to create an embeddedView?

Fabian
– Fabian

2018-05-02 09:01:39 +00:00
Commented May 2, 2018 at 9:01 — Fabian
– Fabian, Commented May 2, 2018 at 9:01

Fabian · Accepted Answer · 2018-05-23 08:21:06Z

2

I forgot to call fixture.detectChanges();. Only when you call this method, the component is rendered fully into the DOM (including shadow-DOM-elements). The following code works:

fixture = TestBed.createComponent(SomeComponent);
fixture.detectChanges();
const htmlElement: HTMLElement = fixture.nativeElement;
const p = htmlElement.querySelector('.create');

See https://angular.io/guide/testing#detectchanges for more details.

answered May 23, 2018 at 8:21

Fabian

1431 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Avinash Kawale Over a year ago

we tried using fixture.detectChanges but could not get this to work. Is it that simple ? I was reading some other post where they are suggesting to create a wrapper component.

wiseindy Over a year ago

I have the same issue and this solution didn't work for me.

divinen Over a year ago

that did not work

MrScf Over a year ago

it does not work

Collectives™ on Stack Overflow

Jasmine-Tests - Get elements inside <ng-template> (Angular)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest