How to add a div to the DOM in AngularJS unit tests?

unit-testing angularjs directive
Maarten picture Maarten · Aug 1, 2013 · Viewed 9k times · Source

I'm using the following code in a directive to place a tool tip

var bodyoffset = document.querySelector(".smallcontainer-content").getBoundingClientRect();
var width = elm.width();
if(bodyoffset != undefined){
    var tooltipDiv = document.querySelector(".tooltip");
    angular.element(tooltipDiv).css("top", offset.top-bodyoffset.top+"px");
    angular.element(tooltipDiv).css("left", offset.left-bodyoffset.left+width+5+"px");
}

This doesn't work in a unit test as the div the class 'smallcontainer' is on doesn't exist. How can I make sure the div is created in the unit test so that I can test all my functions?

Answer

Maarten picture Maarten · Aug 1, 2013

This is how I managed to do it:

beforeEach(inject(
    ['$compile','$rootScope', function(_$compile_) {
        var html = '<div class="smallcontainer-content"></div>';
        angular.element(document.body).append(html);
        elm = angular.element('<form name="form"><input name="password" id="passwordInput" data-ng-model="password" size="25" type="password" maxlength="20" tabindex="1" autofocus  data-my-password-check></form>');
        $compile(elm)($rootScope);
        form = $rootScope.form;

    }]
));

The important part here which adds the html to the document is the angular.element().append().

I found this in the midway testing code example of http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html#testing-filters

Related questions

Unit testing a directive that defines a controller in AngularJS

I'm trying to test a directive using Karma and Jasmine that does a couple of things. First being that it uses a templateUrl and second that it defines a controller. This may not be the correct terminology, but it creates …

Read More
jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL

I have an angular service called requestNotificationChannel: app.factory("requestNotificationChannel", function($rootScope) { var _DELETE_MESSAGE_ = "_DELETE_MESSAGE_"; function deleteMessage(id, index) { $rootScope.$broadcast(_DELETE_MESSAGE_, { id: id, index: index }); }; return { deleteMessage: deleteMessage }; }); I am trying to unit test this service …

Read More
How do I mock a service that returns promise in AngularJS Jasmine unit test?

I have myService that uses myOtherService, which makes a remote call, returning promise: angular.module('app.myService', ['app.myOtherService']) .factory('myService', [ myOtherService, function(myOtherService) { function makeRemoteCall() { return myOtherService.makeRemoteCallReturningPromise(); } return { makeRemoteCall: makeRemoteCall }; } ]) To make a unit test for myService I …

Read More