Устранение неисправностей Угловая директива

Question

У меня возникла небольшая проблема, когда выяснилось, как тестировать базовую угловую директиву с использованием жасмина.

По существу все директивы она будет проверить, что два входа пароля равны и устанавливает

директива выглядит следующим образом:

angular.module('jhApp') 
.directive('jhEquals', function() { 

    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: linker 
    }; 

    function linker(scope, elem, attrs, ngModel) { 
     if(!ngModel) { 
      return false; 
     } 

     //watch own value and re-validate 
     scope.$watch(attrs.ngModel, function() { 
      validate(); 
     }); 

     //observe other value and re-validate on change 
     attrs.$observe('jhEquals', function() { 
      validate(); 
     }); 

     var validate = function() { 
      var val1 = ngModel.$viewValue; 
      var val2 = attrs.jhEquals; 

      //set validity 
      if(val1 && val2) { 
       ngModel.$setValidity('jhEquals', !val1 || !val2 || val1 === val2); 
      } 
     }; 
    } 

}); 

и спецификации выглядит следующим образом:

var scope, 
    dirElement; 

    beforeEach(function() { 
     module('jhApp'); 
     module('templates'); 

     inject(function($rootScope, $compile) { 
      scope = $rootScope; 
      scope.user = {}; 

      dirElement = angular.element('<input id="password" type="password" name="password" ng-model="user.password" jh-equals="{{user.passwordconfirm}}"><input id="newpasswordconfirm" type="password" name="newpasswordconfirm" ng-model="user.passwordconfirm" jh-equals="{{user.password}}>'); 

      $compile(dirElement)(scope); 
     }); 

     scope.$digest(); 
    }); 


it('should check if values are equal', function() { 
    var passwordInput = dirElement.find('#password'); 
    var confirmPasswordInput = dirElement.find('#newpasswordconfirm'); 

    angular.element(passwordInput).val('testpassword').trigger('input'); 
    angular.element(confirmPasswordInput).val('nottestpassword').trigger('input'); 
    scope.$digest(); 

    //expect this to be invalid 

}); 

passwordInput & confirmPasswordInput - показывает пустые объекты, когда я консолью, и если я проверю значения val1 и val2 в val idate() в директиве всегда не определено.

Итак, я думаю, проблема в том, что я не могу понять, как выбрать входные данные для добавления контента.

Answer 1

Вы почти там, но все еще есть проблемы с маленькими деталями.

Прежде всего, вам нужно разместить директиву внутри формы, чтобы проверить правильность. Также проверьте, что последнее значение jh-equals привязывает его к ошибке.

Во-вторых, функция поиска jqlite работает только с селекторами элементов. Таким образом, невозможно выбрать элемент типа dirElement.find ('# testpassword'), но да, как dirElement.find («вход»). Причина, по которой они сняли эту функцию с jqlite, - сделать ее намного более легкой. Вместо этого вы можете сделать dirElement.find («вход») и выбрать нужный вход index. Это может показаться грубой задачей, но в любом случае в большинстве случаев, когда вам нужно выбрать элемент в jqlite, он будет находиться в небольшом наборе внутри дерева dom, например, в тестовой среде или во внутренней гибели из какой-либо директивы.

Наконец, триггер jqlite называется триггером, а не триггером.

Конечное изображение должно быть что-то вроде этого:

var scope, dirElement; 

beforeEach(function() { 
    module('jhApp'); 
    module('templates'); 

    inject(function($rootScope, $compile) { 
    scope = $rootScope; 
    scope.user = {}; 

    dirElement = $compile([ 
     '<form name="form">', 
     '<input id="password" type="password" name="password"', 
     ' ng-model="user.password" jh-equals="{{user.passwordconfirm}}" />', 
     '<input id="newpasswordconfirm" type="password"', 
     ' name="newpasswordconfirm" ng-model="user.passwordconfirm"', 
     ' jh-equals="{{user.password}}" />', 
     '</form>', 
    ].join(''))(scope); 
    scope.$digest(); 
    }); 

}); 

it('invalid if the values are not equal', function() { 
    var passwordInput = dirElement.find('input'); 
    var confirmPasswordInput = dirElement.find('input')[1]; 

    angular.element(passwordInput) 
     .val('testpassword') 
     .triggerHandler('input'); 
    angular.element(confirmPasswordInput) 
     .val('nottestpassword') 
     .triggerHandler('input'); 

    expect(scope.form.password.$invalid).toBe(true); 
    expect(scope.form.password.$valid).toBe(false); 
    expect(scope.form.password.$dirty).toBe(true); 
    expect(scope.form.newpasswordconfirm.$invalid).toBe(true); 
    expect(scope.form.newpasswordconfirm.$valid).toBe(false); 
    expect(scope.form.newpasswordconfirm.$dirty).toBe(true); 
}); 

it('valid if the values are equal', function() { 
    var passwordInput = dirElement.find('input'); 
    var confirmPasswordInput = dirElement.find('input')[1]; 

    angular.element(passwordInput) 
     .val('testpassword') 
     .triggerHandler('input'); 
    angular.element(confirmPasswordInput) 
     .val('testpassword') 
     .triggerHandler('input'); 

    expect(scope.form.password.$invalid).toBe(false); 
    expect(scope.form.password.$valid).toBe(true); 
    expect(scope.form.password.$dirty).toBe(true); 
    expect(scope.form.newpasswordconfirm.$invalid).toBe(false); 
    expect(scope.form.newpasswordconfirm.$valid).toBe(true); 
    expect(scope.form.newpasswordconfirm.$dirty).toBe(true); 

});