Merge branch 'qa-integration'

Author: Parth Shah

app/account/register/register.jade

@@ -83,7 +83,7 @@
       p.form-error(ng-message="required") Please enter an email address.
 
     .validation-bar(ng-class="{ 'success-bar': (vm.registerForm.password.$valid) }")
-      toggle-password-with-tips(ng-if="!vm.isSocialRegistration")
+      toggle-password-with-tips(ng-if="!vm.isSocialRegistration", placeholder="Create Password")
 
       .tips.password-tips(ng-show="vm.passwordFocus")
         .arrow

app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js

@@ -11,6 +11,7 @@
       link: function(scope, element, attrs, formController) {
         var vm = scope.vm;
         vm.passwordField = formController.password;
+        vm.defaultPlaceholder = attrs.placeholder || 'Create new password';
         vm.placeholder = vm.defaultPlaceholder;
         vm.password = '';
 
@@ -40,6 +41,7 @@
           if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'passwordCheckbox') {
             vm.passwordFocus = true;
             vm.placeholder = '';
+            passwordInput.focus();
           } else {
             // If you are blurring from the password input and clicking anywhere but the checkbox
             vm.passwordFocus = false;

app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade

@@ -1,8 +1,7 @@
 input#password-input(
   ng-model="vm.password",
   ng-model-options="{allowInvalid: true}",
-
-  focus-on="focusOnInput",
+  
   ng-focus="vm.onFocus($event)",
   ng-blur="vm.onBlur($event)",
 
@@ -17,4 +16,4 @@ input#password-input(
   has-symbol-or-number,
   required)
 
-label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", id="passwordCheckbox", ng-model="focusOnInput", ng-change="vm.toggleInputType()")] Show
+label #[input(type="checkbox", id="passwordCheckbox", ng-model="focusOnInput", ng-change="vm.toggleInputType()")] Show

app/directives/account/toggle-password-with-tips/toggle-password-with-tips.spec.js

@@ -9,7 +9,145 @@ describe('Toggle Password With Tips Directive', function() {
     bard.appModule('topcoder');
     bard.inject(this, '$compile', '$rootScope');
     scope = $rootScope.$new();
+    scope.vm = {};
   });
 
   bard.verifyNoOutstandingHttpRequests();
