CdkDragDrop 单元测试事件

Question

所以，我一直在为我的 Angular 应用程序进行单元测试。我正在使用 Angular Material 并且我有一个组件使用拖放式 CDK cdk drag-drop API。

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>

很好，现在我有调用函数 drop()

的 cdkDropListDroppet 事件

    drop(event: CdkDragDrop<{ imgSrc: string }[], any>) {
     if (event.previousContainer === event.container) {
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     } else {
         if(event.container.data === this.interventionsTodo){
         this.deleteSpecificItemFromTimeline(event.previousContainer.data[0]);
         }else if(event.container.data.length <1){
           copyArrayItem(event.previousContainer.data,
             event.container.data,
             event.previousIndex,
             event.currentIndex);
         }
      }
    }

这很好用，现在我正在对 angular 应用程序进行单元测试 (jasmine/karma) 我正在尝试分派 CdkDragDrop 事件，以便我可以验证我的 drop() 函数的功能。

所以在 angular 文档中有一个关于组件 DOM 测试的小章节，其中提到您必须获得要触发事件的 htmlElement我喜欢这样：angular docs

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

所以 bla returns 是真的，这（如果我没记错的话）表示事件已触发，但似乎什么也没发生 fixture.detectchanges() 自动发生.. 我试图调试它以查看发生了什么，但是监听器功能从未被触发，我到处寻找答案但似乎无法在那种事件测试中找到任何东西..

Answer 1

您可以使用一些模拟事件来测试您的 drop 方法，而不是尝试从您的模板中触发事件。我这样做是通过使用通用 DragDropEventFactory.

summary-table-side-bar.component.spec.ts 说明相应的单元测试可能是什么样子。

CdkDragDrop 单元测试事件

CdkDragDrop unit testing events

unit-testing

coded-ui-tests

angular-material

angular