bugfix(ts): changed file.types type to work with both ts 2.0 and 2.…

…1. (closes #236) (#241) * fix file.types type to work with both ts 2.0 and 2.1 * unit tests for file-drop.directive * initial unit testing for file-select.directive * fix tslint errors * upgrade depdencies to @angular@2.4.2 and [email protected] * added unit tests for file-upload.component * upgrade tslint and codelyzer for 2.1.4 support * moved some rules into the tsconfig.json * fix linting issues with upgraded tslint
Teradata · Jan 10, 2017 · 48cdbca · 48cdbca
1 parent b297746
commit 48cdbca
Show file tree

Hide file tree

Showing 22 changed files with 543 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -51,16 +51,16 @@
     "Ilsun Park <[email protected]>"
   ],
   "dependencies": {
-    "@angular/common": "^2.4.1",
-    "@angular/compiler": "^2.4.1",
-    "@angular/core": "^2.4.1",
-    "@angular/forms": "^2.4.1",
-    "@angular/http": "^2.4.1",
+    "@angular/common": "^2.4.2",
+    "@angular/compiler": "^2.4.2",
+    "@angular/core": "^2.4.2",
+    "@angular/forms": "^2.4.2",
+    "@angular/http": "^2.4.2",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "^2.4.1",
-    "@angular/platform-browser-dynamic": "^2.4.1",
-    "@angular/platform-server": "^2.4.1",
-    "@angular/router": "^3.4.1",
+    "@angular/platform-browser": "^2.4.2",
+    "@angular/platform-browser-dynamic": "^2.4.2",
+    "@angular/platform-server": "^2.4.2",
+    "@angular/router": "^3.4.2",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "highlight.js": "9.6.0",
@@ -70,14 +70,14 @@
     "d3": "^4.2.1"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.1",
+    "@angular/compiler-cli": "^2.4.2",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "^2.2.31",
     "@types/node": "^6.0.34",
     "@types/selenium-webdriver": "^2.52.0",
     "angular-cli": "1.0.0-beta.24",
     "awesome-typescript-loader": "^2.2.4",
-    "codelyzer": "~0.0.26",
+    "codelyzer": "2.0.0-beta.4",
     "coveralls": "^2.11.15",
     "ember-cli-inject-live-reload": "1.4.0",
     "glob": "^6.0.4",
@@ -87,7 +87,7 @@
     "gulp-if": "2.0.1",
     "gulp-sass": "2.3.2",
     "gulp-sourcemaps": "1.6.0",
-    "gulp-typescript": "3.0.1",
+    "gulp-typescript": "3.1.4",
     "gulp-util": "3.0.7",
     "jasmine-core": "^2.4.1",
     "jasmine-spec-reporter": "2.5.0",
@@ -109,7 +109,7 @@
     "sass-loader": "^4.0.2",
     "semver": "5.2.0",
     "ts-node": "1.2.1",
-    "tslint": "^3.15.1",
-    "typescript": "2.0.10"
+    "tslint": "^4.1.1",
+    "typescript": "2.1.4"
   }
 }
