Question

单元测试Ionic应用程序时遇到问题。我见过类似的问题，但没有一个能解决我的问题。

基本上，这是我的 controller.js

angular.module('starter.controllers')
.controller('myController', function($scope, myService) {

    $scope.test = function() {
        return myService.getTestVariable();
    };

});

这是我的 service.js

angular.module('starter.services')
.factory('myService', function() {

    var self = this;
    self.testVariable = true;

    return {
        getTestVariable : function() {
            return self.testVariable;
        }
    };
});

模块在 app.js 文件中创建：

angular.module('starter', ['starter.controllers', 'starter.services']);           
angular.module('starter.services', []);
angular.module('starter.controllers', []);

现在，我想测试控制器并使用该服务的模拟版本，所以我设置了这样的测试：

describe('Controller: myController', function() {
    var scope, controller, serviceMock;

    beforeEach(function() {
        module('starter');
    });

    beforeEach(function () {
        serviceMock= {
            getTestVariable : function() {return true;}
        };

        module(function ($provide) {
            $provide.value('myService', serviceMock);
        });
    });

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

    it('should work as expected', function(){
        spyOn(serviceMock, 'getTestVariable').and.callThrough();
        scope.test();
        expect(serviceMock.getTestVariable).toHaveBeenCalled();
    });
});

但是，当我尝试运行测试时，会输出错误：

TypeError: 'undefined' is not a function (evaluating 'myService.getTestVariable()')
    at <dir>/controller.js:5

为什么会这样？

Answer 1

我没有在代码中看到任何问题，只是在使用之前进行模块初始化angular.module('starter.services', []); angular.module('starter.controllers', []);。

请参阅以下示例。您提供的相同代码完美无缺。

＆＃13;

angular.module('starter.controllers', []);
angular.module('starter.controllers')
  .controller('myController', function($scope, myService) {

    $scope.test = function() {
      return myService.getTestVariable();
    };

  });

angular.module('starter.services', []);
angular.module('starter.services')
  .factory('myService', function() {

    var self = this;
    self.testVariable = true;

    return {
      getTestVariable: function() {
        return self.testVariable;
      }
    };
  });

angular.module('starter', ['starter.controllers', 'starter.services']);

describe('Controller: myController', function() {
  var scope, controller, serviceMock;

  beforeEach(function() {
    module('starter');
  });

  beforeEach(function() {
    serviceMock = {
      getTestVariable: function() {
        return true;
      }
    };

    module(function($provide) {
      $provide.value('myService', serviceMock);
    });
  });

  beforeEach(inject(function($rootScope, $controller) {
    scope = $rootScope.$new();
    controller = $controller('myController', {
      $scope: scope
    });
  }));

  it('should work as expected', function() {
    spyOn(serviceMock, 'getTestVariable').and.callThrough();
    scope.test();
    expect(serviceMock.getTestVariable).toHaveBeenCalled();
  });
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

＆＃13;

将依赖服务模拟到AngularJS中的控制器单元测试

1 个答案: