AngularJS: Làm thế nào để giả lập một FormController được tiêm trong phạm vi?

Question

Tôi có một số logic xác nhận xảy ra bên trong một bộ điều khiển và tôi muốn đơn vị kiểm tra logic này.

Vấn đề là tôi không biết cách giả lập trình điều khiển biểu mẫu được tự động đưa vào phạm vi.

Bất kỳ ý tưởng nào?

Answer 1

AFAIK, bạn có thể thử 2 cách tiếp cận:

1. sử dụng dịch vụ $compile, và biên dịch mẫu của bạn với thích hợp $scope (đừng quên đồng tất cả $scope.$apply() sau khi biên dịch). Html2js của Grunt là một công cụ tuyệt vời để xử lý trước các mẫu của bạn và thêm chúng vào $ templateCache của góc cạnh trước khi thực hiện kiểm tra. Xem trang chủ của dự án tại https://npmjs.org/package/grunt-html2js

2. sử dụng dịch vụ $controller và tự chèn FormController vào $scope. Nhưng bạn cũng sẽ phải tiêm tất cả NgModelControllers mà bạn thường có trong mẫu của bạn.

Answer 2

Làm thế nào về vấn đề này cho chế giễu một hình thức AngularJS và sau đó thử nghiệm có dạng $ bẩn và $ trạng thái hợp lệ:

// example usage of html form element 
<form data-ng-submit="update()" name="optionsForm" novalidate="novalidate"> 

// example usage html button element 
<button type="submit" ng-disabled="!canSave()">Update Options</button> 

// Controller check if form is valid 
$scope.canSave = function() { 
    return $scope.rideshareForm.$dirty && $scope.rideshareForm.$valid; 
}; 

// Unit Test 

// scope is injected in a beforeEach hook 
it('$scope.canSave returns true if an options form is valid or false if non-valid', function() { 

// mock angular form 
scope.optionsForm = {}; 

// valid form 
scope.optionsForm.$dirty = true; 
scope.optionsForm.$valid = true; 
expect(scope.canSave()).toBe(true); 

// non-valid form 
scope.rideshareForm.$dirty = true; 
scope.rideshareForm.$valid = false; 
expect(scope.canSave()).toBe(false); 

});