2017-03-29 6 views
0

POST-EDIT : 방금 누군가에게 더 나은 해결책이 있지만 문제를 해결했습니다. 나는 곧 내 솔루션을 게시 할 것이지만 누군가가 올바른 해결책을 가지고 있다면 나는 그들의 대답을 받아 들일 것이다.Angular 1.5.x/Jasmine - 호출 된 것으로 예상되는 스파이이지만 호출되지 않았습니다.

내 응용 프로그램을 1.4에서 1.5로 마이그레이션하고 모든 컨트롤러 및 지시문을 구성 요소로 변경합니다. 이제는 한 번 작동하지 않고 몇 가지 지침을 원한다는 테스트가 있습니다.

나는 서비스 메소드에 대해 간첩을 세우려고하고 있으며 단위 테스트에 따르면 호출하지 않습니다. 응용 프로그램이 실행될 때 API 호출이 이루어지기 때문에 그렇지 않습니다. 여기에 내가받은 메시지는 다음과 같습니다

enter image description here

이 내 구성 요소 파일 : 여기

(function(){ 
    "use strict"; 

    angular.module("app").component("profileComponent", { 
     templateUrl: "/templates/profile.component.html", 
     controllerAs: "vm", 
     bindings: { 
      resolvedUser: "<" 
     }, 
     controller: function(ImageService, $state){ 
      const vm = this; 
      const resolvedUser = this.resolvedUser; 

      resolvedUser ? vm.user = resolvedUser : $state.go("404"); 

      vm.$onInit = function(){ 
       ImageService.findByName(vm.user.pokemon.name) 
        .then(function(res){ 
         vm.user.pokemon.id = res.id; 
         vm.user.pokemon.image = res.sprites.front_default; 
         vm.user.pokemon.type = res.types[0].type.name; 
        }) 
        .catch(function(res){ 
         vm.user.pokemon.image = "https://www.native-instruments.com/forum/data/avatars/m/328/328352.jpg?1439377390"; 
        }); 
      } 

     } 
    }); 
})(); 

그리고 내 사양 파일에서 관련 부분이다. 앞서 언급 한 바와 같이

describe("profile.component", function(){ 
    var profileComponent, ImageService, $q, $httpBackend, $state, resolvedUser, jazzSpy, IS, 
     API = "http://pokeapi.co/api/v2/pokemon/"; 

    var RESPONSE_SUCCESS = // very large variable I've omitted for brevity. 

beforeEach(angular.mock.module("app")); 
    beforeEach(angular.mock.module("ui.router")); 

    beforeEach(inject(function(_ImageService_, _$q_, _$httpBackend_, _$state_, _$rootScope_){ 
     ImageService = _ImageService_; 
     $q = _$q_; 
     $httpBackend = _$httpBackend_; 
     $state = _$state_; 
     $rootScope = _$rootScope_; 
     $rootScope.$new(); 
    })); 

    describe("profileComponent with a valid user and valid Pokemon", function(){ 

     beforeEach(inject(function(_$componentController_){ 
      singleUser = { id: 2, name: "Erlich Bachman", email: "[email protected]", phone: 4155552233, pokemon: { isPresent: true, name: "celebi"}, icon: { isPresent: false, name: null} }; 
      let bindings = {resolvedUser: singleUser, ImageService: ImageService, $state: $state }; 
      profileComponent = _$componentController_("profileComponent", { $scope: {} }, bindings); 
      profileComponent.$onInit(); 
     })); 

      beforeEach(function(){ 
       spyOn(ImageService, "findByName").and.callThrough(); 
      }); 

      it("should set state to resolvedUser", function(){ 
       expect(profileComponent.user).toEqual(singleUser); 
      }); 

      it("should expect ImageService to be defined", function(){ 
       expect(ImageService.findByName).toBeDefined(); 
      }); 

      it("should call ImageService.findByName() and return Pokemon icon", function(){ 

        expect(profileComponent.user.pokemon.name).toEqual("celebi"); 

       $httpBackend.whenGET(API + "celebi").respond(200, $q.when(RESPONSE_SUCCESS)); 
       $httpBackend.flush(); 

       // This is where the test fails 
        expect(ImageService.findByName).toHaveBeenCalledWith("celebi"); 
      }); 
     }); 
+1

나는 테스트가 실패 코멘트를했습니다. $ onInit은 spyOn보다 먼저 호출됩니다. – estus

+0

그리고 올바른 대답을 얻었습니다! –

답변

0

는 $의 onInit이 spyOn 후에 호출 할 필요가 : 당신은 경쟁 조건을 가지고

beforeEach(function(){ 
    spyOn(ImageService, "findByName").and.callThrough(); 
    profileComponent.$onInit(); 
});