typescript 如何在angular中使用jest for directive编写单元测试

我正在使用jest来覆盖我的angular项目中的单元测试，我是使用jest进行单元测试的新手。
下面是我的DragDropDirective代码：

@HostListener('dragenter',['$event'])
    @HostListener('dragover',['$event'])
    public handleDragOver(event:DragEvent):void{
       if(!this.enabled){
            return;
       }
       event.dataTransfer?.dropEffect=='move';
       this.stopAndPreventDefault(event);
       this._dragInProgress=true;
    }
    

    @HostListener('dragleave',['$event'])
    @HostListener('dragend',['$event'])
    public handleDragEnd(event:DragEvent):void{
      if(!this.enabled){
         return;
      }
      this.stopAndPreventDefault(event);
      event.dataTransfer?.effectAllowed=='copy';
      this._dragInProgress=false;
    }

    stopAndPreventDefault(e:UIEvent):void{
      e.stopPropagation();
      e.preventDefault();
    }

有人能帮我一下吗？

下面是使用Jest编写DragDropDirective单元测试的示例：

import { Component } from "@angular/core";
import { TestBed } from "@angular/core/testing";
import { DragDropDirective } from "./drag-drop.directive";

@Component({
  template: `<div appDragDrop></div>`,
})
class TestComponent {}

describe("DragDropDirective", () => {
  let fixture: any;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [DragDropDirective, TestComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
  });

  it("should set _dragInProgress to true on drag enter or drag over", () => {
    const div = fixture.nativeElement.querySelector("div");
    const event = new DragEvent("dragover");
    const directive = div.directive;
    directive.enabled = true;
    directive.handleDragOver(event);
    expect(directive._dragInProgress).toBe(true);
  });

  it("should set _dragInProgress to false on drag leave or drag end", () => {
    const div = fixture.nativeElement.querySelector("div");
    const event = new DragEvent("dragleave");
    const directive = div.directive;
    directive.enabled = true;
    directive.handleDragEnd(event);
    expect(directive._dragInProgress).toBe(false);
  });

  it("should not set _dragInProgress if disabled", () => {
    const div = fixture.nativeElement.querySelector("div");
    const event = new DragEvent("dragover");
    const directive = div.directive;
    directive.enabled = false;
    directive.handleDragOver(event);
    expect(directive._dragInProgress).toBe(false);
  });

  it("should call stopAndPreventDefault on drag enter, drag over, drag leave, and drag end", () => {
    const div = fixture.nativeElement.querySelector("div");
    const spy = spyOn(div.directive, "stopAndPreventDefault");
    const event1 = new DragEvent("dragover");
    const event2 = new DragEvent("dragleave");
    const directive = div.directive;
    directive.enabled = true;
    directive.handleDragOver(event1);
    directive.handleDragEnd(event2);
    expect(spy).toHaveBeenCalledTimes(2);
  });
});

前两个测试检查当使用DragEvent调用handleDragOver和handleDragEnd方法时，是否正确设置了_dragInProgress。
第三个测试检查在禁用指令时是否未设置_dragInProgress。
第四个测试检查在调用handleDragOver、handleDragEnd、handleDragEnter和handleDragLeave方法时是否调用了stopAndPreventDefault。

typescript 如何在angular中使用jest for directive编写单元测试

1条答案

相关问题

热门标签

最新问答