diff --git a/scripts/compile-ts.js b/scripts/compile-ts.js
@@ -25,7 +25,11 @@ var tsProject = ts.createProject({
       ],
       types: [
         "jasmine", "hammerjs", "rxjs"
-      ]
+      ],
+      noUnusedParameters: false,
+      noUnusedLocals: false,
+      allowUnreachableCode: false,
+      pretty: true
     });
 
 gulp.task('compile-ts', 'Build the UDA scripts', function() {

diff --git a/src/app/app.animations.ts b/src/app/app.animations.ts
@@ -6,7 +6,7 @@ export const fadeAnimation: AnimationEntryMetadata =
     state('*',
       style({
         opacity: 1,
-      })
+      }),
     ),
     transition(':enter', [
       style({
@@ -26,7 +26,7 @@ export const slideInLeftAnimation: AnimationEntryMetadata =
       style({
         opacity: 1,
         transform: 'translateX(0)',
-      })
+      }),
     ),
     transition(':enter', [
       style({
@@ -48,7 +48,7 @@ export const slideInDownAnimation: AnimationEntryMetadata =
       style({
         opacity: 1,
         transform: 'translateY(0)',
-      })
+      }),
     ),
     transition(':enter', [
       style({

diff --git a/src/platform/charts/charts.component.ts b/src/platform/charts/charts.component.ts
@@ -132,7 +132,7 @@ export class TdXAxisComponent {
       .attr('transform', 'translate(0,' + this._parent.height + ')')
       .call(d3.axisBottom(x)
             .tickSize(-this._parent.height)
-            .tickFormat('')
+            .tickFormat(''),
       );
     svg.append('text')
       .attr('display', this.show ? 'display' : 'none')

diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts
@@ -17,7 +17,7 @@ export const TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR: any = {
 
 export enum TdDataTableSortingOrder {
   Ascending = <any>'ASC',
-  Descending = <any>'DESC'
+  Descending = <any>'DESC',
 };
 
 export interface ITdDataTableColumn {
@@ -225,7 +225,7 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
     for (let i: number = 0; i < this._templates.toArray().length; i++) {
       this._templateMap.set(
         this._templates.toArray()[i].tdDataTableTemplate,
-        this._templates.toArray()[i].templateRef
+        this._templates.toArray()[i].templateRef,
       );
     }
   }

diff --git a/src/platform/core/file/directives/file-drop.directive.spec.ts b/src/platform/core/file/directives/file-drop.directive.spec.ts
@@ -0,0 +1,231 @@
+import {
+  TestBed,
+  inject,
+  async,
+  ComponentFixture,
+} from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { CovalentFileModule, TdFileDropDirective } from '../file.module';
+import { By } from '@angular/platform-browser';
+
+describe('Directive: FileDrop', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        TdFileDropBasicTestComponent,
+      ],
+      imports: [
+        CovalentFileModule.forRoot(),
+      ],
+    });
+    TestBed.compileComponents();
+  }));
+
+  it('should add/remove class on dragenter and dragleave',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.multiple = false;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        directive.triggerEventHandler('dragenter', new Event('dragenter'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(directive.classes['drop-zone']).toBeTruthy();
+          directive.triggerEventHandler('dragleave', new Event('dragleave'));
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(directive.classes['drop-zone']).toBeFalsy();
+          });
+        });
+      });
+  })));
+
+  it('should disable element and not add class on dragenter',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.disabled = true;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        directive.triggerEventHandler('dragenter', new Event('dragenter'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(directive.classes['drop-zone']).toBeFalsy();
+        });
+      });
+  })));
+
+  it('should throw dragover event and add copy dropEffect for a single file',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.multiple = false;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        let event: any = <DragEvent>new Event('dragover');
+        event.dataTransfer = {
+          dropEffect: 'none',
+          types: ['Files'],
+          items: ['file-name.txt'],
+        };
+        directive.triggerEventHandler('dragover', event);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(event.dataTransfer.dropEffect).toBe('copy');
+        });
+      });
+  })));
+
+  it('should throw dragover event and not add copy dropEffect for a multiple file',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.multiple = false;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        let event: any = <DragEvent>new Event('dragover');
+        event.dataTransfer = {
+          dropEffect: 'none',
+          types: ['Files'],
+          items: ['file-name.txt', 'file-name1.txt'],
+        };
+        directive.triggerEventHandler('dragover', event);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(event.dataTransfer.dropEffect).toBe('none');
+        });
+      });
+  })));
+
+  it('should throw dragover event and add copy dropEffect for a multiple file',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.multiple = true;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        let event: any = <DragEvent>new Event('dragover');
+        event.dataTransfer = {
+          dropEffect: 'none',
+          types: ['Files'],
+          items: ['file-name.txt', 'file-name1.txt'],
+        };
+        directive.triggerEventHandler('dragover', event);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(event.dataTransfer.dropEffect).toBe('copy');
+        });
+      });
+  })));
+
+  it('should throw dragover event and not add copy dropEffect on disabled state',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.multiple = false;
+      component.disabled = true;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        let event: any = <DragEvent>new Event('dragover');
+        event.dataTransfer = {
+          dropEffect: 'none',
+          types: ['Files'],
+          items: ['file-name.txt'],
+        };
+        directive.triggerEventHandler('dragover', event);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(event.dataTransfer.dropEffect).toBe('none');
+        });
+      });
+  })));
+
+  it('should throw ondrop event for a single file',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.multiple = false;
+      expect(component.files).toBeFalsy();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        let event: any = <DragEvent>new Event('drop');
+        event.dataTransfer = {
+          files: [{}],
+        };
+        directive.triggerEventHandler('drop', event);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(component.files).toBeTruthy();
+        });
+      });
+  })));
+
+  it('should throw ondrop event for a multiple files',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.multiple = true;
+      expect(component.files).toBeFalsy();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        let event: any = <DragEvent>new Event('drop');
+        event.dataTransfer = {
+          files: [{}, {}],
+        };
+        directive.triggerEventHandler('drop', event);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect((<FileList>component.files).length).toBe(2);
+        });
+      });
+  })));
+
+  it('should not throw ondrop event for disabled state',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileDropBasicTestComponent);
+      let component: TdFileDropBasicTestComponent = fixture.debugElement.componentInstance;
+      component.disabled = true;
+      expect(component.files).toBeFalsy();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let directive: DebugElement = fixture.debugElement.query(By.directive(TdFileDropDirective));
+        let event: any = <DragEvent>new Event('drop');
+        event.dataTransfer = {
+          files: [{}],
+        };
+        directive.triggerEventHandler('drop', event);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(component.files).toBeFalsy();
+        });
+      });
+  })));
+
+});
+
+@Component({
+  selector: 'td-file-drop-basic-test',
+  template: `
+  <div tdFileDrop
+       [multiple]="multiple" 
+       [disabled]="disabled"
+       (fileDrop)="files = $event">
+  
+  </div>
+  `,
+})
+class TdFileDropBasicTestComponent {
+  multiple: boolean;
+  disabled: boolean;
+  files: FileList | File;
+}
diff --git a/src/platform/core/file/directives/file-drop.directive.ts b/src/platform/core/file/directives/file-drop.directive.ts
@@ -116,10 +116,10 @@ export class TdFileDropDirective {
   /**
    * Validates if the transfer item types are 'Files'.
    */
-  private _typeCheck(types: DOMStringList): string {
+  private _typeCheck(types: string[] | DOMStringList): string {
     let dropEffect: string = 'none';
     if (types) {
-      if ((types.contains && types.contains('Files'))
+      if (((<any>types).contains && (<any>types).contains('Files'))
       || ((<any>types).indexOf && (<any>types).indexOf('Files') !== -1)) {
         dropEffect = 'copy';
       }