如何在茉莉花中模拟 $scope.variables

Question

我有以下测试用例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 文件，其中 company 得到解析

.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。我不知道该怎么做。如果有人可以帮助我解决这个问题，或者有什么方法可以帮助我，我将不胜感激？

Answer 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 standard or Todd Motto's。两者都很好，建议使用该约定。

Answer 2

在我看来 $scope.company 与注入控制器的 company 相同。因此，您只需在要注入模拟的 company 上设置一个 Address，如下所示：

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
});

如何在茉莉花中模拟 $scope.variables

How to mock $scope.variables in jasmine

unit-testing

jasmine

angularjs

karma-runner

karma-jasmine