Angular.js UNIT test директива

Question

Я пытаюсь сделать единичный тест для угловой директивы. Так что это код:

describe('Test', function() { 

    var element, 
     scope; 

    // load the service's module 
    beforeEach(module('app')); 


    beforeEach(inject(function ($compile, $rootScope) { 
    scope = $rootScope.$new(); 
    element = angular.element('<div id="wow"></div>'); 
    $compile(element)(scope); 
    element.scope().$apply(); 
    })); 

    it('should', function() { 
    console.log(document.getElementById('wow')); 
    }); 

}); 

Я получил null в консоли.

Конечно, это всего лишь тестовый пример. В реальном коде getElementById используется плагином, который завернут моей директивой, которую я пытаюсь проверить.

Так что мой вопрос: почему элемент DOM, который только что скомпилирован, не найден getElementById. Если это правильное поведение, как я могу избежать этой ошибки.

Благодаря

Answer 1

Вам нужно добавить элемент в документе где-то. Вот работа plnk. что я добавил

Единственное, что:

angular.element(document.body).append(element);

Answer 2

DOM-элемент не найден, потому что жасмин фактически никогда не присоединяет его к DOM. Если вы хотите получить элемент, просто обратитесь к нему как к элементу. Например:

it('should', function() { 
    expect(element.attr('id')).toBe('wow'); 
}); 

Вы можете прикрепить элемент к DOM вручную, но не забудьте удалить его, когда вы закончите с вашим тестом (я использую afterEach блоки для этого). Жасмин использует ту же самую DOM для всего тестового набора, поэтому, если вы забудете удалить элемент, вы можете получить ложные срабатывания или другие неожиданные результаты в тестах из элементов, находящихся в DOM, которых вы не ожидали. В общем, вам не нужно прикреплять свой элемент к DOM, если вы не тестируете определенные взаимодействия (размытие работает без присоединения к DOM, но, например, фокус не работает).