Container not defined testing Leaflet angular Map using Jasmine

Question

I am trying to test a service which has reference to map generated in directive (not third-party, own directive)

Here is my spec file

       beforeEach(() => {
    inject(($injector: any, $rootScope: ng.IRootScopeService) => {
        $log = $injector.get('$log');
        $q = $injector.get('$q');
        $timeout = $injector.get('$timeout');
        _compile = $injector.get('$compile');
        _scope = $rootScope.$new();
    });
    serviceUnderTest = new mapServiceObj($log, $q, $timeout);
    var element = angular.element('<div id="map"></div>');
    element = _compile(element)(_scope);
    _scope.$digest();
    serviceUnderTest.map = L.map("map");
});

when I ran the tests i get an error at the last line saying that container not defined. I think I am pretty close, Can someone Please point where my mistake is?

Answer 1

Figured it. Need to add to DOM. Here is the fix.

 var ele = angular.element('<div id="map"></div>');
    angular.element(document.body).append(ele);
    _compile(ele)(_scope);
    _scope.$digest();
    serviceUnderTest.map = L.map("map");