Add accepted types attribute to file input (#658)

* Add accepted types attribute to file input * Handle no file type and add tests * Up mismatch percentage and add more helpful logging when screenshots fail * Update mismatch tolerance
blackbaud · May 4, 2017 · 5e5af44 · 5e5af44
1 parent 547a10a
commit 5e5af44
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 15 deletions.
diff --git a/config/utils/visual-browser-commands.js b/config/utils/visual-browser-commands.js
@@ -30,6 +30,10 @@
 
   function checkVisualResult(results, options, browser) {
     results.forEach(function (element) {
+      if (!element.isWithinMisMatchTolerance) {
+        log('Screenshot has mismatch percentage of ' + element.misMatchPercentage);
+      }
+
       expect(element.isWithinMisMatchTolerance).toBe(true);
     });
 
@@ -127,7 +131,7 @@
         referenceName: getScreenshotName(path.join(process.cwd(), referenceFolder)),
         screenshotName: getScreenshotName(path.join(process.cwd(), screenshotFolder)),
         diffName: getScreenshotName(path.join(process.cwd(), diffsFolder)),
-        misMatchTolerance: 0.01
+        misMatchTolerance: 1.5
       }),
       viewportChangePause: 300
     };

diff --git a/src/modules/fileattachments/file-drop.component.html b/src/modules/fileattachments/file-drop.component.html
@@ -17,6 +17,7 @@
           type="file"
           class="sky-file-input-hidden"
           [attr.multiple]="multiple ? multiple: null"
+          [attr.accept]="acceptedTypes ? acceptedTypes: null"
           (change)="fileChangeEvent($event)"
           #fileInput/>
           <div class="sky-file-drop-contents" *ngIf="customEl.children.length === 0">

diff --git a/src/modules/fileattachments/file-drop.component.spec.ts b/src/modules/fileattachments/file-drop.component.spec.ts
@@ -164,21 +164,24 @@ describe('File drop component', () => {
     };
   }
 
-  function setupStandardFileChangeEvent() {
+  function setupStandardFileChangeEvent(files?: Array<any>) {
     let fileReaderSpy = setupFileReaderSpy();
 
-    triggerChangeEvent([
-      {
-        name: 'foo.txt',
-        size: 1000,
-        type: 'image/png'
-      },
-      {
-        name: 'woo.txt',
-        size: 2000,
-        type: 'image/jpeg'
-      }
-    ]);
+    if (!files) {
+      files = [
+        {
+          name: 'foo.txt',
+          size: 1000,
+          type: 'image/png'
+        },
+        {
+          name: 'woo.txt',
+          size: 2000,
+          type: 'image/jpeg'
+        }
+      ];
+    }
+    triggerChangeEvent(files);
 
     fixture.detectChanges();
 
@@ -283,6 +286,15 @@ describe('File drop component', () => {
     expect(inputEl.nativeElement.hasAttribute('multiple')).toBe(true);
   });
 
+  it('should set accepted types on the file input html', () => {
+    componentInstance.acceptedTypes = 'image/png';
+    fixture.detectChanges();
+    let inputEl = getInputDebugEl();
+
+    expect(inputEl.nativeElement.getAttribute('accept')).toBe('image/png');
+
+  });
+
   it('should allow the user to specify a min file size', () => {
     let filesChangedActual: SkyFileDropChange;
 
@@ -383,6 +395,43 @@ describe('File drop component', () => {
     expect(filesChangedActual.files[0].file.size).toBe(1000);
   });
 
+   it('should reject a file with no type when accepted types are defined', () => {
+    let filesChangedActual: SkyFileDropChange;
+
+    componentInstance.filesChanged.subscribe(
+      (filesChanged: SkyFileDropChange) => filesChangedActual = filesChanged );
+
+    componentInstance.acceptedTypes = 'image/png,image/tiff';
+
+    fixture.detectChanges();
+
+    let files = [
+        {
+          name: 'foo.txt',
+          size: 1000
+        },
+        {
+          name: 'woo.txt',
+          size: 2000,
+          type: 'image/jpeg'
+        }
+      ];
+
+    setupStandardFileChangeEvent(files);
+
+    expect(filesChangedActual.rejectedFiles.length).toBe(2);
+    expect(filesChangedActual.rejectedFiles[1].file.name).toBe('woo.txt');
+    expect(filesChangedActual.rejectedFiles[1].file.size).toBe(2000);
+    expect(filesChangedActual.rejectedFiles[1].errorType).toBe('fileType');
+    expect(filesChangedActual.rejectedFiles[1].errorParam).toBe(componentInstance.acceptedTypes);
+
+    expect(filesChangedActual.rejectedFiles[0].file.name).toBe('foo.txt');
+    expect(filesChangedActual.rejectedFiles[0].file.size).toBe(1000);
+    expect(filesChangedActual.rejectedFiles[0].errorType).toBe('fileType');
+    expect(filesChangedActual.rejectedFiles[0].errorParam).toBe(componentInstance.acceptedTypes);
+
+  });
+
   it('should allow the user to specify accepted type with wildcards', () => {
     let filesChangedActual: SkyFileDropChange;
 

diff --git a/src/modules/fileattachments/file-drop.component.ts b/src/modules/fileattachments/file-drop.component.ts
@@ -221,6 +221,10 @@ export class SkyFileDropComponent {
       return false;
     }
 
+    if (!fileType) {
+      return true;
+    }
+
     let acceptedTypesUpper = this.acceptedTypes.toUpperCase();
     let typeArray = acceptedTypesUpper.split(',');
     return !this.fileTypeInArray(typeArray, fileType.toUpperCase());
@@ -244,7 +248,7 @@ export class SkyFileDropComponent {
         fileItem.errorType = 'maxFileSize';
         fileItem.errorParam = this.maxFileSize.toString();
         this.filesRejected(fileItem, validFileArray, rejectedFileArray, totalFiles);
-      } else if (fileItem.file.type && this.fileTypeRejected(fileItem.file.type)) {
+      } else if (this.fileTypeRejected(fileItem.file.type)) {
         fileItem.errorType = 'fileType';
         fileItem.errorParam = this.acceptedTypes;
         this.filesRejected(fileItem, validFileArray, rejectedFileArray, totalFiles);