Adding tests for file select directive

hawlik · Oct 1, 2017 · 048f534 · 048f534
1 parent 0df30f9
commit 048f534
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 20 deletions.
diff --git 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
@@ -8,17 +8,17 @@ import { FileDropDirective } from '../file-upload/file-drop.directive';
 
 @Component({
   selector: 'container',
-  template: `<input type="file"
+  template: `<div type="file"
                     ng2FileDrop
                     [uploader]="uploader"
-             />`
+             ></div>`
 })
 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<ContainerComponent>;
   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,15 +112,15 @@ describe('Directive: FileSelectDirective', () => {
     let fileOverData;
     fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data);
 
-    fileDropDirective.onDragOver(getFakeEvent());
+    fileDropDirective.onDragOver(getFakeEventData());
 
     expect(fileOverData).toBeTruthy();
   });
 
   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
@@ -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: `<input type="file"
+                    ng2FileSelect
+                    [uploader]="uploader"
+             />`
+})
+export class ContainerComponent {
+  public get url(): string { return 'localhost:3000'; }
+  public uploader: FileUploader = new FileUploader({ url: this.url });
+}
+
+describe('Directive: FileSelectDirective', () => {
+  let fixture: ComponentFixture<ContainerComponent>;
+  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);
+  });
+});