AngularJS单元测试依赖项

Question

我需要在AngularJS项目中进行单元测试，我以前从未做过，而且第一步遇到了问题。

包装方式：

"jasmine-core": "^2.8.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.0"

控制器（作为语法）：

angular.module('app').controller('LoginController', ['models.store', function(MODELS) {
    var vm = this;
    vm.account = new MODELS.Account('', '');
}]);

所以我需要为此控制器属性编写一个测试- 帐户

测试：

describe('LoginTest', function() {
    var MODELS;

    beforeEach(module('app'));

    beforeEach(inject(function($injector) {
        inject(function() {
            MODELS = jasmine.createSpy('models.store');
        });
    }));

    beforeEach(inject(function($controller) {
        scope = $controller('LoginController', {'models.store': MODELS});
    }));

    it('Account model values should be empty', function() {
        expect(scope.account.login).toBe('');
    });
});

我得到“ TypeError：MODELS.Account不是构造函数”

注入工厂代码：

angular.module('app.models').factory('models.store', function() {
    return {
        Account: function() {
            this.login = login || '';
            this.password = password || '';
        }
    }
});

我做错了什么？ 我应该怎么做才能使测试正确？

Answer 1

第一次迭代看起来像这样：

 angular.module('app', ['app.models']) angular.module('app').controller('LoginController', ['store', function(MODELS) { var vm = this; vm.account = new MODELS.Account('', ''); }]); angular.module('app.models', []) angular.module('app.models').factory('store', function() { return { Account: function(login, password) { this.login = login || ''; this.password = password || ''; } } }); describe('LoginTest', function() { beforeEach(module('app')); beforeEach(inject(function($controller, store) { scope = $controller('LoginController', { 'store': store }); })); it('Account model values should be empty', function() { expect(scope.account.login).toBe(''); }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine-html.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/boot.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-mocks.js"></script> 

另一种方法可以描述为

 angular.module('app', ['app.models']) angular.module('app').controller('LoginController', ['store', function(MODELS) { var vm = this; vm.account = new MODELS.Account('', ''); }]); angular.module('app.models', []) describe('LoginTest', function() { var stubStore beforeEach(module('app')); beforeEach(function() { stubStore = { Account: jasmine.createSpy() } }) beforeEach(function() { stubStore.Account }) beforeEach(inject(function($controller) { scope = $controller('LoginController', { 'store': stubStore }); })); it('Account model values should be empty', function() { expect(stubStore.Account).toHaveBeenCalledWith('', '') }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine-html.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/boot.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-mocks.js"></script> 

Answer 2

谢谢你们！

唯一成功的方法是：

beforeEach(function() {
    var scope, MODELS;

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

    beforeEach(inject(function($injector) {
        MODELS = $injector.get('models.store');
    }));

    beforeEach(inject(function($controller) {
        scope = $controller('LoginController', {});
    }));

    it('Expect Account model Login is empty', function () {
        expect(scope.account.login).toBe('');
    });
});