Unit Testing Directives in Angular Js

Question

Im new to angular js testing. We are using Karma/Jasmine to test. I am trying to unit test a directive. Essentially I want to make sure that once it is all compiled that element now contains 'id="tf-' ...... I have verified using dump(element); that in fact i am getting the result im after but my test is not testing it how it should.

in my test file i do this:

var $scope,element;
beforeEach(inject(function($rootScope,$compile) {
    $scope = $rootScope.$new();
    element = engular.element('<div tf-swf></div');
    $compile(element)($scope);
    $scope.$digest();
    dump(element);
})); 

describe('tfSwf directive' , function() {
    it('should place element into DOM' , function() {
        expect(element).toContain('<div id="tf');
    });
});

so here is the issue ... when i run this it fails and i get an error along the lines of:

TypeError: Object [object Object] has no method 'indexOf' at null.<anonymous>

I know it looks wierd that im dumping that elemnt but this is the output:

Object{0: <div tf-swf=""><div id="tf-2403-place"></div></div>, length: 1}

the fact that the inner div exists and has an id that includes a random number is exactly what im after ... i just cant figure out how to find that inner div in my test.

JB Nizet · Accepted Answer · 2014-04-03 16:38:13Z

1

You're trying to test if the element object contains a substring. You should first convert the element object to a string:

expect('' + element).toContain('<div id="tf');

answered Apr 3, 2014 at 16:38

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deslyxia Over a year ago

this works . thank you . For reference if anyone else sumbles on this question i found that angular.element returns a jquery object so i was able to do this: expect(element.html()).toContain('<div id="tf');

JB Nizet Over a year ago

To be exact, it returns a jqLite object, unless jQuery is available, in which case it returns a jQuery object. See docs.angularjs.org/api/ng/function/angular.element

Collectives™ on Stack Overflow

Unit Testing Directives in Angular Js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related