Add tests for tc-file-input

Author: Nick Litwin

app/directives/tc-file-input/tc-file-input.directive.js

@@ -28,8 +28,8 @@
         var fileInput = $(element[0]).find('.none');
         var fileNameInput = $(element[0]).find('input[type=text]');
 
-        fileInput.bind('change', function() {
-          var file = fileInput[0].files[0];
+        fileInput.bind('change', function(event) {
+          var file = event.target.files[0];
 
           // About 1 in 20 times, the file is undefined (must be race condition)
           // Return early in this case so no errors are thrown

app/directives/tc-file-input/tc-file-input.spec.js

@@ -1,6 +1,6 @@
 /* jshint -W117, -W030 */
-describe.only('Topcoder File Input Directive', function() {
-  var scope, element, isolateScope;
+describe('Topcoder File Input Directive', function() {
+  var scope, element, isolateScope, fileInput;
 
   beforeEach(function() {
     bard.appModule('topcoder');
@@ -28,11 +28,19 @@ describe.only('Topcoder File Input Directive', function() {
     isolateScope = element.isolateScope();
   });
 
+  beforeEach(function() {
+    fileInput = $(element).find('.none')[0];
+  });
+
+  afterEach(function() {
+    scope.$destroy();
+    fileInput = undefined;
+  });
+
   bard.verifyNoOutstandingHttpRequests();
 
   describe('selectFile', function() {
     it('triggers a click on the file input', function() {
-      var fileInput = $(element).find('.none')[0];
       var mockClick = sinon.spy(fileInput, 'click');
 
       isolateScope.selectFile();
@@ -42,17 +50,99 @@ describe.only('Topcoder File Input Directive', function() {
     });
   });
 
-  describe('change events on the file input', function() {
-    it('do things', function() {
-      expect(false).to.be.true;
+  describe('a change event on the file input', function() {
+    var fileNameInput, fileList, mockSetFileReference;
+
+    beforeEach(function() {
+      fileNameInput = $(element).find('input[type=text]')[0];
+      fileList = {
+        0: {
+          name: 'test.png',
+          size: 50,
+          type: 'image/png'
+        },
+        length: 1,
+        item: function (index) { return file; }
+      };
+
+      mockSetFileReference = sinon.spy(isolateScope, 'setFileReference');
+    });
+
+    afterEach(function() {
+      fileNameInput = undefined;
+      fileList = undefined;
+      mockSetFileReference = undefined;
+    });
+
+    it('sets the value of the fileNameInput with the name of the file', function() {
+      $(fileInput).triggerHandler({
+        type: 'change',
+        target: { files: fileList }
+      });
+
+      expect(fileNameInput.value).to.equal('test.png');
     });
 
-    it('do other things', function() {
-      expect(false).to.be.true;
+    describe('with a valid file', function() {
+      beforeEach(function() {
+        $(fileInput).triggerHandler({
+          type: 'change',
+          target: { files: fileList }
+        });
+      });
+
+      it('calls setFileReference', function() {
+        expect(mockSetFileReference).calledOnce;
+      });
+
+      it('has ng-valid-filesize class', function() {
+        expect($(fileInput).hasClass('ng-valid-filesize')).to.be.true;
+      });
+
+      it('has ng-valid-required class', function() {
+        expect($(fileInput).hasClass('ng-valid-required')).to.be.true;
+      });
+    });
+
+    describe('with a file that\'s greater than 500MB', function() {
+      beforeEach(function() {
+        fileList[0].size = 500000001;
+
+        $(fileInput).triggerHandler({
+          type: 'change',
+          target: { files: fileList }
+        });
+      });
+
+      it('does not call setFileReference', function() {
+        expect(mockSetFileReference).not.calledOnce;
+      });
+
+      it('has ng-touched and ng-invalid-filesize classes', function() {
+        expect($(fileInput).hasClass('ng-invalid-filesize')).to.be.true;
+        expect($(fileInput).hasClass('ng-touched')).to.be.true;
+      });
     });
 
-    it('yet some more things', function() {
-      expect(false).to.be.true;
+    describe('with a file type that\'s not in the list of fileTypes given to the directive', function() {
+      beforeEach(function() {
+        fileList[0].type = 'application/zip';
+
+        $(fileInput).triggerHandler({
+          type: 'change',
+          target: { files: fileList }
+        });
+      });
+
+      it('does not call setFileReference', function() {
+        expect(mockSetFileReference).not.calledOnce;
+      });
+
+      it('has ng-touched and ng-invalid-required classes', function() {
+        expect($(fileInput).hasClass('ng-invalid-required')).to.be.true;
+        expect($(fileInput).hasClass('ng-touched')).to.be.true;
+      });
     });
+
   });
 });

app/directives/tc-form-fonts/tc-form-fonts.spec.js

@@ -15,6 +15,10 @@ describe('Topcoder Form Fonts Directive', function() {
     isolateScope = element.isolateScope();
   });
 
+  afterEach(function() {
+    scope.$destroy();
+  });
+
   bard.verifyNoOutstandingHttpRequests();
 
   describe('is initialized with', function() {

app/directives/tc-form-stockart/tc-form-stockart.spec.js

@@ -15,6 +15,10 @@ describe('Topcoder Form Stockart Directive', function() {
     isolateScope = element.isolateScope();
   });
 
+  afterEach(function() {
+    scope.$destroy();
+  });
+
   bard.verifyNoOutstandingHttpRequests();
 
   describe('is initialized with', function() {

app/directives/tc-input/tc-input.spec.js

@@ -11,6 +11,10 @@ describe('Topcoder Input Directive', function() {
     scope.$digest();
   });
 
+  afterEach(function() {
+    scope.$destroy();
+  });
+
   bard.verifyNoOutstandingHttpRequests();
 
   it('should set inputType to text if no inputType given', function() {