Установка значения представления в поле ввода в unit test директивы формы angular
У меня есть директива, которая строит форму:
app.directive('config', function() {
return {
restrict: 'E',
scope: {
data: '='
},
template: '<form name="configForm">' +
'<input type="number" max="10" ng-model="config.item" name="configItem"/>' +
'<div class="form-error" ng-show="configForm.$error.max">Error</div>' +
'</form>',
controller: 'ConfigDirectiveController',
};
});
Что я хочу сделать, это проверить с помощью unit test, что сообщение об ошибке появится с некоторым вводом. С помощью angular 1.2 я мог бы изменить $scope.config.item, и он обновил значение представления и покажет ошибку.
Насколько я могу судить, с angular 1.3, если модель не проходит проверку, значение представления не обновляется... поэтому мне нужно изменить значение представления, чтобы убедиться, что сообщение об ошибке появилось.
Как я могу получить доступ к входу "configItem", чтобы установить значение представления, чтобы убедиться, что сообщение об ошибке будет отображаться?
Отредактировано для отображения unit test
Я вижу, что значение задано правильно, но у ошибки все еще есть привязка ng-hide к тегу. Когда я просматриваю страницу и вручную меняю входное значение, ng-hide будет удаляться, и ошибка будет отображаться, если я вхожу в нечто большее, чем 10.
beforeEach(inject(function($compile, $rootScope) {
element = angular.element('<config data="myData"></config>');
$scope = $rootScope.$new();
$scope.myData = {};
element = $compile(element)($scope);
}));
it('should warn that we have a large number', function() {
var input = element.find('[name="configItem"]')[0];
$scope.$apply(function() {
angular.element(input).val('9000000001');
});
errors = element.find('[class="form-error ng-binding"]');
expect(errors.length).toBe(1);
})
Ответы
Ответ 1
Вот как я был модулем, проверяющим мои директивы на основе ввода (для ясности пропущено много кода!) Важной линией, которую вы используете, является:
angular.element(dirElementInput).val('Some text').trigger('input');
Здесь полный unit test:
it('Should show a red cross when invalid', function () {
dirElement = angular.element('<ng-form name="dummyForm"><my-text-entry ng-model="name"></my-text-entry></ng-form>');
compile(dirElement)(scope);
scope.$digest();
// Find the input control:
var dirElementInput = dirElement.find('input');
// Set some text!
angular.element(dirElementInput).val('Some text').trigger('input');
scope.$apply();
// Check the outcome is what you expect! (in my case, that a specific class has been applied)
expect(dirElementInput.hasClass('ng-valid')).toEqual(true);
});
Ответ 2
Предыдущий ответ верен, если вы используете Angular с jQuery, но для Angular без jQuery (используя jqlite) вместо triggerHandler
можно использовать (см. здесь для полного API)
it('foos to the bar', function() {
el.val('Foo').triggerHandler('input');
// Assuming el is bound to scope.something using ng-model ...
expect(scope.something).toBe('Foo');
});