diff --git a/src/file-upload/file-select.directive.ts b/src/file-upload/file-select.directive.ts index ed84cba..8060647 100644 --- a/src/file-upload/file-select.directive.ts +++ b/src/file-upload/file-select.directive.ts @@ -4,30 +4,30 @@ import { FileUploader } from './file-uploader.class'; // todo: filters -@Directive({selector: '[ng2FileSelect]'}) +@Directive({ selector: '[ng2FileSelect]' }) export class FileSelectDirective { - @Input() public uploader:FileUploader; + @Input() public uploader: FileUploader; - protected element:ElementRef; + protected element: ElementRef; - public constructor(element:ElementRef) { + public constructor(element: ElementRef) { this.element = element; } - public getOptions():any { + public getOptions(): any { return this.uploader.options; } - public getFilters():any { - return void 0; + public getFilters(): any { + return {}; } - public isEmptyAfterSelection():boolean { + public isEmptyAfterSelection(): boolean { return !!this.element.nativeElement.attributes.multiple; } @HostListener('change') - public onChange():any { + public onChange(): any { // let files = this.uploader.isHTML5 ? this.element.nativeElement[0].files : this.element.nativeElement[0]; let files = this.element.nativeElement.files; let options = this.getOptions(); diff --git a/src/spec/file-drop.directive.spec.ts b/src/spec/file-drop.directive.spec.ts index 5734bd8..58bca0e 100644 --- a/src/spec/file-drop.directive.spec.ts +++ b/src/spec/file-drop.directive.spec.ts @@ -8,17 +8,17 @@ import { FileDropDirective } from '../file-upload/file-drop.directive'; @Component({ selector: 'container', - template: `` + >` }) export class ContainerComponent { public get url(): string { return 'localhost:3000'; } public uploader: FileUploader = new FileUploader({ url: this.url }); } -describe('Directive: FileSelectDirective', () => { +describe('Directive: FileDropDirective', () => { let fixture: ComponentFixture; let hostComponent: ContainerComponent; @@ -76,7 +76,7 @@ describe('Directive: FileSelectDirective', () => { it('handles drop event', () => { spyOn(fileDropDirective, 'onDrop'); - directiveElement.triggerEventHandler('drop', getFakeEvent()); + directiveElement.triggerEventHandler('drop', getFakeEventData()); expect(fileDropDirective.onDrop).toHaveBeenCalled(); }); @@ -90,9 +90,9 @@ describe('Directive: FileSelectDirective', () => { let fileDropData; fileDropDirective.onFileDrop.subscribe((data: File[]) => fileDropData = data); - fileDropDirective.onDrop(getFakeEvent()); + fileDropDirective.onDrop(getFakeEventData()); - const uploadedFiles = getFakeEvent().dataTransfer.files; + const uploadedFiles = getFakeEventData().dataTransfer.files; const expectedArguments = [ uploadedFiles, fileDropDirective.getOptions(), fileDropDirective.getFilters() ]; expect(fileDropDirective.uploader.addToQueue).toHaveBeenCalledWith(...expectedArguments); @@ -103,7 +103,7 @@ describe('Directive: FileSelectDirective', () => { it('handles dragover event', () => { spyOn(fileDropDirective, 'onDragOver'); - directiveElement.triggerEventHandler('dragover', getFakeEvent()); + directiveElement.triggerEventHandler('dragover', getFakeEventData()); expect(fileDropDirective.onDragOver).toHaveBeenCalled(); }); @@ -112,7 +112,7 @@ describe('Directive: FileSelectDirective', () => { let fileOverData; fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data); - fileDropDirective.onDragOver(getFakeEvent()); + fileDropDirective.onDragOver(getFakeEventData()); expect(fileOverData).toBeTruthy(); }); @@ -120,7 +120,7 @@ describe('Directive: FileSelectDirective', () => { it('handles dragleave event', () => { spyOn(fileDropDirective, 'onDragLeave'); - directiveElement.triggerEventHandler('dragleave', getFakeEvent()); + directiveElement.triggerEventHandler('dragleave', getFakeEventData()); expect(fileDropDirective.onDragLeave).toHaveBeenCalled(); }); @@ -129,13 +129,13 @@ describe('Directive: FileSelectDirective', () => { let fileOverData; fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data); - fileDropDirective.onDragLeave(getFakeEvent()); + fileDropDirective.onDragLeave(getFakeEventData()); expect(fileOverData).toBeFalsy(); }); }); -function getFakeEvent(): any { +function getFakeEventData(): any { return { dataTransfer: { files: [ 'foo.bar' ], diff --git a/src/spec/file-select.directive.spec.ts b/src/spec/file-select.directive.spec.ts new file mode 100644 index 0000000..dfddc52 --- /dev/null +++ b/src/spec/file-select.directive.spec.ts @@ -0,0 +1,99 @@ +import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { Component, DebugElement } from '@angular/core'; +import { By } from '@angular/platform-browser'; + +import { FileUploadModule } from '../file-upload/file-upload.module'; +import { FileSelectDirective } from '../file-upload/file-select.directive'; +import { FileUploader } from '../file-upload/file-uploader.class'; + +@Component({ + selector: 'container', + template: `` +}) +export class ContainerComponent { + public get url(): string { return 'localhost:3000'; } + public uploader: FileUploader = new FileUploader({ url: this.url }); +} + +describe('Directive: FileSelectDirective', () => { + let fixture: ComponentFixture; + let hostComponent: ContainerComponent; + let directiveElement: DebugElement; + let fileSelectDirective: FileSelectDirective; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ FileUploadModule ], + declarations: [ ContainerComponent ], + providers: [ ContainerComponent ] + }); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ContainerComponent); + hostComponent = fixture.componentInstance; + + fixture.detectChanges(); + + directiveElement = fixture.debugElement.query(By.directive(FileSelectDirective)); + fileSelectDirective = directiveElement.injector.get(FileSelectDirective) as FileSelectDirective; + }); + + it('can be initialized', () => { + expect(fixture).toBeDefined(); + expect(hostComponent).toBeDefined(); + expect(fileSelectDirective).toBeDefined(); + }); + + it('can set file uploader', () => { + expect(fileSelectDirective.uploader).toBe(hostComponent.uploader); + }); + + it('can get uploader options', () => { + const options = fileSelectDirective.getOptions(); + + // Check url set through binding + expect(options.url).toBe(hostComponent.url); + + // Check default options + expect(options.autoUpload).toBeFalsy(); + expect(options.isHTML5).toBeTruthy(); + expect(options.removeAfterUpload).toBeFalsy(); + expect(options.disableMultipart).toBeFalsy(); + }); + + it('can get filters', () => { + const filters = fileSelectDirective.getFilters(); + + // TODO: Update test once implemented + expect(filters).toEqual({}); + }); + + it('can check if element is empty', () => { + const isElementEmpty = fileSelectDirective.isEmptyAfterSelection(); + + expect(isElementEmpty).toBeFalsy(); + }); + + it('can listed on change event', () => { + spyOn(fileSelectDirective, 'onChange'); + + directiveElement.triggerEventHandler('change', {}); + + expect(fileSelectDirective.onChange).toHaveBeenCalled(); + }); + + it('handles change event', () => { + spyOn(fileSelectDirective.uploader, 'addToQueue'); + + fileSelectDirective.onChange(); + + const expectedArguments = [ directiveElement.nativeElement.files, + fileSelectDirective.getOptions(), + fileSelectDirective.getFilters() ]; + expect(fileSelectDirective.uploader.addToQueue).toHaveBeenCalledWith(...expectedArguments); + }); +});