在业力测试中通过类名获得两个div(Angular 4.0)

时间:2018-03-20 07:26:46

标签: javascript angular unit-testing css-selectors karma-runner

我有这样的观点:

<div>
 <div class="header-title">Example title 1</div>
</div>

<div>
 <div class="header-title">Example title 2</div>
</div>

在我的业力测试中,我想按类名调查所有div,并检查内部文本是否正确,所以我在测试中有以下代码:

[...]
debugTest = fixture.debugElement.query(By.css('.header-title'));
elementTest = debugTest.nativeElement;
[...]

it('should component div has a correct value', () => {
    fixture.detectChanges();
    const content = elementTest.textContent;
    expect(content).toContain('Example Title 1');
});

以下代码有效但我总是使用.header-title类获得第一个dom。如何提取下一个?如果我有20个具有相同类名的div如何测试它们怎么办?

1 个答案:

答案 0 :(得分:3)

使用queryAll()代替query(),它返回一个数组。

query()会返回单个DebugElement,它始终是第一个匹配元素,而queryAll()会返回DebugElement[]

debugTest = fixture.debugElement.queryAll(By.css('.header-title')); 

这样你就可以像

一样访问
elementTest1 = debugTest[0].nativeElement;
elementTest2 = debugTest[1].nativeElement;