Test function in angular controller that uses the DOM

Question

we have an AngularJS controller that defines this function:

$scope.testMe = function() {
    return $('#test');
}

Now how can we test it?

Our try was a Karma test like this:

    describe('testMe', function() {
        var scope, element, ctrl;
        var html = '<span id="test"></span>';

        beforeEach(module('theModule'));

        beforeEach(inject(function($rootScope, $compile, $controller) {
            scope = $rootScope.$new();
            ctrl = $controller('theCtrl', {$scope: scope});
            element = $compile(html)(scope);
        }));

        it('finds it', function() {
            var gotcha = scope.testMe();
            expect(gotcha.attr('id')).toBe('test');
        });
    });

...but it doesn't work - the jQuery seems to look in Karma's generated DOM, not in the DOM that we defined in var html...

Answer 1

I don't think that appending the element you created into Karma's DOM will cause any problems. You can do it like this:

$("body").append($compile(html)(scope));
scope.$digest(); 

If you don't want to mess with Karma's DOM perhaps try the html2js preprocessor suggested in this question: Load HTML files with Karma