Angular testing a directive - find doesn't work as expected (or at all?)

Question

I have this directive. it gets an array and creates a stacked bar. while the directive works fine, the unittesting failes miserably. I tried:

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.. 

        });

And I get:

expected 0 to equal 4

Since the compiled directive has a .bars class all over the place, this doesn't make sense.

I noticed that dumping the elem doesn't show me the rendered Directive but:

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

so maybe something with compiling the directive doesn't work for me.

I'm using jquery-chai to make testing dom/css a little easier but It doesn't suppose to have any effect on this problem (at least as I can tell, I disabled it and got the same effect).

Any ideas? I'll be glad to help with this

score 0 · Answer 1 · answered Dec 02 '13 at 12:07

0

I found this small note in angularjs doc :

find() - Limited to lookups by tag name

Maybe the cause of your issue...

answered Dec 02 '13 at 12:07

ben75

29,217
10
88
134

True enough but not the issue, first because I include jquery in the tests, before angular), either with jquery chai or directly. also because then I could atleast do ```expect(elem.text()).to.contain('gold') and get something. – alonisser Dec 02 '13 at 12:41

score 0 · Accepted Answer · answered Dec 03 '13 at 05:55

Is this your entire test? I don't see any calls to load the module containing your directive. This means your directive is not being registered at all and when you compile it will not be called.

Typically you should do something like:

beforeEach(module('myApp'))

This will ensure that the 'myApp' module is loaded and your directives in that module are available when you $compile.

Angular testing a directive - find doesn't work as expected (or at all?)

2 Answers2