각도 양식 지시어의 단위 테스트에서 뷰 값 입력 필드 설정

각도 양식 지시어의 단위 테스트에서 뷰 값 입력 필드 설정

양식을 작성하는 지침이 있습니다.

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의 경우, 모델이 검증을 통과하지 못하면 뷰 값이 업데이트되지 않습니다.따라서 오류 메시지가 표시되도록 보기 값을 변경해야 합니다.

"config Item" 입력에 액세스하여 오류 메시지가 표시되도록 보기 값을 설정하려면 어떻게 해야 합니까?

단위 테스트를 표시하도록 편집됨

값은 올바르게 설정되어 있습니다만, 에러는 아직 태그에 ng-hide가 붙어 있습니다.페이지를 표시하고 입력값을 수동으로 변경할 때 10보다 큰 값을 입력하면 ng-hide가 삭제되고 오류가 표시됩니다.

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

입력 기반의 지시사항을 유닛에서 테스트하고 있는 방법은 다음과 같습니다(명확성을 위해 많은 코드가 생략되어 있습니다).당신이 찾고 있는 중요한 행은 다음과 같습니다.

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

jQuery와 함께 Angular를 사용하는 경우 이전 답변이 맞지만 jQuery가 없는 Angular의 경우(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');
});

언급URL : https://stackoverflow.com/questions/26372729/setting-view-value-an-input-field-in-a-unit-test-of-an-angular-form-directive