Thiết lập giá trị xem một lĩnh vực đầu vào trong một thử nghiệm đơn vị của một chỉ thị dạng góc

Question

Tôi có một chỉ thị rằng xây dựng một hình thức:

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

Những gì tôi muốn làm là xác nhận thông qua một bài kiểm tra đơn vị đó được thông báo lỗi sẽ hiển thị một số đầu vào. Với góc 1,2 Tôi có thể sửa đổi $ scope.config.item và nó sẽ cập nhật giá trị xem và hiển thị lỗi. Gần như tôi có thể nói, với góc 1.3, nếu mô hình không vượt qua xác nhận giá trị xem không được cập nhật ... vì vậy tôi cần phải sửa đổi giá trị xem để đảm bảo thông báo lỗi hiển thị.

Làm cách nào để có thể truy cập vào đầu vào "configItem" để tôi có thể đặt giá trị xem để đảm bảo rằng thông báo lỗi sẽ hiển thị?

chỉnh sửa để hiển thị đơn vị kiểm tra

Tôi thấy rằng giá trị được đặt đúng, nhưng lỗi vẫn có ng-hide áp dụng cho thẻ. Khi tôi xem trang và thay đổi giá trị đầu vào theo cách thủ công, ng-hide sẽ bị xóa và lỗi sẽ hiển thị nếu tôi nhập vào một cái gì đó lớn hơn 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

Đây là cách tôi đã thử nghiệm đơn vị của mình chỉ thị đầu vào dựa trên (! rất nhiều mã bỏ qua cho rõ ràng) Điểm mấu quan trọng bạn đang sau là:

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

Dưới đây là các đơn vị kiểm tra đầy đủ:

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

Câu trả lời trước đó là đúng nếu bạn đang sử dụng Góc với jQuery nhưng đối với góc mà không jQuery (sử dụng jqlite), bạn có thể sử dụng triggerHandler thay thế (xem 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'); 
});