離子應用的Karma/Jasmine測試不注入控制器

Question

我正在使用Karma和Jasmine爲離子應用添加一些測試。在這一刻，我正在嘗試爲角度登錄控制器進行測試。然而，它似乎沒有執行創建控制器的注入句子，並且嘲笑所有的外部依賴。這裏是我使用的代碼：

login.controller.js

(function() { 
    var app = angular.module("myApp"); 

    app.controller("LoginController", function($translate, $state, $ionicPopup, $localStorage, sessionService, userService) { 
    var vm = this; 

    vm.email = null; 
    vm.password = null; 

    vm.login = function() { 
     $localStorage.email = vm.email; 
     $localStorage.password = vm.password; 

     sessionService.login().then(
     function(data) { 
      if (userService.isAuthenticated()) { 
      // User is logged, go to the next state 
      $state.go("next_state"); 
      } else { 
      // User is not logged (invalid credentials), show an alert message 
      var alertPopup = $ionicPopup.alert({ 
       title: $translate.instant("LOGIN_FAIL_TITLE"), 
       template: $translate.instant("LOGIN_FAIL_MESSAGE") 
      }); 
      } 
     } 
    ); 
    } 
    }); 
})(); 

login.controller.tests.js

describe("LoginController", function() { 
    var controller, 
     deferredLogin, 
     translateMock, 
     stateMock, 
     ionicPopupMock, 
     localStorageMock, 
     sessionServiceMock, 
     userServiceMock; 

    beforeEach(module("myApp")); 

    beforeEach(module(function($provide, $urlRouterProvider) { 
    $provide.value("$ionicTemplateCache", function() {}); 
    $urlRouterProvider.deferIntercept(); 
    })); 

    beforeEach(inject(function($controller, $q) { 
    deferredLogin = $q.defer(); 

    sessionServiceMock = { 
     login: jasmine.createSpy("login spy") 
        .and.returnValue(deferredLogin.promise) 
    }; 

    translateMock = jasmine.createSpyObj("$translate spy", ["instant"]); 

    stateMock = jasmine.createSpyObj("$state spy", ["go"]); 

    ionicPopupMock = jasmine.createSpyObj("$ionicPopup spy", ["alert"]); 

    localStorageMock = jasmine.createSpyObj("$localStorage spy", ["getItem"]); 

    userServiceMock = jasmine.createSpyObj("userService spy", ["isAuthenticated"]); 

    controller = $controller("LoginController", { 
     "$translate": translateMock, 
     "$state": stateMock, 
     "$ionicPopup": ionicPopupMock, 
     "$localStorage": localStorageMock, 
     "sessionService": sessionServiceMock, 
     "userService": userServiceMock 
    }); 
    })); 

    describe("#login", function() { 
    beforeEach(inject(function(_$rootScope_) { 
     $rootScope = _$rootScope_; 
     controller.email = "user@email.com"; 
     controller.password = "foobarfoo"; 
     controller.login(); 
    })); 

    it("should call login on sessionService", function() { 
     expect(sessionServiceMock.login).toHaveBeenCalledWith("user@email.com", "foobarfoo"); 
    }); 

    describe("when the login is executed", function() { 
     it("if successful, should change state to next_state", function() { 
     deferredLogin.resolve(); 
     $rootScope.$digest(); 
     expect(stateMock.go).toHaveBeenCalledWith("next_state"); 
     }); 

     it("if unsuccessful, should show a popup", function() { 
     deferredLogin.reject(); 
     $rootScope.$digest(); 
     expect(ionicPopupMock.alert).toHaveBeenCalled(); 
     }); 
    }); 
    }); 
}); 

我一直在尋找在所有地方嘗試我找到了不同的解決方案，但我始終獲得相同的結果：

... 
PhantomJS 2.1.1 (Linux 0.0.0) LoginController #login should call login on sessionService FAILED 
    forEach@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:13691:24 
    loadModules@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17878:12 
    createInjector@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17800:30 
    workFn@/home/user/NSS/my-app/www/lib/angular-mocks/angular-mocks.js:2922:60 
    loaded@http://localhost:9876/context.js:151:17 
    /home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17918:53 
    forEach@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:13691:24 
    loadModules@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17878:12 
    createInjector@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17800:30 
    workFn@/home/user/NSS/my-app/www/lib/angular-mocks/angular-mocks.js:2922:60 
    loaded@http://localhost:9876/context.js:151:17 
    /home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17918:53 
    TypeError: undefined is not an object (evaluating 'sessionServiceMock.login') in unit-tests/controllers/login.controller.tests.js (line 63) 
    unit-tests/controllers/login.controller.tests.js:63:32 
    loaded@http://localhost:9876/context.js:151:17 
PhantomJS 2.1.1 (Linux 0.0.0) LoginController #login when the login is executed if successful, should change state to capture_image FAILED 
    forEach@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:13691:24 
    loadModules@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17878:12 
    createInjector@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17800:30 
    workFn@/home/user/NSS/my-app/www/lib/angular-mocks/angular-mocks.js:2922:60 
    loaded@http://localhost:9876/context.js:151:17 
    /home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17918:53 
    forEach@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:13691:24 
    loadModules@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17878:12 
    createInjector@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17800:30 
    workFn@/home/user/NSS/my-app/www/lib/angular-mocks/angular-mocks.js:2922:60 
    loaded@http://localhost:9876/context.js:151:17 
    /home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17918:53 
    TypeError: undefined is not an object (evaluating 'deferredLogin.resolve') in unit-tests/controllers/login.controller.tests.js (line 68) 
    unit-tests/controllers/login.controller.tests.js:68:22 
    loaded@http://localhost:9876/context.js:151:17 
