将 nativeElement 转换为 Angular 中的 DebugElement答案

【问题标题】：Cast a nativeElement into a DebugElement in Angular将 nativeElement 转换为 Angular 中的 DebugElement
【发布时间】：2021-08-30 03:54:24
【问题描述】：

我正在测试一个 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);
  }));
 });

【问题讨论】：

dx-data-grid 是自定义组件吗？你是在用真实的在测试中嘲笑它吗？
该项目使用一个名为 DevExtreme 的 Angular Javascript UI 组件库，这就是 dx-data-grid 组件的来源。对于测试，我在 TestBed 的导入数组中包含了 devextreme 模块。我使用真正的 dx-data-grid 不是模拟，我只是模拟服务和组件。希望我说清楚了。

标签： angular typescript jasmine karma-jasmine angular-test

【解决方案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);
}));

【讨论】：

你好@AliF50，谢谢你的回答。不幸的是，我已经尝试过了，但它没有用，它给出了这个错误：“属性'debugEelement'在'DebugEelement'类型上不存在”。元素“dxTabPanel”是 DebugElement 类型，因此我们不能在其上使用 debugEelement 属性。
哦，对不起。而不是dxTabPanelElement.，使用fixture. 这应该适用于IMO。查询时始终使用fixture.。我已经编辑了我的答案两个节目fixture.
嗯，这是我遇到的第一个问题，我一开始就厌倦了，直接从夹具访问 dxDataGrid 元素，但它使我为空。
要查看整个DOM，您可以执行console.log(fixture.nativeElement)，然后您可以尝试通过单击加号图标手动插入行。我假设单击数据网格组件中的加号图标将触发 onRowInserting。
非常感谢我的朋友，我找到了解决问题的方法。所以基本上我所做的是将 dx-data-grid 作为本机元素访问，然后我发送了“onRowInserting”事件并且它起作用了。我之前已经这样做了，我的代码有一个小问题，我没有调度“onRowInserting”事件，而是调度了一个“rowInsertingEvent”，因此没有调用该方法。再次感谢我的朋友。

【解决方案2】：

我已经找到了解决这个问题的方法，谢谢你们的回答。代码如下：

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

}));

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

【讨论】：