각도 테스트UI 부트스트랩 모달 인스턴스 컨트롤러
이것은 이것에 대한 후속 질문입니다: Mocking $modal in AngularJS 유닛 테스트
참조된 SO는 매우 유용한 답변이 있는 훌륭한 질문입니다.그러나 이 후 남은 질문은 모듈인스턴스 컨트롤러를 테스트하려면 어떻게 해야 합니까?참조된 SO에서는 호출 컨트롤러가 테스트되지만 모달인스턴스 컨트롤러는 조롱됩니다.후자 역시 테스트를 받아야 하지만, 이것은 매우 까다로운 것으로 판명되었습니다.이유는 다음과 같습니다.
여기 참조된 SO에서 동일한 예를 복사합니다.
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items){
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
테스트 대상 다른 컨트롤러와 마찬가지로 테스트 시 컨트롤러를 직접 인스턴스화해야겠다고 생각했습니다.
beforeEach(inject(function($rootScope) {
scope = $rootScope.$new();
ctrl = $controller('ModalInstanceCtrl', {$scope: scope});
});
이 컨텍스트에서 angular에는 $modal을 주입하는 공급자가 없기 때문에 작동하지 않습니다.예를 들어, UI 모달에 의해 제공되기 때문입니다.
다음으로 플랜 B: $modal.open을 사용하여 컨트롤러를 인스턴스화합니다.이 작업은 예상대로 실행됩니다.
beforeEach(inject(function($rootScope, $modal) {
scope = $rootScope.$new();
modalInstance = $modal.open({
template: '<html></html>',
controller: 'ModalInstanceCtrl',
scope: scope
});
});
(템플릿은 빈 문자열일 수 없습니다.그렇지 않으면 암호화로 실패합니다).
현재 문제는 자원 수집 등을 테스트하는 통상적인 방법인 범위를 알 수 없다는 것입니다.실제 코드에서는 컨트롤러가 리소스 서비스를 호출하여 선택 목록을 채웁니다.이를 테스트하려고 하면 expectGet이 설정되어 컨트롤러가 사용하고 있는 서비스를 만족시킵니다.또한 컨트롤러가 그 결과를 그 범위에 포함시키고 있는지 검증하고 싶습니다.그러나 모달은 모달 인스턴스 컨트롤러의 새로운 스코프를 만들고 있으며(시제품으로 전달한 스코프를 사용), 어떻게 하면 그 스코프의 홀을 얻을 수 있는지 알 수 없습니다.modalInstance 개체에는 컨트롤러에 대한 창이 없습니다.
이것을 "올바른" 방법으로 테스트할 수 있는 방법이 있습니까?
(N.B.: 모달인스턴스 컨트롤러의 파생 스코프를 작성하는 동작은 예기치 않은 것이 아닙니다.이것은 문서화된 동작입니다.테스트 방법에 대한 질문은 어떠한 경우에도 유효합니다.)
모달 대화 상자에서 사용되는 컨트롤러를 직접 인스턴스화하여 테스트합니다(처음 생각했던 것과 동일한 방법).
조롱당한 버전이 없기 때문에$modalInstance모의 오브젝트를 생성하여 컨트롤러에 전달하기만 하면 됩니다.
var modalInstance = { close: function() {}, dismiss: function() {} };
var items = []; // whatever...
beforeEach(inject(function($rootScope) {
scope = $rootScope.$new();
ctrl = $controller('ModalInstanceCtrl', {
$scope: scope,
$modalInstance: modalInstance,
items: items
});
}));
이것으로 컨트롤러의 의존관계가 충족되어 다른 컨트롤러와 마찬가지로 이 컨트롤러를 테스트할 수 있습니다.
를 들어, 저는 '어울리다', '어울리다'를 할 수 요.spyOn(modalInstance, 'close')컨트롤러가 적절한 시간에 대화상자를 닫는다고 단언합니다.
재스민 재스민 사용법을 .$uibModalInstancecreateSpy★★★★
beforeEach(inject(function ($controller, $rootScope) {
$scope = $rootScope.$new();
$uibModalInstance = jasmine.createSpyObj('$uibModalInstance', ['close', 'dismiss']);
ModalCtrl = $controller('ModalCtrl', {
$scope: $scope,
$uibModalInstance: $uibModalInstance,
});
}));
꼭 하지 않고 .spyOn 각 마다 두 , 즉 '두 가지 범위 방법입니다.cancel() ★★★★★★★★★★★★★★★★★」confirm():
it('should let the user dismiss the modal', function () {
expect($scope.cancel).toBeDefined();
$scope.cancel();
expect($uibModalInstance.dismiss).toHaveBeenCalled();
});
it('should let the user confirm the modal', function () {
expect($scope.confirm).toBeDefined();
$scope.confirm();
expect($uibModalInstance.close).toHaveBeenCalled();
});
$uidModalInstance에서도 동일한 문제가 발생하며 다음과 같은 방법으로 해결할 수 있습니다.
var uidModalInstance = { close: function() {}, dismiss: function() {} };
$ctrl = $controller('ModalInstanceCtrl', {
$scope: $scope,
$uibModalInstance: uidModalInstance
});
또는 @yvesmancera에서 설명한 것처럼 jasmine.createSpy 메서드를 대신 사용할 수 있습니다.
var uidModalInstance = jasmine.createSpyObj('$uibModalInstance', ['close', 'dismiss']);
$ctrl = $controller('ModalInstanceCtrl', {
$scope: $scope,
$uibModalInstance: uidModalInstance
});
다음의 순서에 따릅니다.
아래의 give와 같이 ModalInstance에 stub를 정의합니다.
uibModalInstanceStub = { close: sinon.stub(), dismiss: sinon.stub() };컨트롤러를 생성하는 동안 모달 인스턴스 스터브 전달
function createController() { return $controller( ppcConfirmGapModalComponentFullName, { $scope: scopeStub, $uibModalInstance: uibModalInstanceStub }); } });stub 메서드 close(), discept()는 테스트의 일부로 호출됩니다.
it's modal - 확인 액션을 확인합니다.ok() 호출 modalInstance close() 함수, function() { action = 'Ok', scopeStub.item = test항목; createController(); scopeStub.ok();
언급URL : https://stackoverflow.com/questions/24373220/testing-angularui-bootstrap-modal-instance-controller
'programing' 카테고리의 다른 글
| Conditional Formated 셀에서 규칙을 복사하지 않고 Conditional Formating을 복사하려면 어떻게 해야 합니까? (0) | 2023.04.22 |
|---|---|
| 콘솔 사용방법ASP의 WriteLine.디버깅 중 NET(C#)? (0) | 2023.04.22 |
| PHP를 사용하여 현재 페이지의 전체 URL을 가져오는 방법 (0) | 2023.04.02 |
| JSON 객체에서 모든 키를 얻는 방법(Javascript) (0) | 2023.04.02 |
| 클래스에 캐스팅할 수 없습니다. 이름이 없는 로더 'app' 모듈에 있습니다. (0) | 2023.04.02 |