Angular CdkDragDrop单元测试事件

所以，我一直在为我的Angular应用程序进行单元测试。我使用的是有角度的材质，我有一个组件，它使用了拖放CDK

html代码如下所示

<mat-card class="interventionCard">
  <div  cdkDropListGroup class="container">
    <div cdkDropList
         [cdkDropListData]="interventionsTodo" (cdkDropListDropped)="drop($event)" class="dragContainer">
      <div class="dragInter" *ngFor="let i of interventionsTodo" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      <a class="resetInv" (click)="reset()"><div class="dragInter"><img src="../assets/images/simulation-intervention/noIntervention.svg" class="interventionIc" alt=""></div></a><!---->
    </div>

    <div class="dropContainer">
      <div cdkDropList [cdkDropListData]="interventionsDoneNow" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDoneNow" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
        <div class="connectorL"></div>
      <div cdkDropList [cdkDropListData]="interventionsDonePlus5" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus5" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc"></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus10" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus10" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus15" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus15" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus20" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus20" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus25" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus25" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList [cdkDropListData]="interventionsDonePlus30" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus30" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
    </div>

这很好，现在im单元测试angular应用程序（jasmine/karma） 我正在尝试分派CdkDragDrop事件，以便验证我的

drop（）

函数的功能

因此，在angular文档中有一个关于组件DOM测试的小章节，其中提到您必须在想要触发事件的地方获取HtmleElement，我这样做：

现在我有了要触发事件的元素，所以完整的代码如下所示

    let Dbg = fixture.debugElement;
      let htE = Dbg.nativeElement.querySelector(".dragContainer");

      htE.addEventListener('CdkDragDrop', (ev:any) => {
        component.drop(ev);
      });
      let bla = htE.dispatchEvent(new Event('cdkDropListDropped'));

所以bla返回true，这（如果我没有错的话）意味着事件被触发，但似乎什么也没有发生

fixture.detectchanges（）

自动发生。。

---

我试图调试它以查看发生了什么，但listenerfunction从未启动，我到处寻找答案，但似乎找不到关于此类事件测试的任何内容。

您可以使用一些模拟事件测试

drop

方法，而不是尝试从模板中启动事件。我是通过使用泛型来实现的

---

说明了相应的单元测试可能是什么样子。

单元测试示例的一个重要初始资源是位于库源代码中的测试：您好，您能找到解决方案吗？我现在在单元测试中遇到了类似的情况。Hei Jun，所以Alexander提到的链接有很多关于如何测试CdkDragDrop的示例。。但是这里的问题是Angular，所以如果你检查Alex给出的回购协议中的测试，你会发现大部分关于@Angular/core/testing的导入。。这里的问题是这个测试模块不是公开的，因为没有正确的格式化和注释等等。所以，就目前而言，你还不能真正测试你的东西。。至少这是我学到的，我希望这有助于三一stackblitz链接对cdk拖放功能的单元测试？

    let Dbg = fixture.debugElement;
    let htE = Dbg.nativeElement.querySelector(".dragContainer");

    let Dbg = fixture.debugElement;
      let htE = Dbg.nativeElement.querySelector(".dragContainer");

      htE.addEventListener('CdkDragDrop', (ev:any) => {
        component.drop(ev);
      });
      let bla = htE.dispatchEvent(new Event('cdkDropListDropped'));