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);
+ });
+});