Question

我正在尝试对angular指令进行单元测试。所以这是代码：

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元素，因为jasmine实际上从未将它附加到DOM。如果要获取元素，只需将其称为元素即可。例如：

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

您可以手动将元素附加到DOM，但请记住在完成测试后将其删除（我使用afterEach块）。 Jasmine在整个测试套件中使用相同的DOM，因此如果您忘记删除元素，您可能会在测试中从DOM中的元素中获得误报或其他意外结果，而这些元素并不是您期望的。一般情况下，你不应该将你的元素附加到DOM，除非你测试某些交互（模糊工作没有附加到DOM，但焦点不是，例如）。

Angular.js UNIT测试指令

2 个答案: