Angular Fixture DebugElement Query By class未返回元素

Question

Angular Fixture DebugElement Query By class未返回元素

javascriptangularunit-testingkarma-jasmine

13

根据Angular.io Framework Testing文档的建议，我一直在尝试使用Angular Testbed + Karma测试运行器来利用DebugElement查询。我创建了一个jqwidgets Tree组件，它产生类'.jqx-tree-item-li'的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个元素，该测试失败了：

   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 DebugElement查询时，发现没有找到jqx-tree-item-li类的组件元素。这并不是我第一次遇到这个问题，我发现可以获取根组件元素，但无法获取组件内部的元素。尽管文档明确说明它会查询子树。迄今为止解决方法只能使用像上面示例中的javascript查询，该查询功能正常。我是否漏掉了什么？有没有关于如何使DebugElement.query工作的建议？如果没有，是否有人发现DebugElement查询存在问题？谢谢。

- user7611503

嘿，@gerogeawg，你找到解决方案了吗？ - Prince Hernandez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aravind · Accepted Answer

你犯了几个错误

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();
        }
    );
});