CODEWITHSUNDEEP
angularjsjasminejqlite
ptf
ptf

Reputation: 3370

Angular jqLite: .find() won't work - does not select tags

I have this unit spec in jasmine:

define(['common/components/directives/directives', 'angular'], function (directives, ng) {

describe('The directives module', function () {

    beforeEach(function () {
        ng.mock.module('directives');
    });

    describe('The tabset directive', function () {
        var scope;
        var elm;

        beforeEach(inject(function($rootScope, $compile) {
            elm =   ng.element('<tabset>' +
                            '<tab data-route="/home" data-title="Home"></tab>' +
                            '<tab data-route="/tournaments" data-title="Tournaments"></tab>' +
                            '<tab data-route="/about" data-title="About"></tab>' +
                        '</tabset>');

            var scope = $rootScope;
            $compile(elm)(scope);
            scope.$digest();
        }));

        it ('should create clickable titles', function () {
            var titles = elm.find('ul li a');

            expect(titles.length).toBe(3);
            expect(titles.eq(0).text()).toBe('Home');
            expect(titles.eq(0).text()).toBe('Tournaments');
            expect(titles.eq(0).text()).toBe('About');
        });

        //it ('should change active tab when clicked', function () {

        //});

    });
});

});

In the test it ('should create clickable titles', ... I try to use .find(), but the selection comes out empty: LOG: Object{}. This is what elm contains in the test:

LOG: Object{0: 
<ul class="nav nav-tabs ng-scope" ng-transclude="">
    <li data-ng-class="{active: active}" data-route="/home" data-title="Home" class="ng-scope">
        <a href="#/home" class="ng-binding">Home</a>                                       
    </li>
    <li data-ng-class="{active: active}" data-route="/tournaments" data-title="Tournaments" class="ng-scope">
        <a href="#/tournaments" class="ng-binding">Tournaments</a>                                 
    </li>
    <li data-ng-class="{active: active}" data-route="/about" data-title="About" class="ng-scope">                                           
        <a href="#/about" class="ng-binding">About</a>                                     
    </li>
</ul>, length: 1}

Upvotes: 2

Views: 2646

Answers (2)

lort
lort

Reputation: 1457

The el.find() tries to find an element in set of el's children, their children etc. You're trying to find ul in element which is ul itself and contains only li elements. Also, you cannot use child selectors in find. Use chained el.find('li').find('a') instead.

Upvotes: 2

Ivan Chernykh
Ivan Chernykh

Reputation: 42176

You can't use .find method this way. Use it like:

elm.find('a');

Or:

elm.find('ul').find('li').find('a');

Take a look: http://jsfiddle.net/Khp4R/2/

Upvotes: 2

Related Questions