如何测试指令控制器中执行的范围的变化

Question

我有指令myItem。我想更改从父项传递到指令的一个属性，因此我在controller中使用myItem，其中我将值除以60。

网站上的一切正常。

指令

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

现在我想写一个测试，我可以检查指令中的渲染值是从父级传递的值除以60.

单元测试

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

问题

我无法在单元测试中使用值除以60来呈现指令。我可以在控制台中看到已调用指令中的controller但该值未更改。

Answer 1

问题与使用对象item的相同引用的测试有关。

解决此问题：

• 将item移至beforeEach
• 改变了创建元素的方式
• 改变了获取指令范围的方式
• 使用$scope.$apply()

所以测试看起来像：

定义（[     “角度”，     'angularMocks'，     'apps / directives / mydirective']，函数（angular，mocks，myItemDirective）{

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