Recently, I was working on testing an Angular Component which was going smoothly until I encountered a challenging issue that has been perplexing me for days. My main objective was to test whether the method "ajouterCompteurALaCampagne" is being called when inserting a row. In order to achieve this, I attempted to access the dx-data-grid DOM element to emit the "onRowInserting" event. However, this is where the problem arises - I found myself unable to access that element as a DebugElement; only as a nativeElement. Consequently, I faced difficulty in emitting the onRowInserting event and confirming if the desired method was being invoked or not. So, my query is: "Is there a way to 'cast' the nativeElement so I can have access to the DebugElement properties?"
HTML CODE
<dx-tab-panel
[height]="'auto'"
[dataSource]="tabs"
[selectedIndex]="0"
[loop]="false"
[animationEnabled]="true">
<div *dxTemplate="let data of 'compteursTemplate'">
<dx-data-grid
#tabCompteurCampagne
id = 'liste-compteur'
[showBorders]="true"
[dataSource]="listeCompteur"
(onRowInserting)="ajouterCompteurALaCampagne($event)"
(onRowRemoving)="supprimerCompteurCampagne($event)"
(onRowUpdated)="modifierCompteurCampagne($event)">
...</dx-data-grid>
...</div>
...<dx-tab-panel>
TYPESCRIPT CODE
it("should call the method 'ajouterCompteurALaCampagne' once the event is emitted", async(()=>{
let spy_ajouterCompteurALaCampagne = spyOn(component, "ajouterCompteurALaCampagne");
let dxTabPanelElement = fixture.debugElement.query(
By.directive(DxTabPanelComponent)
);
let dxGridElement = dxTabPanelElement.nativeElement.querySelector('#liste-compteur');
dxGridElement.dispatchEvent(new Event("rowInserting")); //the event is not emmited
expect(spy_ajouterCompteurALaCampagne).toHaveBeenCalledTimes(1);
}));
});