fix(FileUpload): consistent error handling (#1483)

ISSUES CLOSED: #1357
GetTerminus · May 1, 2019 · 302c58d · 302c58d
1 parent ca6376c
commit 302c58d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/terminus-ui/file-upload/src/file-upload.component.spec.ts b/terminus-ui/file-upload/src/file-upload.component.spec.ts
@@ -237,8 +237,10 @@ describe(`TsFileUploadComponent`, function() {
       component.seedFile = FILE_MOCK;
       fixture.detectChanges();
       const messages = fixture.debugElement.query(By.css('.c-validation-message'));
+      const uploadDiv = fixture.debugElement.query(By.css('.c-file-upload'));
 
       expect(messages.nativeElement.textContent).toContain('Must be smaller than');
+      expect(uploadDiv.classes['c-file-upload--error']).toBeTruthy();
     });
 
 
@@ -248,12 +250,14 @@ describe(`TsFileUploadComponent`, function() {
       component.seedFile = FILE_MOCK;
       fixture.detectChanges();
       const messages = fixture.debugElement.query(By.css('.c-validation-message'));
+      const uploadDiv = fixture.debugElement.query(By.css('.c-file-upload'));
 
       expect(messages.nativeElement.textContent).toContain('is not an accepted MIME type');
+      expect(uploadDiv.classes['c-file-upload--error']).toBeTruthy();
     });
 
 
-    test(`should show MIME type validation message`, () => {
+    test(`should show image dimension validation message`, () => {
       hostComponent.constraints = [{
         height: {
           min: 50,
@@ -268,8 +272,23 @@ describe(`TsFileUploadComponent`, function() {
       component.seedFile = FILE_MOCK;
       fixture.detectChanges();
       const messages = fixture.debugElement.query(By.css('.c-validation-message'));
+      const uploadDiv = fixture.debugElement.query(By.css('.c-file-upload'));
 
       expect(messages.nativeElement.textContent).toContain('is not an allowed image dimension');
+      expect(uploadDiv.classes['c-file-upload--error']).toBeTruthy();
+    });
+
+
+    test(`should show image ratio validation message`, () => {
+      hostComponent.ratioConstraints = ['2:1'];
+      fixture.detectChanges();
+      component.seedFile = FILE_MOCK;
+      fixture.detectChanges();
+      const messages = fixture.debugElement.query(By.css('.c-validation-message'));
+      const uploadDiv = fixture.debugElement.query(By.css('.c-file-upload'));
+
+      expect(messages.nativeElement.textContent).toContain('is not an allowed image ratio');
+      expect(uploadDiv.classes['c-file-upload--error']).toBeTruthy();
     });
 
   });

diff --git a/terminus-ui/file-upload/src/selected-file.spec.ts b/terminus-ui/file-upload/src/selected-file.spec.ts
@@ -287,17 +287,37 @@ describe(`TsSelectedFile`, function() {
 
 
   describe(`isValid`, () => {
+    const file = createFile();
 
-    test(`should return true if all validations are true`, () => {
-      const file = createFile();
+    beforeEach(() => {
       file.validations.fileType = true;
-      file.validations.fileSize = false;
+      file.validations.fileSize = true;
       file.validations.imageDimensions = true;
+      file.validations.imageRatio = true;
+    });
+
+    test(`should return true if all validations are true`, () => {
+      expect(file.isValid).toEqual(true);
+    });
+
+    test(`should return false if file type validation is false`, () => {
+      file.validations.fileType = false;
+      expect(file.isValid).toEqual(false);
+    });
 
+    test(`should return false if file size validation is false`, () => {
+      file.validations.fileSize = false;
       expect(file.isValid).toEqual(false);
+    });
 
-      file.validations.fileSize = true;
-      expect(file.isValid).toEqual(true);
+    test(`should return false if image dimensions validation is false`, () => {
+      file.validations.imageDimensions = false;
+      expect(file.isValid).toEqual(false);
+    });
+
+    test(`should return false if image ration validation is false`, () => {
+      file.validations.imageRatio = false;
+      expect(file.isValid).toEqual(false);
     });
 
   });

diff --git a/terminus-ui/file-upload/src/selected-file.ts b/terminus-ui/file-upload/src/selected-file.ts
@@ -157,7 +157,7 @@ export class TsSelectedFile {
    * @return Is valid
    */
   public get isValid(): boolean {
-    return (this.validations.fileType && this.validations.fileSize && this.validations.imageDimensions);
+    return (this.validations.fileType && this.validations.fileSize && this.validations.imageDimensions && this.validations.imageRatio);
   }