angular2- fixture.nativeElement.query 中的 ag-grid 单元测试不是函数

Question

我使用 Karma/Jasmine 为 angular 的 ag-grid 编写了一个测试用例。在我的测试用例中，只是检查 ag-grid 标头并收到类似“fixture.nativeElement.query is not a function”的错误，但我不确定这是否是我编写的正确方法。如果有人有想法请帮助我。

这是我的测试用例

it('to test the column headers',()=>{
    fixture.nativeElement.query(By.css(".ag-fresh"))
    .map(function (header){
      return header.getText()
    }).then(function(headers){
      expect(headers).toEqual(['color','qty','price']);
    });
  });

Answer 1

您应该在

query()

上使用

fixture.debugElement

。而且我认为你不需要

map

这里的结果。

fixture.debugElement.query(By.css(".ag-fresh")).nativeElement

应该为你做。

Answer 2

可以采取以下方法来获取单元测试中的元素

一般来说，建议使用

debugElement

在 Angular 测试中与 DOM 交互，因为它提供了更高级别的抽象，专门为测试 Angular 组件而设计。

• querySelector -> 是原生 DOM 方法
• debugElement -> 是 Angular 的 TestBed 提供的对象，表示 DOM 元素的包装器。

 fixture = TestBed.createComponent(<Component>)

// using querySelector
 const element = fixture.nativeElement as HTMLElement
 const domElem = element.querySelector(<CSS Selector>)

// using debugElement
 let de = fixture.debugElement.query(By.css(<CSS Selector>)) as DebugElement
 const element = de.nativeElement as HTMLElement;