Jasmine 控制器和模拟服务未注入单元测试

Question

这是我的 test_sp.js 文件：

describe('Controller: MainCtrl', function() {
    var ctrl, mockBaseService;

    beforeEach(function() {

        mockBaseService = {
            cerrorMessages: 'whatever',
            sp: "[{'spName': 'Test'}]",
            // Calls back if errors.
            add: jasmine.createSpyObj('BaseService.add', ['sp']),
            logout: jasmine.createSpy('BaseService.logout'),
            // Calls back if errors.
            fetch: jasmine.createSpyObj('BaseService.fetch', ['selfsp'])
        };

        mockBaseService.add.sp.and.callFake(function(something, cb) {
            cb(); // execute the callback immediately
        });

        mockBaseService.fetch.selfsp.and.callFake(function(something, cb) {
            cb(); // execute the callback immediately
        });

        module('SpPageApp');

        // Let ctrl = MainCtrl and override BaseService in MainCtrl to be
        // the mockBaseService above.
        inject(function($controller) {
            ctrl = $controller('MainCtrl', {
                BaseService: mockBaseService
            });
        });
    });

    it('should have an add function', function() {
        expect(ctrl.add).toBeDefined();
    });
});

这是我的 karma 配置文件的 file 数组：

files: [
  '../angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  '../w.js',
  '../sp.js',
  '../s.js',
  '../base.js',
  'tests/test_sp.js',
],

最后，这是我的sp.js，它有SpPageApp 模块：

angular.module("SpPageApp", ["BaseApp"])
    .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) {

        var self = this;

        BaseService.fetch.selfsp(function() {
            self.sp = BaseService.sp;
            self.cerrorMessages = BaseService.cerrorMessages;
        });

        self.add = function() {
            BaseService.add.sp(self.sp, function() {
                self.cerrorMessages = BaseService.cerrorMessages;
            });
        };

        self.logoutUser = function() {
            BaseService.logout();
        };

    }]);

我使用karma start 来测试代码，我收到一条错误消息：

Chromium 47.0.2526 (Ubuntu 0.0.0) Controller: MainsCtrl should have an add function FAILED
    TypeError: Cannot read property 'and' of undefined
        at Object.<anonymous> (/home/a/Documents/CMS/CMSApp/static/js/karma/tests/test_sp.js:20:45)
    TypeError: Cannot read property 'add' of undefined
        at Object.<anonymous> (/home/a/Documents/CMS/CMSApp/static/js/karma/tests/test_sp.js:36:20)
Chromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.006 secChromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.034 secs / 0.006 secs)

错误说无法读取已定义的属性add，并指向这一行：

expect(ctrl.add).toBeDefined();

并且它无法读取未定义的属性and，并指向这一行：

mockBaseService.fetch.selfsp.and.callFake(function(something, cb) {

Jasmine 怎么会说 ctrl 和 mockBaseService.fetch.selfsp 在代码中定义时都是未定义的？

编辑：对于它的价值，w.js、sp.js 和 s.js（正在加载业力）都有名为 MainCtrl 的控制器，但每个控制器都在它自己的文件和 AngularJS 模块中（以及 @987654340 @，我只加载SpPageApp模块）。

Answer 1

正如我在 cmets 中提到的，您可以改为直接模拟服务并避免使用间谍。此外，您可以告诉 $injector 使用您的 mock 服务而不是真正的实现，从而允许您在解析服务时直接注入 mock，从而替代您的正常实现。

假设你的 BaseService 存在于 SpPageApp 模块中：

mockBaseService = {
    cerrorMessages: 'whatever',
    sp: "[{'spName': 'Test'}]",
    add: function (something, cb) { cb() },
    ...
};

module('BaseApp', function($provide) {
    $provide.value('BaseService', mockBaseService);
});

module('SpPageApp');

inject(function($controller) {
    ctrl = $controller('MainCtrl', {
    });
});

要对其进行测试，如 cmets 中所述，您仍然需要使用 spy 来确保它被成功调用。

it('should have an add function', function() {
    spyOn(mockBaseService, 'add');        
    ctrl.add();
    expect(mockBaseService.add).toHaveBeenCalled();
});