Question

根据Angular.io Framework Testing文档的建议，我一直在尝试使用Angular Testbed + Karma测试Runner来使用DebugElement查询。我创建了一个jqwidgets树组件，它生成了类＆＃39; .jqx-tree-item-li＆＃39;的li元素。在DOM测试中使用直接javascript的以下测试通过 GREEN ：

    it('Elements of class jqx-tree-item-li found using getElementsByClassName ', (done) => {

    this.fixture.whenStable().then(
      () => {
        var elementArray = document.getElementsByClassName('jqx-tree-item-li');
        expect(elementArray.length).toBeGreaterThan(0); //passes without issue :)
        done();
      }
    );
  });

但由于返回0个元素， SAME 规范（相同的Testbed设置） FAILS 中的此测试：

   it('Elements of class jqx-tree-item-li found using Angular DebugElement ', (done) => {

    this.fixture.whenStable().then(
      () => {
        var elementArray = this.fixture.debugElement.queryAll(By.css('.jqx-tree-item-li'));
        expect(elementArray.length).toBeGreaterThan(0); //fails! why? :(
        done();
      }
    );
  });

使用Angular找到的类jqx-tree-item-li的对象资源管理器组件元素 DebugElement预期0大于0。

这不是我第一次观察到它并且我发现它将获得根组件元素，但我似乎无法获得DebugElement查询以返回组件中的元素。虽然文档明确说明它将查询子树。到目前为止，解决方法只是针对上面的javascript查询，它可以按预期运行。

我在这里遗漏了什么吗？有关如何使DebugElement.query工作的任何建议？如果没有，有没有人发现DebugElement查询的问题？谢谢。

Answer 1

你犯了几个错误

detectChanges缺失

查询document哪个错误，您应该使用fixture.debugElement

it('Elements of class jqx-tree-item-li found using getElementsByClassName ', (done) => {

    this.fixture.whenStable().then(
        () => {
            fixture.detectChanges(); // missed
            var elementArray = fixture.debugElement.query(By.css('.jqx-tree-item-li')); // use fixture instance to 
            expect(elementArray.length).toBeGreaterThan(0); //passes without issue :)
            done();
        }
    );
});

Angular Fixture DebugElement Query By类Not Returning Elements

1 个答案: