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，但是例如，焦点不附加）。