Resharper

Question

을 통해 jasmine에서 테스트 한 컨트롤러에서 모듈을 사용할 수있게 해줍니다. Resharper 9.2를 사용하여 PhantomJs를 통해 재스민을 사용하여 컨트롤러를 성공적으로 테스트 할 수 있습니다. 테스트 러너로서.

나는 Resharper를 설치하기 위해 https://blogs.endjin.com/2014/09/unit-testing-angularjs-with-visual-studio-resharper-and-teamcity/의 지시를 따랐다.

이것은 일 : 나는에 따라 모듈을 지정 해달라고하면 내가 컨트롤러에 대한 테스트를 실행할 수 있습니다

컨트롤러 :

var moduleName; 
(function (moduleName) { 
    'use strict'; 
    var testableController = (function() { 
     function testableController($scope) { 
      var _this = this; 
      this.$scope = $scope; 

      $scope.title = "Welcome"; 
     } 
     testableController.className = 'testableController'; 
     return testableController; 
    }()); 
    moduleName.testableController = testableController; 
})(moduleName || (moduleName = {})); 

사양 파일이

///<reference path="~/Scripts/jasmine/jasmine.js"/> 
///<reference path="~/Scripts/jasmine/angular.js"/> 
///<reference path="~/Scripts/jasmine/angular-mocks.js"/> 
///<reference path="~/Scripts/angular-ui/ui-bootstrap.min.js" /> 
///<reference path="~/Scripts/jasmine/controllers.js"/> 
///<reference path="~/Scripts/App/Controllers/testableController.js" /> 
///<reference path="~/Scripts/App/AppJasmine.js" /> 
describe("Controllers", function() { 

    beforeEach(module("moduleName")); 

    describe("Jasmine testableController", function() { 

     var scope, 
      controller; 

     beforeEach(inject(function ($rootScope, $controller) { 
      scope = $rootScope.$new(); 
      controller = $controller('testableController', { $scope: scope }); 
     })); 

     it('should set the page title as "Welcome"', function() { 
      expect(scope.title).toBe('Welcome'); 
     }); 

    }); 
}); 

처럼 보인다

실제 컨트롤러는 각도 ui 부트 스트랩 "ui.bootstrap"을 사용합니다. 나는 다음 샘플받는 변경 그러나 나는 그것을 테스트하려고하면 오류를 부트 스트랩

angular.module('moduleName', ['ui.bootstrap']); 
var moduleName; 
(function (moduleName) { 
    'use strict'; 
    var testableController = (function() { 
     function testableController($scope, $uibModal) { 
      var _this = this; 
      this.$scope = $scope; 
      this.$uibModal = $uibModal; 
      $scope.title = "Welcome"; 
     } 
     testableController.className = 'testableController'; 
     return testableController; 
    }()); 
    moduleName.testableController = testableController; 
})(moduleName || (moduleName = {})); 

에 의존와

Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal 
http://errors.angularjs.org/1.2.24/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal in http://localhost:61032/referenceFile?path=~/webui/trunk/Netvacation.Pegasus.WebUI/Scripts/jasmine/angular.js (line 3802) 

컨트롤러 ** EDIT 1가있는 경우 컨트롤러 * 페이지에서 작동 * 나는

beforeEach(
    function() { 
     module("ui.bootstrap"); 
     module("moduleName"); 
    } 
    ); 

을 시도했지만 같은 오류가 있습니다.

편집 내가 사용이

http://angular-ui.github.io/bootstrap/ 버전 : 1.3.3 - 2016년 5월 22일

AngularJS와의 v1.2.24

편집 내가 테스트 할 그나마 3 $ uibModal,하지만 조롱 거리

Answer 1

나는 두 가지 전략을 알고있다. Angular의 모든 것으로 여러 구문 변형을 가진 서비스를 ck 할 수 있습니다. 컨트롤러 선언에 객체 리터럴을 추가하거나 $ provider를 사용하여 서비스를 만들고이를 $ provider를 사용하여 모듈에 추가 할 수 있습니다.

var currentAuth; 

