[英]Fake file drop event for unit testing
我正在尝试模拟文件Drop
事件以测试角度指令,但我无法创建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)] } }));
// ...
});
我不确定如何处理第二个参数以将我的文件放在那里..
我最终将测试分为两部分:
首先是滴
it('should call onFileDrop when there is a drop event', () => {
spyOn(directive, 'onFileDrop');
dest.triggerEventHandler('drop', new DragEvent('drop'));
expect(directive.onFileDrop).toHaveBeenCalled();
});
然后函数中的处理
it('should output the files that when onFileDrop is called', () => {
spyOn(directive.fileDrop, 'emit').and.callThrough();
const file = new File([''], 'dummy.jpg');
const fileDropEvent = { preventDefault: () => {}, dataTransfer: { files: [file, file, file] }};
let outputFiles;
directive.fileDrop.pipe(first()).subscribe(f => outputFiles = f);
directive.onFileDrop(fileDropEvent);
expect(directive.fileDrop.emit).toHaveBeenCalled();
expect(outputFiles.length).toBe(3);
expect(outputFiles[0]).toBe(file);
});
不确定这是否仍然相关,但我今天遇到了这个问题并解决了它。 把这个留在这里,以防其他人有同样的问题。
这是我试图在指令中测试的方法
@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)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.