如何在jasmine中模拟$ scope.variables

时间:2015-06-01 10:03:30

标签: angularjs unit-testing jasmine karma-runner karma-jasmine

我有以下测试用例CompanyCtrlSpec.js

describe('ViewCompanyCtrl', function () {
    var $rootScope, scope, $controller , $q ;

   beforeEach(angular.mock.module('MyApp'));

   beforeEach(inject(function ($rootScope, $controller ) {
        scope = $rootScope.$new();
        createController = function() {
            return $controller('ViewCompanyCtrl', {
            $scope: scope,
            company : {}    
            }); 
        };
    }));

    it('the company type should be equal to an object', function () {
        var controller = new createController();
        //some assertion
    });
});

以下是ViewCompanyCtrl.js文件

angular.module('MyApp').controller('ViewCompanyCtrl',
    function ($scope, companyService, $state, meetingService, company, attachmentService) {
        'use strict';

        $scope.company = company;

        $scope.companyInfo = {};
        $scope.companyInfo['AName'] = [$scope.company.Address.Street, $scope.company.Address.ZipCode + ' ' + $scope.company.Address.City].join(', ');
       //more code


    });

以下是app.routes.js文件,其中公司正在解决

.state('company', {
            abstract: true,
            url: '/company/:companyId',
            resolve: {
                company: function($q, $stateParams, companyService){
                    var deferred = $q.defer();

                    companyService
                        .getCompany($stateParams.companyId)
                        .error(function(data, status, headers){
                            //more code
                        })
                        .success(function(data){
                            deferred.resolve(data);
                        });

                    return deferred.promise;
                }
            },

我的问题是我收到以下错误

        TypeError: $scope.company.Address is undefined in C:/Users/MyApp/WebApiRole/app/compan
y/ViewCompanyCtrl.js (line 8)
        @C:/Users/MyApp/WebApiRole/app/company/ViewCompanyCtrl.js:8:42

我猜这是因为我没有在我的测试用例中模拟 scope.company.Address 。我不知道该怎么做。感谢它,如果任何人可以帮助我,或任何方法来做到这一点?

2 个答案:

答案 0 :(得分:4)

我认为$scope.company与注入控制器的company相同。因此,您只需要在注入模拟的Address上设置company,就像这样:

beforeEach(inject(function ($rootScope, $controller ) {
    scope = $rootScope.$new();
    createController = function() {
        return $controller('ViewCompanyCtrl', {
            $scope: scope,
            company : {
                Address: {/* address data goes here */}
            }
        }); 
    };
}));

如果您希望每项测试的公司数据不同,只需将其传递到createController()函数:

beforeEach(inject(function ($rootScope, $controller ) {
    scope = $rootScope.$new();
    createController = function(company) {
        return $controller('ViewCompanyCtrl', {
            $scope: scope,
            company : company
        }); 
    };
}));

it('the company type should be equal to an object', function () {
    var company = {Address: {/* address data goes here */}};
    var controller = new createController(company);
    //some assertion
});

答案 1 :(得分:1)

尝试将控制器添加到路线的定义中。控制器不像其他服务那样是单例。它通常与状态或视图相关联。

.state('company', {
        abstract: true,
        url: '/company/:companyId',
        controller: 'ViewCompanyCtrl'
        resolve: {
            company: function($q, $stateParams, companyService){
                var deferred = $q.defer();

                companyService
                    .getCompany($stateParams.companyId)
                    .error(function(data, status, headers){
                        //more code
                    })
                    .success(function(data){
                        deferred.resolve(data);
                    });

                return deferred.promise;
            }
        },

更好的是,我会使用controller As约定而不是在控制器中使用范围。然后你的控制器将来到范围。 除此之外,我强烈建议您查看John Papa's coding standardTodd Motto's。两者都很好,并建议使用该惯例。