将 nativeElement 转换为 Angular 中的 DebugElement

如何解决将 nativeElement 转换为 Angular 中的 DebugElement

我正在测试一个 Angular 组件，一切都很顺利，直到我遇到了一个我已经尝试解决好几天的问题。我想要做的就是测试在插入行时是否调用了方法“ajouterCompteurALaCampagne”，所以我尝试访问 dx-data-grid DOM 元素，以便我可以发出事件“onRowInserting”，这就是问题发生的地方，我无法将该元素作为 DebugElement 访问，而只能作为 nativeElement 访问。因此我无法发出 onRowInserting 事件并查看该方法是否被调用。所以我的问题是：“我可以对 nativeElement 进行某种转换，以便我可以访问 DebugElement 属性吗？”

HTML 代码

<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>

类型脚本代码

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);
  }));
 });

解决方法

为什么不能使用 debugElement？在这些情况下，我认为您可以使用 triggerEventHandler，而且我认为它来自 Angular。

试试这个：

it("should call the method 'ajouterCompteurALaCampagne' once the event is emitted",async(()=>{
  let spy_ajouterCompteurALaCampagne = spyOn(component,"ajouterCompteurALaCampagne");
  // use fixture.
  let dxGridElement = fixture.debugElement.query(By.css('dx-data-grid'));
  dxGridElement.triggerEventHandler('onRowInserting',{ /* here you can mock the $event object */ });
  expect(spy_ajouterCompteurALaCampagne).toHaveBeenCalledTimes(1);
}));

我已经找到了解决此问题的方法，感谢您的回答。代码如下：

it("should call the method 'ajouterCompteurALaCampagne' once the event is emitted",async(()=>{
let spy_ajouterCompteurALaCampagne = spyOn(component,"ajouterCompteurALaCampagne");
let dxGridElement = fixture.nativeElement.querySelector("dx-data-grid");
console.log(dxGridElement);
dxGridElement.dispatchEvent(new Event("onRowInserting"));
fixture.detectChanges();
expect(spy_ajouterCompteurALaCampagne).toHaveBeenCalledTimes(1);

}));

我希望这对未来的人有所帮助。