From 5e5af440c2589d2bac68985dc756da8e8a31f8c6 Mon Sep 17 00:00:00 2001 From: Blackbaud-PatrickOFriel Date: Thu, 4 May 2017 13:09:03 -0400 Subject: [PATCH] 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 --- config/utils/visual-browser-commands.js | 6 +- .../fileattachments/file-drop.component.html | 1 + .../file-drop.component.spec.ts | 75 +++++++++++++++---- .../fileattachments/file-drop.component.ts | 6 +- 4 files changed, 73 insertions(+), 15 deletions(-) diff --git a/config/utils/visual-browser-commands.js b/config/utils/visual-browser-commands.js index 0a6fd18c8..c01592218 100644 --- 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 index 7c3bfac1d..8fdc90b42 100644 --- 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/>
diff --git a/src/modules/fileattachments/file-drop.component.spec.ts b/src/modules/fileattachments/file-drop.component.spec.ts index 294c5e549..7785fad17 100644 --- 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) { 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 index be24e5e32..7fa5e2350 100644 --- 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);