Cannot test dxTemplate rendering

devexteme version: 17.1.3
devextreme-angular version: 4.1.2

I am trying to test that the content of a popup was loaded correctly.

The component template looks like this: <dx-popup class="popup" [(visible)]="isVisible"> <div *dxTemplate="let data of 'content'"> <div>WTDFFFFFFFFFFFFFFFFFFFFFFFF</div> </div> </dx-popup>

The testing setup looks like this: TestBed.configureTestingModule({ imports: [ HttpModule, BrowserModule, FormsModule ], declarations: [ MyConfirmationComponent, DxPopupComponent, DxTemplateDirective ], schemas: [NO_ERRORS_SCHEMA], providers: [ PopupService,
] }); TestBed.compileComponents();

The element that is render does not contain the template text: WTDFFFFFFFFFFFFFFFFFFFFFFFF. It looks like this: <dx-popup _ngcontent-c4="" class="popup dx-overlay dx-popup dx-widget dx-visibility-change-handler" ng-reflect-visible="true"></dx-popup>

I can give more details if necessary. Thanks!

[GoshaFighten]

The content method returns a jQuery element. You can get a native element from a jQuery element in the following way:

const content: any = popupInstance.instance.content()[0];

But, jQuery selectors are much more powerful than native ones. So, you can’t use the :contains selector with a native element. But, I think you can give an ID or CSS class to your content to obtain it using the querySelector method. For example:

const content: any = popupInstance.instance.content()[0];
expect(content.querySelector('#content')).toBeTruthy();

<div *dxTemplate="let data of 'content'">
<div id="content">WTDFFFFFFFFFFFFFFFFFFFFFFFF</div>
</div>

[Spiti]

thanks for the replies. I managed to implement it using your suggestion. Now I am trying to test the title of the popup which is in another dxtemplate, and I didn’t manage that. Do you have any suggestions?