Merge pull request #898 from adrianfaciu/chore/tests

Fixing tests execution and adding a few more tests

karma.conf.js

@@ -6,31 +6,29 @@ const customLaunchers = require('./scripts/sauce-browsers').customLaunchers;
 module.exports = function (config) {
   const configuration = {
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
     ],
     files: [
       {pattern: './scripts/test.ts', watched: false}
     ],
     preprocessors: {
-      './scripts/test.ts': ['angular-cli']
+      './scripts/test.ts': ['@angular/cli']
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: false
     },
     angularCli: {
       config: './angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage
-      ? ['dots', 'karma-remap-istanbul']
+      ? ['dots', 'coverage-istanbul']
       : ['dots'],
     port: 9876,
     colors: true,

package.json

@@ -49,6 +49,7 @@
     "@angular/core": "^2.3.1 || >=4.0.0"
   },
   "devDependencies": {
+    "@angular/cli": "1.0.0",
     "@angular/common": "2.4.3",
     "@angular/compiler": "2.4.3",
     "@angular/compiler-cli": "2.4.3",
@@ -64,7 +65,6 @@
     "@types/marked": "0.0.28",
     "@types/node": "7.0.0",
     "@types/webpack": "^2.2.1",
-    "@angular/cli": "1.0.0",
     "bootstrap": "3.3.7",
     "chokidar-cli": "1.2.0",
     "classlist-polyfill": "1.0.3",
@@ -87,6 +87,7 @@
     "karma": "1.4.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-jasmine": "^1.0.2",
     "karma-remap-istanbul": "0.4.0",
     "karma-sauce-launcher": "1.1.0",
@@ -94,9 +95,9 @@
     "lodash": "4.17.4",
     "markdown-loader": "^0.1.7",
     "marked": "0.3.6",
-    "ngx-bootstrap": "1.6.6",
     "ng2-page-scroll": "4.0.0-beta.2",
     "ngm-cli": "0.4.0",
+    "ngx-bootstrap": "1.6.6",
     "npm-run-all": "^4.0.1",
     "pre-commit": "1.2.2",
     "protractor": "5.0.0",

src/file-upload/file-drop.directive.ts

@@ -1,29 +1,29 @@
 import { Directive, EventEmitter, ElementRef, HostListener, Input, Output } from '@angular/core';
 
-import { FileUploader } from './file-uploader.class';
+import { FileUploader, FileUploaderOptions } from './file-uploader.class';
 
-@Directive({selector: '[ng2FileDrop]'})
+@Directive({ selector: '[ng2FileDrop]' })
 export class FileDropDirective {
-  @Input() public uploader:FileUploader;
-  @Output() public fileOver:EventEmitter<any> = new EventEmitter();
-  @Output() public onFileDrop:EventEmitter<File[]> = new EventEmitter<File[]>();
+  @Input() public uploader: FileUploader;
+  @Output() public fileOver: EventEmitter<any> = new EventEmitter();
+  @Output() public onFileDrop: EventEmitter<File[]> = new EventEmitter<File[]>();
 
-  protected element:ElementRef;
+  protected element: ElementRef;
 
-  public constructor(element:ElementRef) {
+  public constructor(element: ElementRef) {
     this.element = element;
   }
 
-  public getOptions():any {
+  public getOptions(): FileUploaderOptions {
     return this.uploader.options;
   }
 
-  public getFilters():any {
+  public getFilters(): any {
     return {};
   }
 
-  @HostListener('drop', ['$event'])
-  public onDrop(event:any):void {
+  @HostListener('drop', [ '$event' ])
+  public onDrop(event: any): void {
     let transfer = this._getTransfer(event);
     if (!transfer) {
       return;
@@ -37,8 +37,8 @@ export class FileDropDirective {
     this.onFileDrop.emit(transfer.files);
   }
 
-  @HostListener('dragover', ['$event'])
-  public onDragOver(event:any):void {
+  @HostListener('dragover', [ '$event' ])
+  public onDragOver(event: any): void {
     let transfer = this._getTransfer(event);
     if (!this._haveFiles(transfer.types)) {
       return;
@@ -49,10 +49,10 @@ export class FileDropDirective {
     this.fileOver.emit(true);
   }
 
-  @HostListener('dragleave', ['$event'])
-  public onDragLeave(event:any):any {
+  @HostListener('dragleave', [ '$event' ])
+  public onDragLeave(event: any): any {
     if ((this as any).element) {
-      if (event.currentTarget === (this as any).element[0]) {
+      if (event.currentTarget === (this as any).element[ 0 ]) {
         return;
       }
     }
@@ -61,16 +61,16 @@ export class FileDropDirective {
     this.fileOver.emit(false);
   }
 
-  protected _getTransfer(event:any):any {
+  protected _getTransfer(event: any): any {
     return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; // jQuery fix;
   }
 
-  protected _preventAndStop(event:any):any {
+  protected _preventAndStop(event: any): any {
     event.preventDefault();
     event.stopPropagation();
   }
 
-  protected _haveFiles(types:any):any {
+  protected _haveFiles(types: any): any {
     if (!types) {
       return false;
     }
@@ -83,13 +83,4 @@ export class FileDropDirective {
       return false;
     }
   }
-
-  /*
-   _addOverClass(item:any):any {
-   item.addOverClass();
-   }
-
-   _removeOverClass(item:any):any {
-   item.removeOverClass();
-   }*/
 }

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();

src/spec/file-drop.directive.spec.ts

@@ -1,28 +1,147 @@
-import { Component } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
 import { inject, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileUploader } from '../file-upload/file-uploader.class';
 import { FileUploadModule } from '../file-upload/file-upload.module';
+import { FileDropDirective } from '../file-upload/file-drop.directive';
 
 @Component({
   selector: 'container',
-  template: `<input type="file" ng2FileSelect [uploader]="uploader" />`
+  template: `<div type="file"
+                    ng2FileDrop
+                    [uploader]="uploader"
+             ></div>`
 })
 export class ContainerComponent {
-  public uploader:FileUploader = new FileUploader({url: 'localhost:3000'});
+  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;
+  let directiveElement: DebugElement;
+  let fileDropDirective: FileDropDirective;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [FileUploadModule],
-      declarations: [ContainerComponent],
-      providers: [ContainerComponent]
+      imports: [ FileUploadModule ],
+      declarations: [ ContainerComponent ],
+      providers: [ ContainerComponent ]
     });
   });
 
-  it('should be fine', inject([ContainerComponent], (fixture:ComponentFixture<ContainerComponent>) => {
-    expect(fixture).not.toBeNull();
-  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContainerComponent);
+    hostComponent = fixture.componentInstance;
+
+    fixture.detectChanges();
+
+    directiveElement = fixture.debugElement.query(By.directive(FileDropDirective));
+    fileDropDirective = directiveElement.injector.get(FileDropDirective) as FileDropDirective;
+  });
+
+  it('can be initialized', () => {
+    expect(fixture).toBeDefined();
+    expect(hostComponent).toBeDefined();
+    expect(fileDropDirective).toBeDefined();
+  });
+
+  it('can set file uploader', () => {
+    expect(fileDropDirective.uploader).toBe(hostComponent.uploader);
+  });
+
+  it('can get uploader options', () => {
+    const options = fileDropDirective.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 = fileDropDirective.getFilters();
+
+    // TODO: Update test once implemented
+    expect(filters).toEqual({});
+  });
+
+  it('handles drop event', () => {
+    spyOn(fileDropDirective, 'onDrop');
+
+    directiveElement.triggerEventHandler('drop', getFakeEventData());
+
+    expect(fileDropDirective.onDrop).toHaveBeenCalled();
+  });
+
+  it('adds file to upload', () => {
+    spyOn(fileDropDirective.uploader, 'addToQueue');
+
+    let fileOverData;
+    fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data);
+
+    let fileDropData;
+    fileDropDirective.onFileDrop.subscribe((data: File[]) => fileDropData = data);
+
+    fileDropDirective.onDrop(getFakeEventData());
+
+    const uploadedFiles = getFakeEventData().dataTransfer.files;
+    const expectedArguments = [ uploadedFiles, fileDropDirective.getOptions(), fileDropDirective.getFilters() ];
+
+    expect(fileDropDirective.uploader.addToQueue).toHaveBeenCalledWith(...expectedArguments);
+    expect(fileOverData).toBeFalsy();
+    expect(fileDropData).toEqual(uploadedFiles);
+  });
+
+  it('handles dragover event', () => {
+    spyOn(fileDropDirective, 'onDragOver');
+
+    directiveElement.triggerEventHandler('dragover', getFakeEventData());
+
+    expect(fileDropDirective.onDragOver).toHaveBeenCalled();
+  });
+
+  it('handles file over', () => {
+    let fileOverData;
+    fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data);
+
+    fileDropDirective.onDragOver(getFakeEventData());
+
+    expect(fileOverData).toBeTruthy();
+  });
+
+  it('handles dragleave event', () => {
+    spyOn(fileDropDirective, 'onDragLeave');
+
+    directiveElement.triggerEventHandler('dragleave', getFakeEventData());
+
+    expect(fileDropDirective.onDragLeave).toHaveBeenCalled();
+  });
+
+  it('handles file over leave', () => {
+    let fileOverData;
+    fileDropDirective.fileOver.subscribe((data: any) => fileOverData = data);
+
+    fileDropDirective.onDragLeave(getFakeEventData());
+
+    expect(fileOverData).toBeFalsy();
+  });
 });
+
+function getFakeEventData(): any {
+  return {
+    dataTransfer: {
+      files: [ 'foo.bar' ],
+      types: [ 'Files' ]
+    },
+    preventDefault: () => undefined,
+    stopPropagation: () => undefined
+  }
+}

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