javascript - 用于单元测试的假文件放置事件

Question

我正在尝试模拟文件 Drop 事件来测试 Angular Directive(指令)，但我无法创建 DragEvent。

it('should output file drop when file droped', () => {
    const file = new File([''], 'dummy.txt'); // got my file right there, want to drop it on "des"
    des.dispatchEvent(new DragEvent('drop', { dataTransfer: { items: [ new DataTransferItem(file)] } }));
    // ...
});

我不确定如何处理第二个参数才能将我的文件放在那里..

Answer 1

不确定这是否仍然相关，但我今天遇到了这个问题并解决了。把它留在这里，以防其他人遇到同样的问题。

这是我试图在指令中测试的方法

@HostListener('drop', ['$event'])
onDrop(evt: any) {
    evt.preventDefault()
    evt.stopPropagation()
    this.fileOver = false
    const files = evt.dataTransfer.files
    if (files.length > 0) {
        this.fileDropped.emit(files)
    }
}

我根据 Angulars 文档创建了测试套件，创建了一个伪组件，并将指令添加到 div 元素。

@Component({
  template: `<div id="file-drop-area" filedrop (fileDropped)="handleDrop($event)"></div>`
})
class TestFileDropComponent {
    handleDrop(files: FileList) {}
}

describe('FileDropDirective', () => {
    let directive: FileDropDirective
    let component: TestFileDropComponent
    let fixture: ComponentFixture<TestFileDropComponent>;
    beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [ TestFileDropComponent, FileDropDirective ]
        })
        .compileComponents();
     });

     beforeEach(() => {
         fixture = TestBed.createComponent(TestFileDropComponent);
         component = fixture.componentInstance

         fixture.detectChanges();
     })
})

然后我创建了一个新的 DataTransfer 实例，将我的假文件推送到 items 数组，并将 DataTransfer 实例传递给随后调度的事件。

    it('should verify the directive recognises a drop event', () => {
        spyOn(component, 'handleDrop')

        const el: HTMLElement = fixture.nativeElement
        const fileDropArea: HTMLDivElement = el.querySelector('#file-drop-area')!
        const file = new File([''], 'dummy.txt')
        
        const dataTransfer = new DataTransfer()
        dataTransfer.items.add(file)

        const event = new DragEvent("drop", { dataTransfer })
        fileDropArea.dispatchEvent(event)
        fixture.detectChanges()
        
        expect(component['handleDrop']).toHaveBeenCalledWith(dataTransfer.files)
    })