beforeEach(inject(function ($rootScope, $controller) { 
    scope = $rootScope.$new(); 
    currentAuth = {uid: 1, name: juan, getFriends: function() { ... }}; 

    controller = $controller('TestableCtrl', {'$scope': $scope, 'currentAuth': currentAuth }); 
})); 

에서 : 서비스, 당신이 그냥 같이 할 수있는 샘플 구문 다음, 리터럴 객체와 그 기능을 조롱하고 바로 컨트롤러 생성자의 경우 삽입 할 수 일부 데이터 층 또는 API의 단지 래퍼입니다 이 경우 'currentAuth'는 응용 프로그램에서 현재 기록 된 사용자를 제공하는 서비스입니다.

이는 개체에 정의 된 기능에 서비스를 삽입 할 필요가없는 경우에만 유효합니다. 값 서비스를 만들고이를 모듈에 주입하는 것은 동등한 것입니다. 조롱 된 서비스 내부의 메소드가 직접 서비스를 필요로하는 경우, 팩토리 또는 서비스를 작성하고,이 서비스를 모듈에 추가 한 후 다른 사용자 정의 서비스와 같이 주입해야합니다.이 크롬에서 테스트를 필요하지 않을 것입니다 (이 샘플 내가 각도 약속을 반환하는 $ q를 서비스를 사용하는 새로운 공장을 만드는 오전에

var $controller, $rootScope, $scope, $location, Auth; 

    beforeEach(function(){ 
    module('planner.login'); 

    module(function($provide){ 

     $provide.factory('Auth', function($q){ 
     return { 
      $signInWithEmailAndPassword: function(email, pass) { 
      return $q.reject({error: 'ERROR'}); 
      } 
     }; 
     }); 

     return null; 
    }); 

    }); 

    beforeEach(function(){ 

    inject(function($controller, $rootScope, _Auth_) { 
     $scope = $rootScope.$new(); 
     Auth = _Auth_; 

     $controller("TestableCtrl", { 
     $scope: $scope, 
     Auth: Auth, 
     $stateParams: {} 
     }); 
    }); 

    }); 

: 나는 angularfire 인증 서비스를 모의 사용이 예제를 참조하십시오 PhantomJS에는 Promise 사양이 없습니다). 두 개의 beforeEach가 필요합니다. 하나는 모듈에 공급자를 추가하고 다른 하나는 공급자에 공급자를 주입하는 것입니다.

어떤 서비스를 사용할지 테스트 할 대상에 따라 달라지며 원래 서비스 동작을 모방해야합니다. 귀하의 경우에 uibmodal을 사용하면 아마 어떤 점에서 '.open'을 호출해야하고 스파이가 호출되었지만 그 속성을 가진 객체를 만들고 그 객체 속성을 간첩하면됩니다. 따라서 첫 번째 접근 방식으로 충분해야합니다.

그래서 코드가 같은 것을해야한다 : 나는 그것이 도움이되기를 바랍니다

describe("Controllers", function() { 

    beforeEach(module("moduleName")); 

    describe("Jasmine testableController", function() { 

     var scope, 
      controller, 
      uibModal; 

     beforeEach(inject(function ($rootScope, $controller) { 
      scope = $rootScope.$new(); 
      uibModal = { open: function() { return 'Whatever'; } } 
      controller = $controller('testableController', { $scope: scope, $uibModal: uibModal }); 
     })); 

     it('should set the page title as "Welcome"', function() { 
      expect(scope.title).toBe('Welcome'); 
      // you will probably do something like this at some point to verify 
      // that the modal gets opened on click or following any other action: 
      // var spy = spyOn(uibModal, 'open'); 
      // expect(spy).toHaveBeenCalled(); 
     }); 

    }); 
}); 

을, 뭔가 명확하지 않은 경우 나 또한 AngularJS와 응용 프로그램을 테스트에 대해 배우고, 말해이 함께 할 수 있는지 알고 싶어요하십시오 AngularUI.

Answer 2

첫 번째 문제는 컨트롤러를 모듈에 등록하지 않는다는 것입니다. 따라서 모듈의 종속성을 인식하지 못합니다.

angular.module('modulename').controller('nameofthecontroller', controller); 

그리고 나서 $ uibModal을 모의 할 수는 있지만 필요하지는 않습니다. 그것은이 조롱없이 작동해야합니다;