Question

我有this指令。它获取一个数组并创建一个堆积条。虽然该指令工作正常，但单元测试仍然很糟糕。我试过了：

describe('Stacked bar directive', function(){
        var scope, elem;
        beforeEach(inject(function(_$compile_, _$rootScope_){
        // The injector unwraps the underscores (_) from around the parameter names when matching
        $compile = _$compile_;
        $rootScope = _$rootScope_;

    }))
        beforeEach(function(){
            scope = $rootScope.$new();
            scope.distribution =    [[0.4,'diamonds'],
                                    [0.05,'gold'],
                                    [0.15,'silver'],
                                    [0.4, 'bronze']];
            elem = angular.element('<bars-chart chart-data="distribution"  chart-width="200"></bars-chart>');
            $compile(elem)(scope);

            scope.$digest();

        });

        it('Should display the correct number of bars', function(){
            dump(elem)
            expect(elem.find(".bars").length).to.equal(4)
            //and no other find works either.. 

        });

我得到了：

expected 0 to equal 4

由于编译指令遍布整个.bars类，因此没有意义。

我注意到转储elem并没有向我显示渲染的指令，但是：

{0: <bars-chart chart-data="distribution" chart-width="200" class="ng-scope"></bars-chart>, length: 1}

所以编译指令可能对我不起作用。

我正在使用jquery-chai使测试dom / css更容易一些，但它不会对这个问题产生任何影响（至少我可以说，我禁用它并获得相同的效果）。

有什么想法吗？我很乐意帮助你。

Answer 1

我在angularjs doc中找到了这个小纸条：

find（） - 仅限标记名称
进行查找

也许是你问题的原因......

Answer 2

这是你的整个测试吗？我没有看到任何调用加载包含你的指令的模块。这意味着您的指令根本没有注册，编译时它将不会被调用。

通常你应该这样做：

beforeEach(module('myApp'))

这将确保＆＃39; myApp＆＃39;加载模块，并且在$ compile时可以使用该模块中的指令。

Angular测试指令 - find不能按预期工作（或根本没有？）

2 个答案: