import { createDragEvent } from 'ngx-tethys/testing' ; import { ThySizeExceedsHandler } from './../types' ; import { fakeAsync , ComponentFixture , TestBed , tick , flush } from '@angular/core/testing' ; import { ThyUploaderModule } from '../module' ; import { NgModule , Component , DebugElement } from '@angular/core' ; import { By } from '@angular/platform-browser' ; import { ThyFileDropComponent } from '../file-drop.component' ; import { ThyUploadFile , ThyUploaderService , ThyUploadStatus , ThyUploadResponse } from '../uploader.service' ; import { Observable } from 'rxjs' ; import { createFile } from './utils' ; @ Component ( { selector : 'test-file-drop-demo' , template : `
        <div
            class="mt-2 d-inline-block"
            [thyAcceptType]="acceptType"
            [thySizeThreshold]="sizeThreshold"
            [thySizeExceedsHandler]="sizeExceedsHandler"
            [thyFileDropClassName]="customDragOverClass"
            thyFileDrop
            (thyOnDrop)="selectFiles($event)"
        ></div>
    ` } ) class FileDropBasicComponent { customDragOverClass : string ; multiple : boolean ; acceptType : string = '' ; sizeThreshold = 1 ; exceedsFiles : File [ ] ; constructor ( ) { } selectFiles ( event ) { } sizeExceedsHandler : ThySizeExceedsHandler = event => { if ( event . exceedsFiles . length > 0 ) { this . exceedsFiles = event . exceedsFiles ; } } ; } @ NgModule ( { imports : [ ThyUploaderModule ] , declarations : [ FileDropBasicComponent ] , exports : [ FileDropBasicComponent ] } ) export class FileUploaderTestModule { } describe ( 'thyFileDrop' , ( ) => { let fixture ; let testComponent ; let fileDropDebugElement ; let dataTransfer ; beforeEach ( fakeAsync ( ( ) => { TestBed . configureTestingModule ( { imports : [ ThyUploaderModule , FileUploaderTestModule ] , providers : [ ] } ) ; TestBed . compileComponents ( ) ; } ) ) ; beforeEach ( ( ) => { fixture = TestBed . createComponent ( FileDropBasicComponent ) ; testComponent = fixture . debugElement . componentInstance ; fileDropDebugElement = fixture . debugElement . query ( By . directive ( ThyFileDropComponent ) ) ; fixture . detectChanges ( ) ; const file = createFile ( ) ; dataTransfer = new DataTransfer ( ) ; dataTransfer . items . add ( file ) ; } ) ; it ( 'should create file drop component success' , ( ) => { expect ( testComponent ) . toBeTruthy ( ) ; expect ( fileDropDebugElement ) . toBeTruthy ( ) ; } ) ; it ( 'should get correct drag over class for all events' , ( ) => { const fileDropElement = fileDropDebugElement . nativeElement ; expect ( fileDropElement . classList . contains ( 'thy-drop-over' ) ) . toBeFalsy ( ) ; const dragenterEvent = createDragEvent ( 'dragenter' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dragenterEvent ) ; fixture . detectChanges ( ) ; expect ( fileDropElement . classList . contains ( 'thy-drop-over' ) ) . toBeTruthy ( ) ; const dragoverEvent = createDragEvent ( 'dragover' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dragoverEvent ) ; fixture . detectChanges ( ) ; expect ( fileDropElement . classList . contains ( 'thy-drop-over' ) ) . toBeTruthy ( ) ; const dragleaveEvent = createDragEvent ( 'dragleave' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dragleaveEvent ) ; fixture . detectChanges ( ) ; expect ( fileDropElement . classList . contains ( 'thy-drop-over' ) ) . toBeFalsy ( ) ; fileDropElement . dispatchEvent ( dragenterEvent ) ; fixture . detectChanges ( ) ; expect ( fileDropElement . classList . contains ( 'thy-drop-over' ) ) . toBeTruthy ( ) ; const dropEvent = createDragEvent ( 'drop' , null , true , true ) ; fileDropElement . dispatchEvent ( dropEvent ) ; fixture . detectChanges ( ) ; expect ( fileDropElement . classList . contains ( 'thy-drop-over' ) ) . toBeFalsy ( ) ; } ) ; it ( 'should set custom drag over class success' , ( ) => { const customDragOverClass = 'my-custom-drag-over-class' ; testComponent . customDragOverClass = customDragOverClass ; fixture . detectChanges ( ) ; const fileDropElement = fileDropDebugElement . nativeElement ; expect ( fileDropElement . classList . contains ( customDragOverClass ) ) . toBeFalsy ( ) ; const dragenterEvent = createDragEvent ( 'dragenter' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dragenterEvent ) ; fixture . detectChanges ( ) ; expect ( fileDropElement . classList . contains ( customDragOverClass ) ) . toBeTruthy ( ) ; const dragleaveEvent = createDragEvent ( 'dragleave' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dragleaveEvent ) ; fixture . detectChanges ( ) ; expect ( fileDropElement . classList . contains ( customDragOverClass ) ) . toBeFalsy ( ) ; } ) ; it ( 'should invoke thyOnDrop success' , ( ) => { const selectFilesSpy = spyOn ( testComponent , 'selectFiles' ) ; const fileDropElement = fileDropDebugElement . nativeElement ; const dragenterEvent = createDragEvent ( 'dragenter' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dragenterEvent ) ; fixture . detectChanges ( ) ; expect ( selectFilesSpy ) . not . toHaveBeenCalled ( ) ; const dropEvent = createDragEvent ( 'drop' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dropEvent ) ; fixture . detectChanges ( ) ; expect ( selectFilesSpy ) . toHaveBeenCalled ( ) ; expect ( selectFilesSpy ) . toHaveBeenCalledWith ( { files : [ dataTransfer . files [ 0 ] ] , nativeEvent : dropEvent } ) ; } ) ; it ( 'should filter accept type files' , ( ) => { const selectFilesSpy = spyOn ( testComponent , 'selectFiles' ) ; testComponent . acceptType = '.doc' ; fixture . detectChanges ( ) ; const fileDropElement = fileDropDebugElement . nativeElement ; const dragenterEvent = createDragEvent ( 'dragenter' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dragenterEvent ) ; fixture . detectChanges ( ) ; expect ( selectFilesSpy ) . not . toHaveBeenCalled ( ) ; const dropEvent = createDragEvent ( 'drop' , dataTransfer , true , true ) ; fileDropElement . dispatchEvent ( dropEvent ) ; fixture . detectChanges ( ) ; expect ( selectFilesSpy ) . not . toHaveBeenCalled ( ) ; } ) ; } ) ;