Angularjs 如何测试在指令控制器中执行的范围更改

我有指令

myItem

。我想更改从父项传递到指令的一个属性，所以我在

myItem

中使用

controller

，其中我将值除以60

网站上一切正常

指示 现在，我想编写一个测试，在这个测试中，我可以检查指令中呈现的值是否是从父级传递的值除以60

单元测试

定义([
"棱角",，
“angularMocks”，
'应用程序/指令/mydirective']，函数（angular、mocks、myItemDirective）{
var$httpBackend、$controller、$rootScope、$scope、指令、，
项目={
物业：60
};
描述（‘我的指令’、功能（）{
beforeach（函数（）{
mocks.module（myItemDirective.name）；
mocks.inject（函数（$rootScope_$injector，$window）{
$rootScope=\u$rootScope；
$scope=$rootScope.$new（）；
$compile=$injector.get（“$compile”）；
compileDirective（）；
});
});
之后（函数（）{
$scope.$destroy（）；
元素。移除（）；
}); 
函数compileDirective（）{
元素=角度。元素（“”）；
指令=$compile（元素）（$scope）；
$scope.$digest（）；
directiveScope=element.isolateScope（）；
}
它（'test'，function（）{
//console.log（element.find（'#item holder'）.innerText）
// > 60
expect（element.find（'#item holder'）.innerText）.toEqual（Math.round（item.propert/60））；
//此操作将失败，因为item.property未除以60
});
}); });

问题

---

我无法在单元测试中用值除以60来呈现指令。我可以在控制台中看到，

controller

in指令已被调用，但值未更改

该问题与使用相同对象

项

参考的测试有关

要解决此问题，请执行以下操作：

• 将

  项目

  移至

  之前

• 更改了创建元素的方式
• 更改了获取指令范围的方式
• 使用

  $scope.$apply（）

所以这个测试看起来像：

定义([ "棱角",， “angularMocks”， '应用程序/指令/mydirective']，函数（angular、mocks、myItemDirective）{

var$httpBackend、$controller、$rootScope、$scope、指令、，
项目；
描述（‘我的指令’、功能（）{
beforeach（函数（）{
项目={
物业：60
};
mocks.module（myItemDirective.name）；
mocks.inject（函数（$rootScope_$injector，$window）{
$rootScope=\u$rootScope；
$scope=$rootScope.$new（）；
$compile=$injector.get（“$compile”）；
compileDirective（）；
});
});
之后（函数（）{
$scope.$destroy（）；
元素。移除（）；
}); 
函数compileDirective（）{
$scope.item=项目；
元素=角度。元素（“”）；
指令=$compile（元素）（$scope）；
$scope.$apply（）；
directiveScope=directive.isolateScope（）；
}
它（'test'，function（）{
//console.log（element.find（'#item holder'）.innerText）
// > 60
expect（element.find（'#item holder'）.innerText）.toEqual（Math.round（item.propert/60））；
//此操作将失败，因为item.property未除以60
});
}); });

事实证明，我在模板或模板缓存方面遇到了一些问题。我可以删除整个模板，测试仍然会通过。我认为这是一个时间问题。将该数学值放入$timeout中，然后再次检查。

define(['angular',
        'core',
        'ui-bootstrap', 
    ], 
    function(angular, coreModule, uiBootStrap) {
        'use strict';

        function myItemDirective(APPS_URL) {
            return {
                restrict: 'E',
                replace: 'true',
                scope: {
                    item: '='
                },
                templateUrl: APPS_URL.concat('item.tpl.html'),
                controller: ['$scope', function($scope) {
                    $scope.item.property = Math.round($scope.item.property / 60);
                }]
            };
        }

        return angular.module('apps.myItemModule', [coreModule.name])
                      .directive('myItem', ['APPS_URL', myItemDirective]); });

define([
    'angular',
    'angularMocks',
    'apps/directives/mydirective' ], function (angular, mocks, myItemDirective) {

    var $httpBackend, $controller, $rootScope, $scope, directive,
        item = {
            property: 60
        };

    describe('my directive', function () {

        beforeEach(function() {
            mocks.module(myItemDirective.name);
            mocks.inject(function(_$rootScope_, $injector, $window) {
                $rootScope = _$rootScope_;
                $scope = $rootScope.$new();
                $compile = $injector.get('$compile');
                compileDirective();
            });
        });

        afterEach(function() {
            $scope.$destroy();
            element.remove();
        }); 

        function compileDirective() {
            element = angular.element('<my-item item=' + JSON.stringify(item) + '></my-item>');
            directive = $compile(element)($scope);
            $scope.$digest();
            directiveScope = element.isolateScope();
        }

        it('test', function(){
            // console.log(element.find('#item-holder').innerText)
            // > 60
            expect(element.find('#item-holder').innerText).toEqual(Math.round(item.propert/60));
            // this will fail because item.property was not divided by 60
        });
    }); });

var $httpBackend, $controller, $rootScope, $scope, directive,
    item;


describe('my directive', function () {

    beforeEach(function() {
        item = {
           property: 60
        };

        mocks.module(myItemDirective.name);
        mocks.inject(function(_$rootScope_, $injector, $window) {
            $rootScope = _$rootScope_;
            $scope = $rootScope.$new();
            $compile = $injector.get('$compile');
            compileDirective();
        });
    });

    afterEach(function() {
        $scope.$destroy();
        element.remove();
    }); 

    function compileDirective() {
        $scope.item = item;
        element = angular.element('<my-item item="item"></my-item>');
        directive = $compile(element)($scope);
        $scope.$apply();
        directiveScope = directive.isolateScope();
    }

    it('test', function(){
        // console.log(element.find('#item-holder').innerText)
        // > 60
        expect(element.find('#item-holder').innerText).toEqual(Math.round(item.propert/60));
        // this will fail because item.property was not divided by 60
    });
}); });