+
+  describe('Toggle Password Directive', function() {
+    var togglePassword, controller, formController, passwordFormFieldSpy;
+
+    beforeEach(function() {
+      var form = angular.element('<form><toggle-password-with-tips /></form>)');
+      element = form.find('toggle-password-with-tips');
+      var formElement = $compile(form)(scope);
+      scope.$digest();
+
+      // controller = element.controller('togglePassword');
+      formController = form.controller('form');
+      passwordFormFieldSpy = sinon.spy(formController.password, '$setPristine');
+    });
+
+    afterEach(function() {
+      // do nohting
+    });
+
+    it('should have password default placeholder', function() {
+      expect(scope.vm.defaultPlaceholder).to.exist.to.equal('Create new password');
+      expect(scope.vm.placeholder).to.exist.to.equal('Create new password');
+    });
+
+    it('should not have focus class', function() {
+      expect(element.hasClass('focus')).to.be.false;
+    });
+
+    it('should trigger click handler ', function() {
+      var mockFocus = sinon.spy(element.find('input')[0], 'focus');
+      element.trigger('click');
+      expect(mockFocus).to.be.calledOnce;
+    });
+
+    it('should trigger focus handler ', function() {
+      var pwsIntputElement = angular.element(element.find('input')[0]);
+      pwsIntputElement.triggerHandler('focus');
+      expect(element.hasClass('focus')).to.be.true;
+    });
+
+    it('should trigger blur handler with form field pristine ', function() {
+      var pwsIntputElement = angular.element(element.find('input')[0]);
+      // focus it first
+      pwsIntputElement.triggerHandler('focus');
+      // verifies if focus class is added
+      expect(element.hasClass('focus')).to.be.true;
+      // now blurs from it
+      pwsIntputElement.triggerHandler('blur');
+      // focus class should not be there
+      expect(element.hasClass('focus')).to.be.false;
+      // password field's setPristine method should be called once because currentPassword is empty
+      expect(passwordFormFieldSpy).to.be.calledOnce;
+    });
+
+    it('should trigger blur handler without form field pristine ', function() {
+      scope.vm.password = 'some-password';
+      scope.$digest();
+      var pwsIntputElement = angular.element(element.find('input')[0]);
+      // focus it first
+      pwsIntputElement.triggerHandler('focus');
+      // verifies if focus class is added
+      expect(element.hasClass('focus')).to.be.true;
+      // now blurs from it
+      pwsIntputElement.triggerHandler('blur');
+      // focus class should not be there
+      expect(element.hasClass('focus')).to.be.false;
+      // password field's setPristine method should not be called because currentPassword is non-empty
+      expect(passwordFormFieldSpy).not.to.be.called;
+    });
+
+    it('should keep focus on password field on blurring to checkbox ', function() {
+
+      var pwsIntputElement = angular.element(element.find('input')[0]);
+      // focus it first
+      pwsIntputElement.triggerHandler('focus');
+      // verifies if focus class is added
+      expect(element.hasClass('focus')).to.be.true;
+      // now blurs from it
+
+      var e = jQuery.Event("blur");
+      e.relatedTarget = {
+        getAttribute: function(name) {
+          if (name === 'type') return 'checkbox';
+          if (name === 'id') return 'passwordCheckbox';
+        }
+      };
+      //mock focus event
+      var mockFocus = sinon.spy(element.find('input')[0], 'focus');
+      // trigger event
+      pwsIntputElement.trigger(e);
+
+      // focus should be called once
+      expect(mockFocus).to.be.calledOnce;
+      // password field placeholde should be empty
+      expect(scope.vm.placeholder).to.exist.to.equal('');
+    });
+
+    it('should change type of input field to be text ', function() {
+      var pwsIntputElement = angular.element(element.find('input')[0]);
+      var checkbox = angular.element(element.find('input')[1]);
+      // before clicking on checkbox, it should have password type
+      expect(pwsIntputElement.attr('type')).to.equal('password');
+      checkbox.trigger('click');
+      // after clicking on checkbox, it should have text type
+      expect(pwsIntputElement.attr('type')).to.equal('text');
+    });
+
+    it('should change type of input field to be password ', function() {
+      var pwsIntputElement = angular.element(element.find('input')[0]);
+      var checkbox = angular.element(element.find('input')[1]);
+      // before clicking on checkbox, it should have password type
+      expect(pwsIntputElement.attr('type')).to.equal('password');
+      checkbox.trigger('click');
+      // after clicking on checkbox, it should have text type
+      expect(pwsIntputElement.attr('type')).to.equal('text');
+      // click again to uncheck the checkbox
+      checkbox.trigger('click');
+      // after unchecking the checkbox, it should have password type
+      expect(pwsIntputElement.attr('type')).to.equal('password');
+    });
+
+    it('should trigger keyup handler with enter/return key ', function() {
+      var mockBlur = sinon.spy(element.find('input')[0], 'blur');
+      var e = jQuery.Event("keyup");
+      e.keyCode = 13;
+      element.trigger(e);
+      expect(mockBlur).to.be.calledOnce;
+    });
+
+    it('should NOT trigger keyup handler with non enter/return key ', function() {
+      var mockBlur = sinon.spy(element.find('input')[0], 'blur');
+      var e = jQuery.Event("keyup");
+      e.keyCode = 14;
+      element.trigger(e);
+      expect(mockBlur).not.to.be.called;
+    });
+  });
 });

app/directives/account/toggle-password/toggle-password.spec.js

@@ -1,5 +1,5 @@
 /* jshint -W117, -W030 */
