Question

我已经使用angular 1.4.4为我的指令创建了一个单元测试：

angular.module('myApp', [])
    .directive('uiList', [
        function() {
            return {
                scope: {
                    lengthModel: '=uiList'
                },
                link: function(scope, elm, attrs) {


                    scope.$watch('lengthModel', function(newVal) {
                        scope.test=2;
                        console.log('kut');

                    });
                }
            };
        }
    ]);

这是我的测试：

describe('Testing $emit in directive', function() {
    var scope;
    var element;
    var elementScope;

    beforeEach(module('myApp'));

    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope.$new();
        scope.row = 1;
        element = angular.element('<ul id="rows" ui-list="row">');
        $compile(element)(scope);
        scope.$digest();
        elementScope = element.scope();
    }));

    it('should change value', function() {

        scope.$apply(function() {
            scope.row = 1;
        });

        expect(elementScope.test).toEqual(2);


    });

});

当我在webstorm中运行测试时，我收到此错误：

Chrome 48.0.2564 (Mac OS X 10.10.5) Testing $emit in directive should emit FAILED              
        Expected undefined to equal 2.

我到达指令的监视部分，因为当我运行业力时，我可以看到日志（= kut）。我怎样才能通过考试？

Answer 1

您已将您的指令定义为使用隔离范围，因此我认为您应该isolateScope()而不是scope()来获取您的指令在某个元素上创建的隔离范围

elementScope = element.isolateScope();

此外，您正尝试在新创建的作用域上分配/更新row属性，而您应该在包含指令的控制器的父作用域上分配/更新row属性您使用lengthModel为lengthModel: '=uiList'指定了双向绑定。

如此example所示，我建议您获取对隔离范围的引用，更新其中的一些属性，并查看它们是否反映在您之前缓存的原始范围对象中。

it('sample test case', function(){    

    var isolatedScope = element.isolateScope();
    isolatedScope.lengthModel = 10;

    expect(scope.test).toBe(1);
});

为什么在测试时没有设置范围值？

1 个答案: