AngularJS- unit kiểm tra trình điều khiển ẩn danh

Question

Tôi đang cố gắng viết các kiểm tra mã mà tôi không viết sử dụng ui-router.

tôi không thể tìm ra một cách để tiêm một bộ điều khiển vào thử nghiệm của tôi kể từ khi nó được viết inline và ẩn danh trong tình trạng cấu hình trong bộ điều khiển khác:

$scope.deleteSomething = function() { 
    $modal.open(
    templateUrl: '/delete-item-modal.html', 
    controller: ['$scope', '$modalInstance', 'someService', 
     function($scope, $modalInstance, someService) { 
     .... 
     } 
    ], 
    resolve: { 
     ... 
    } 
    }); 
}; 

Nếu bộ điều khiển được đặt tên là cái gì đó như controller: 'TheController' tôi sẽ không có vấn đề tiêm nó bằng cách làm như thế này trong thử nghiệm của tôi:

beforeEach(inject(function($controller) { 
    $controller('TheController', {/*dependancies to be injected*/}); 
})); 

Nhưng kể từ bộ điều khiển là vô danh, tôi không có một xử lý cho nó và không thể tìm ra cách để truy cập vào nó.

Answer 1

Đây là tình huống không thể phủ nhận. Bạn nên kiểm tra đơn vị mã mà bạn đang chuẩn bị sửa đổi, để bảo vệ chống lại hồi quy. Nếu bạn không thể kiểm tra đơn vị nó ở trạng thái hiện tại thì lựa chọn duy nhất của bạn là tích hợp kiểm tra nó. Giải thích cho người yêu cầu công việc:

• Bạn phải viết kiểm tra mã trước khi sửa đổi.
• Thử nghiệm tích hợp sẽ mất nhiều thời gian hơn, nhưng điều duy nhất có thể là do cấu trúc của mã.
• Tái cấu trúc bằng cách trích xuất bộ điều khiển có tên là bản sao chép và ít rủi ro.
• Bộ điều khiển có tên có thể được kiểm tra đơn vị dễ dàng.

Đó là những gì tôi sẽ làm.

Answer 2

Bạn có thể kiểm tra bộ điều khiển ẩn danh. Thay vì chuyển mã định danh bộ điều khiển đến hàm $controller(...), bạn phải truyền mảng bản thân bộ điều khiển.

Để thực hiện việc này, bạn cần phải làm cho mã bộ điều khiển có thể truy cập được vào mã kiểm tra đơn vị của bạn. Điều này thường được thực hiện bằng cách sử dụng công cụ mô đun hóa cho JavaScript (ví dụ: Webpack). Nhưng nó có thể được thực hiện trong cấu hình thử nghiệm của bạn và đặt hàng thẻ <script></script>. Tôi khuyên bạn nên sử dụng một công cụ.

Bất kể, bạn kết thúc với ba tác phẩm:

// delete-item-controller.js 

DeleteItemController = ['$scope', '$modalInstance', 'someService', 
    function($scope, $modalInstance, someService) { 
    .... 
    } 
]; 

---

// state-controller.js 

$scope.deleteSomething = function() { 
    $modal.open(
     templateUrl: '/delete-item-modal.html', 
     controller: DeleteItemController, 
     resolve: { 
      ... 
     } 
    }); 
}; 

---

// delete-item-controller.spec.js 

beforeEach(inject(function($controller) { 
    $controller(DeleteItemController, {/*dependancies to be injected*/}); 
})); 

dụ Alternative, sử dụng mô-đun bộ nạp

Sử dụng Webpack nó sẽ l ook một chút khác nhau ... nhưng nó loại bỏ các đối tượng toàn cầu icky, ngụ ý nắm giữ lên DeleteItemController.

// delete-item-controller.js 

module.exports = ['$scope', '$modalInstance', 'someService', 
    function($scope, $modalInstance, someService) { 
    .... 
    } 
]; 

---

// state-controller.js 

var DeleteItemController = require("./delete-item-controller"); 

$scope.deleteSomething = function() { 
    $modal.open(
     templateUrl: '/delete-item-modal.html', 
     controller: DeleteItemController, 
     resolve: { 
      ... 
     } 
    }); 
}; 

---

// delete-item-controller.spec.js 

var DeleteItemController = require("./delete-item-controller"); 

beforeEach(inject(function($controller) { 
    $controller(DeleteItemController, {/*dependancies to be injected*/}); 
}));