Значение параметра Вид поле ввода в единичном испытании угловой директивы формы

Question

У меня есть директива, которая строит форму:

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', 
    }; 
}); 

То, что я хочу сделать, это проверить с помощью теста блока, что сообщение об ошибке будет появляется с некоторым вводом. С угловым 1.2 я мог бы изменить $ scope.config.item, и он обновил бы значение представления и покажет ошибку.

Как можно сказать, с угловым 1.3, если модель не прошла проверку, значение вида не обновляется ... поэтому мне нужно изменить значение представления, чтобы убедиться, что сообщение об ошибке появилось.

Как я могу получить доступ к входу «configItem», чтобы установить значение представления, чтобы убедиться, что сообщение об ошибке появится?

Edited показать модульное тестирование

Я вижу, что значение установлено правильно, но ошибка все еще имеет нг скрытие приложенное к метке. Когда я просмотр страницы и вручную изменив значение входного сигнала, то нг скрытие будет удалено, и ошибка будет отображаться, если я вхожу в нечто большее, чем 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); 
    }) 

Answer 1

Вот как я был модульное тестирование моего директивы ввода на основе (! Много кода опущены для ясности) важным направлением вы после:

angular.element(dirElementInput).val('Some text').trigger('input'); 

Вот полный тестовый модуль:

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); 
    }); 

Answer 2

предыдущий ответ является правильным, если вы используетеУгловая с JQuery, но и для Угловое без JQuery (с использованием jqlite), вы можете использовать вместо triggerHandler (см here для полного 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'); 
});