Angular Fixture DebugElement Query By类Not Returning Elements

Question

正如Angular.io Framework Testing文档所建议的那样,我一直在尝试使用Angular Testbed + Karma测试Runner来使用DebugElement查询.我创建了一个jqwidgets树组件,它生成类'.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元素返回,在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 DebugElement找到的类jqx-tree-item-li的对象资源管理器组件元素预期为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();
          }
      );
  });