Angular.js UNIT測試指令

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 ，該插件包裝有我的指令，這是我要測試的指令。

所以我的問題是：為什么getElementById找不到剛剛編譯的DOM元素。 如果這是正確的行為，我該如何避免這個錯誤。

謝謝

Answer 1

您需要將元素添加到文檔中的某個位置。 這是工作中的plnk 。

我添加的唯一一件事：

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

Answer 2

找不到DOM元素，因為茉莉花實際上從未將其附加到DOM。 如果要獲取元素，只需將其稱為元素。 例如：

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

您可以手動將元素附加到DOM，但請記住在完成測試afterEach其刪除（我為此使用afterEach塊）。 Jasmine在整個測試套件中都使用相同的DOM，因此，如果您忘記刪除某個元素，則在測試中，原本不希望出現在DOM中的元素可能會導致誤報或其他意外結果。 通常，除非您正在測試某些交互，否則不必將元素附加到DOM（例如，模糊處理無需附加到DOM，但是例如，焦點不附加）。