Строка "Контейнер не найден". был брошен, выкинуть ошибку:) во время тестирования угловой директивы mocha sigma

Question

Я пытаюсь написать модульный тест для сигма угловой директивы, но я получаю эту ошибку. the string "Container not found." was thrown, throw an Error :) Исходный код

 angular
    .module('test')
    .directive('sigmagraph', directive);

function directive() {

        var divId = 'sigma-container-' + Math.floor(Math.random() * 999999999999);
        return{
            restrict: 'E',
            transclude: true,
            template: '<div id="' + divId + '" style="width: 100%;height: 100%;" class="sigmaContainer">' +
                      '</div>',
            scope: {
                graph: '=',
                isVisible: '='
            },
            link: function (scope, element, attrs, ctrl) {
                // Create a sigma instance.
                var sigmaInstance = new sigma({
                    settings: _newSigmaSettings,
                    renderer: {
                        container: divId,
                        type: 'canvas'
                    }
                });
               //other code..
            }
        }
    }    

Тестовый код

describe('sigmagraph', function() {
var scope,element;
beforeEach(function () {
    module('ui.router');
    module('tresata.orion');
    module('core');


    inject(function  ($compile, $rootScope, $templateCache) {
        // $templateCache.put('<div class="sigmaContainer"></div>'); // also tried this but its not working 
        scope = $rootScope.$new();
        element = angular.element('<sigmagraph graph="graph" is-visible="view.graphView">');
        scope.graph = mockGraphData;
        $compile(element)(scope);
        $rootScope.$digest();
    });
});

it('should apply template', function() {
    expect(element.html()).to.not.be.empty;
});

Я также пытался решить эту проблему, используя $templateCache, но все еще не работает. Я новичок в тестировании, так что, может быть, я что-то пропустил. Пожалуйста, помогите мне решить эту проблему.

Answer 1

Я решил проблему точно так же, как и ваша.

Поскольку в вашей директиве есть функция ссылки, которая будет выполняться после компиляции, и в данный момент в DOM не добавлено никаких элементов.

Так что если вы используете $compile Служба для динамической компиляции вашей директивы, вам лучше добавить свой элемент директивы перед его компиляцией. Изменить код, как показано ниже, может помочь вам:

inject(function  ($compile, $rootScope, $templateCache) {
    // $templateCache.put('<div class="sigmaContainer"></div>'); // also tried this but its not working 
    scope = $rootScope.$new();
    scope.graph = mockGraphData;
    element = angular.element('<sigmagraph graph="graph" is-visible="view.graphView">');
    angular.element('body').append(element);
    $compile(element)(scope);
    $rootScope.$digest();
});