'How to test drag and drop behavior with Angular and ng2FileDrop and Jest
How can I simulate a drag and drop action with a ng2FileDrop to check the behavior of the addFile() method in my unit tests with Jest ?
Template with my ng2FileDrop :
<div class="dropzone"
ng2FileDrop [uploader]="fileUploader"
[ngClass]="{'dropzone-file-over': hasBaseDropZoneOver }"
(fileOver)="fileOverBase($event)"
(onFileDrop)="addFile($event, 'drag-and-drop')"
id="dropzone"
[formControl]="controls.fileControl" ngDefaultControl>
<div class="dropzone-content mb-2">Drag and drop your file</div>
</div>
Component method to test:
addFile(event, input: string): void {
if (this.checkFile()) {
this.fileUploader.uploadAll();
} else {
this.fileUploader.clearQueue();
this.controls.fileControl.setValue(null);
this.logService.error('File size is too big !');
}
}
checkFile() {
if (this.fileUploader.queue.length > 0) {
return this.fileUploader.queue[0].file.size <= this.maxSize; //1 Ko
}
return false;
}
Unit test :
it('should display error when file size is too big', () => {
Mock.extend(logService).with({ error: noop });
const file = new File([''], 'temp.tmp');
Object.defineProperty(file, 'size', { value: 999999999 });
component.controls.fileControl.setValue(file);
//component.fileUploader.addToQueue([file]); same behavior
expect(component.uploadFormGroup.invalid).toEqual(false);
fixture.detectChanges();
//form validation button
const buttonElements = fixture.debugElement.queryAll(By.css('.validation-btn'));
buttonElements[1].nativeElement.click();
fixture.detectChanges();
expect(logService.error).toHaveBeenCalledWith('File size is too big !');
});
Expected: "File size is too big !"
Received: "File uploaded !"
The test does not pass in the addFile() method, it behave like if the file was already correctly added.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
