From 9d1f9ebe488722f59ed10e813ef10b62a6b05e1d Mon Sep 17 00:00:00 2001 From: Blackbaud-PatrickOFriel Date: Wed, 3 May 2017 17:10:01 -0400 Subject: [PATCH 1/4] Add accepted types attribute to file input --- src/modules/fileattachments/file-drop.component.html | 1 + 1 file changed, 1 insertion(+) 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/>
From 0dd23bbb33f928c8ae0b2c11d7587f54986d5bcd Mon Sep 17 00:00:00 2001 From: Blackbaud-PatrickOFriel Date: Thu, 4 May 2017 10:05:32 -0400 Subject: [PATCH 2/4] Handle no file type and add tests --- config/utils/visual-browser-commands.js | 2 +- .../file-drop.component.spec.ts | 75 +++++++++++++++---- .../fileattachments/file-drop.component.ts | 6 +- 3 files changed, 68 insertions(+), 15 deletions(-) diff --git a/config/utils/visual-browser-commands.js b/config/utils/visual-browser-commands.js index 0a6fd18c8..4e5f5fd08 100644 --- a/config/utils/visual-browser-commands.js +++ b/config/utils/visual-browser-commands.js @@ -127,7 +127,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: 0.03 }), viewportChangePause: 300 }; 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); From cb85157340f69d5525632713b8ac9556fb94c71a Mon Sep 17 00:00:00 2001 From: Blackbaud-PatrickOFriel Date: Thu, 4 May 2017 10:34:36 -0400 Subject: [PATCH 3/4] Up mismatch percentage and add more helpful logging when screenshots fail --- config/utils/visual-browser-commands.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/config/utils/visual-browser-commands.js b/config/utils/visual-browser-commands.js index 4e5f5fd08..badd607f0 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.03 + misMatchTolerance: 0.05 }), viewportChangePause: 300 }; From 66ce7843be3cd89cdb23d4831fbed3fb24682d77 Mon Sep 17 00:00:00 2001 From: Blackbaud-PatrickOFriel Date: Thu, 4 May 2017 11:04:18 -0400 Subject: [PATCH 4/4] Update mismatch tolerance --- config/utils/visual-browser-commands.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/utils/visual-browser-commands.js b/config/utils/visual-browser-commands.js index badd607f0..c01592218 100644 --- a/config/utils/visual-browser-commands.js +++ b/config/utils/visual-browser-commands.js @@ -131,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.05 + misMatchTolerance: 1.5 }), viewportChangePause: 300 };