角夾具DebugElement查詢按類不返回元素

Question

正如Angular.io框架測試文檔的建議，我一直在試圖利用採用了棱角分明測試平臺+噶測試跑步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(); 
     } 
    ); 
    }); 

但在SAME規格（相同的試驗檯設置）這個測試失敗由於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找到的類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(); 
       } 
      ); 
  });