PhantomJS 2.1.1 (Linux 0.0.0) LoginController #login when the login is executed if unsuccessful, should show a popup FAILED 
    forEach@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:13691:24 
    loadModules@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17878:12 
    createInjector@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17800:30 
    workFn@/home/user/NSS/my-app/www/lib/angular-mocks/angular-mocks.js:2922:60 
    loaded@http://localhost:9876/context.js:151:17 
    /home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17918:53 
    forEach@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:13691:24 
    loadModules@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17878:12 
    createInjector@/home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17800:30 
    workFn@/home/user/NSS/my-app/www/lib/angular-mocks/angular-mocks.js:2922:60 
    loaded@http://localhost:9876/context.js:151:17 
    /home/user/NSS/my-app/www/lib/ionic/js/ionic.bundle.js:17918:53 
    TypeError: undefined is not an object (evaluating 'deferredLogin.reject') in unit-tests/controllers/login.controller.tests.js (line 74) 
    unit-tests/controllers/login.controller.tests.js:74:22 
    loaded@http://localhost:9876/context.js:151:17 
... 

我無法理解我做錯了什麼。提前致謝。

UPDATE：

馬修格林說，我已經改變了測試的編寫方式。現在，他們遵循他的建議，我也加入了一些更注射所必需的：

describe("LoginController", function() { 
    var controller, 
     stateMock, 
     ionicPopupMock, 
     localStorageMock, 
     sessionServiceMockPromise, 
     sessionServiceMock; 

    // Load the application module 
    beforeEach(module("myApp")); 

    // Avoid trying to load all templates of the application 
    beforeEach(module(function($provide, $urlRouterProvider) { 
    $provide.value("$ionicTemplateCache", function() {}); 
    $urlRouterProvider.deferIntercept(); 
    })); 

    // Avoid asynchronous loader of the translations (problem with the angular-translate-design) 
    beforeEach(module(function($provide, $translateProvider) { 
    $provide.factory("customLoader", function($q) { 
     return function() { 
     var deferred = $q.defer(); 
     deferred.resolve({}); 
     return deferred.promise; 
     }; 
    }); 

    $translateProvider.useLoader("customLoader"); 
    })); 

    // Instanciate and initialize the controller and mocks 
    beforeEach(inject(function($controller, $q) { 
    sessionServiceMockPromise = $q.defer(); 
    sessionServiceMock = jasmine.createSpyObj("sessionServiceMock", ["login"]); 
    sessionServiceMock.login.and.callFake(function() { 
     return sessionServiceMockPromise.promise; 
    }); 

    stateMock = jasmine.createSpyObj("$state spy", ["go"]); 

    ionicPopupMock = jasmine.createSpyObj("$ionicPopup spy", ["alert"]); 

    localStorageMock = jasmine.createSpyObj("$localStorage spy", ["getItem"]); 

    controller = $controller("LoginController", { 
     "$state": stateMock, 
     "$ionicPopup": ionicPopupMock, 
     "$localStorage": localStorageMock, 
     "sessionService": sessionServiceMock 
    }); 
    })); 

    describe("#login", function() { 
    beforeEach(inject(function(_$rootScope_) { 
     $rootScope = _$rootScope_; 
     controller.login(); 
     sessionServiceMockPromise.resolve(); 
    })); 

    it("should call login on sessionService", function() { 
     expect(sessionServiceMock.login).toHaveBeenCalledWith(); 
    }); 

    describe("when the login is executed", function() { 
     it("if successfull, should change state to capture_image", inject(function(userService) { 
     spyOn(userService, "isAuthenticated").and.callFake(function() { return true; }); 
     $rootScope.$digest(); 
     expect(stateMock.go).toHaveBeenCalledWith("nextState"); 
     })); 

     it("should show a popup", inject(function(userService) { 
     spyOn(userService, "isAuthenticated").and.callFake(function() { return false; }); 
     $rootScope.$digest(); 
     expect(ionicPopupMock.alert).toHaveBeenCalled(); 
     })); 
    }); 
    }); 
}); 

Answer 1

它看起來像你的sessionService.login()是應該返回一個承諾的功能。情況就是這樣，我看到你有什麼問題。

首先，我不知道你爲什麼選擇設置與其他服務不同的服務。這很可能是你的一些問題。如果你把它設置得和其他的一樣，它會看起來像這樣。

var sessionServiceMockPromise = $q.defer(); 
sessionServiceMock = jasmine.createSpyObj('sessionServiceMock', ['login']); 
sessionServiceMock.login.and.callFake(function() { 
    return sessionServiceMockPromise.promise; 
}); 

在此我們確定登錄是返回承諾的函數。使用sessionServiceMockPromise，您現在可以在測試中致電sessionServiceMockPromise.resolve([data])（或reject()）查看您的承諾結果。

其次，您的測試表示它期望用兩個變量調用登錄名。沒有你的代碼中的服務或測試的地方，我看到這是接受變量的函數。一個更好的測試可能只是它被調用，或者狀態被設置爲你所期望的。