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.

Answer 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');