-xdescribe('Toggle Password Directive', function() {
+describe('Toggle Password Directive', function() {
   var scope;
   var element;
 

app/directives/on-file-change.directive.js

@@ -11,7 +11,7 @@
     return {
       restrict: 'A',
       link: function(scope, element, attr, ctrl) {
-        element.bind("change", function() {
+        element.bind('change', function() {
           scope.vm.onFileChange(element[0].files[0]);
           this.value = '';
         });

app/directives/progress-bar/progress-bar.directive.jade

@@ -0,0 +1,6 @@
+.progress-bar
+  .progress-bar__bar
+    .progress-bar__bar--completed
+  .progress-bar__summary
+    span(ng-bind="completed")
+    span % {{message}}

app/directives/progress-bar/progress-bar.directive.js

@@ -0,0 +1,29 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('progressBar', progressBar);
+
+  progressBar.$inject = ['$timeout', '$parse'];
+
+  function progressBar($timeout, $parse) {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/progress-bar/progress-bar.directive.html',
+      link: function(scope, element, attr) {
+        var model = $parse(attr.completed);
+        var msg = attr.message;
+        var progress = angular.element(element[0].querySelector('.progress-bar__bar--completed'));
+
+        scope.$watch(model, function(newValue, oldValue) {
+          scope.completed = Math.round(newValue);
+          // console.log("Updating progress bar with " + scope.completed);
+          scope.message = msg;
+          progress.css('width', scope.completed + '%')
+        });
+      },
+      controller: ['$scope', function($scope) {
+
+      }]
+    };
+  }
+})();

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

@@ -0,0 +1,82 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcFileInput', tcFileInput);
+
+  function tcFileInput() {
+    return {
+      restrict: 'E',
+      require: '^form',
+      templateUrl: 'directives/tc-file-input/tc-file-input.html',
+      scope: {
+        labelText: '@',
+        fieldId: '@',
+        placeholder: '@',
+        fileType: '@',
+        showFileType: '=',
+        mandatory: '=',
+        buttonText: '@',
+        setFileReference: '&',
+        ngModel: '='
+      },
+      link: function(scope, element, attrs, formController) {
+        scope.selectFile = selectFile;
+        var fileTypes = scope.fileType.split(',');
+
+        // fieldId is not set on element at this point, so grabbing with class .none
+        // which exists on the element right away
+        var fileInput = $(element[0]).find('.none');
+        var fileNameInput = $(element[0]).find('input[type=text]');
+
+        fileInput.bind('change', function() {
+          var file = fileInput[0].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
+          if (!file) {
+            return;
+          }
+
+          var fileSize = file.size;
+          var isAllowedFileSize = fileSize < '500000000';
+
+          var selectedFileType = file.type.slice(file.type.lastIndexOf('/') + 1);
+          var isAllowedFileFormat = _.some(fileTypes, _.matches(selectedFileType));
+
+          scope.$apply(function(){
+            // Set the file name as the value of the disabled input
+            fileNameInput[0].value = file.name;
+            var clickedFileInput = formController[attrs.fieldId];
+
+            if (!isAllowedFileFormat) {
+              // Manually setting is required since Angular doesn't support file inputs
+              clickedFileInput.$setTouched();
+              clickedFileInput.$setValidity('required', false);
+
+            } else {
+              clickedFileInput.$setValidity('required', true);
+            }
+
+            if (!isAllowedFileSize) {
+              // Manually setting is required since Angular doesn't support file inputs
+              clickedFileInput.$setTouched();
+              clickedFileInput.$setValidity('filesize', false);
+
+            } else {
+              clickedFileInput.$setValidity('filesize', true);
+            }
+
+            if (isAllowedFileFormat && isAllowedFileSize) {
+              // Pass file object up through callback into controller
+              scope.setFileReference({file: file, fieldId: scope.fieldId});
+            }
+          });
+        });
+
+        function selectFile() {
+          fileInput.click();
+        }
+      }
+    }
+  }
+})();

app/directives/tc-file-input/tc-file-input.jade

@@ -0,0 +1,12 @@
+.tc-file-field__label
+  label.tc-label {{labelText}}
+    span.lowercase(ng-if="showFileType") {{ ' *(.' + fileType + ')'}}
+
+    span.tc-label__mandatory.lowercase(ng-if="mandatory") #[span *]mandatory
+
+.tc-file-field__inputs
+  input.tc-file-field__input(type="text", placeholder="{{placeholder}}", disabled)
+
+  button.tc-btn(ng-click="selectFile()") {{buttonText}}
+
+  input.none(name="{{fieldId}}", type="file", required, ng-model="ngModel")

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

@@ -0,0 +1,19 @@
+/* jshint -W117, -W030 */
+describe('Topcoder File Input Directive', function() {
+  var scope;
+
+  // USE AS TEMPLATE FOR DIRECTIVES
+
+  beforeEach(function() {
+    bard.appModule('tcUIComponents');
+    bard.inject(this, '$compile', '$rootScope');
+  });
+
+  bard.verifyNoOutstandingHttpRequests();
+
+  xdescribe('', function() {
+    beforeEach(function() {});
+
+    it('', function() {});
+  });
+});