Question

控制器：

angular.module('ngApp', [
    'templates-app',
    'templates-common',
    'ngApp.home',
    'ui.router'
])

.config(function myAppConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
})

.run(function run() {})

.controller('AppCtrl', function AppCtrl($scope) {
    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        if (angular.isDefined(toState.data.pageTitle)) {
            $scope.pageTitle = toState.data.pageTitle + ' | App';
        }
    });
});

测试：

describe('AppCtrl', function() {

    beforeEach(module('ngApp'));

    var $controller;

    beforeEach(inject(function(_$controller_) {
        $controller = _$controller_;
    }));

    describe('$scope.pageTitle', function() {
        it('should set pageTitle', inject(function() {
            var $scope = {};
            var AppCtrl = $controller('AppCtrl', { $scope: $scope });
            expect(true).toBe(true);
        }));
    });
});

我现在没有测试任何东西，只是加载控制器。然而，这失败了

Chrome 41.0.2272 (Mac OS X 10.10.2) AppCtrl $scope.pageTitle should set pageTitle FAILED
    TypeError: undefined is not a function
        at new AppCtrl (/src/app/app.js:15:9)
        at invoke (/vendor/angular/angular.js:4203:17)
        at Object.instantiate (/vendor/angular/angular.js:4211:27)
        at /vendor/angular/angular.js:8501:28
        at /vendor/angular-mocks/angular-mocks.js:1878:12
        at Object.<anonymous> (/src/app/app.spec.js:14:19)
        at Object.invoke (/vendor/angular/angular.js:4203:17)
        at Object.workFn (/vendor/angular-mocks/angular-mocks.js:2436:20)
    Error: Declaration Location
        at window.inject.angular.mock.inject (/vendor/angular-mocks/angular-mocks.js:2407:25)
        at Suite.<anonymous> (/src/app/app.spec.js:12:30)
        at Suite.<anonymous> (/src/app/app.spec.js:11:2)
        at /src/app/app.spec.js:1:1

我的测试设置有什么问题吗？

实际测试：

describe('$scope.pageTitle', function() {
    it('should be defiend after stateChange', inject(function() {
        var $scope = {};
        var AppCtrl = createController('AppCtrl');
        scope.$broadcast('$stateChangeSuccess', {
            data: {
                pageTitle: 'bar'
            }
        });
        expect(scope.pageTitle).toBeDefined();
    }));
});

Answer 1

您需要从$rootScope创建范围并将其注入：

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

通过这种方式，您可以使用createController功能并使用：

var AppCtrl = createController('AppCtrl');

拥有控制器。

这是一个有效的jsfiddle： http://jsfiddle.net/Lbs6sk0k/2/

编辑：$scope在哪里为空？如果我在这里放console.log：

.controller('AppCtrl', function AppCtrl($scope) {
    console.log($scope);

我可以看到：

enter image description here

编辑2 ：

将范围设置为全局变量：

describe('AppCtrl', function () {

    beforeEach(module('ngApp'));
    var $controller;
    var scope;

然后，在您的测试用例中，您可以使用它：

it('should set pageTitle', inject(function () {
    var $scope = scope;

使用新的测试用例更新了jsfiddle：http://jsfiddle.net/Lbs6sk0k/3/

Answer 2

我认为问题在于您注入控制器的范围和$ scope。$ on ....试试这个：

describe('AppCtrl', function() {

beforeEach(module('ngApp'));

var $controller, $scope;

beforeEach(inject(function(_$controller_, _$rootScope_) {
    $controller = _$controller_;
    $rootScope = _$rootScope_.$new();
}));

describe('$scope.pageTitle', function() {
    it('should set pageTitle', inject(function() {            
        var AppCtrl = $controller('AppCtrl', { $scope: $scope });
        expect(true).toBe(true);
    }));
});
});

角度，基本测试不起作用

2 个答案: