Angular2测试Html

Question

我想检查在html＆＃39; * ngFor＆＃39;中创建的元素。使用.ts中的数组，但我没有找到有关它的文档。

.ts：

steps: Array<number> = [1, 2, 3, 4, 5];

html：

<section class='mycontainer'>

  <article class="myArticle{{ steps.length }}">
    <div class='line'></div>
    <div *ngFor="let numberStep of steps;" class='circle'></div>
  </article>

</section>

我需要检查 spect.ts 使用ngFor

创建的元素

Answer 1

试试这个，在这里我寻找所有元素（div.circle）并检查count不等于0以确保至少创建了一个。 .queryAll返回一个数组但你可以使用.query只获得一个元素

 fixture = TestBed.createComponent(yourComponent);
 comp = fixture.componentInstance;

it('ngFor div should be created', () =>  {
      fixture.detectChanges();
      let ngForElement: DebugElement;
      ngForElement= fixture.debugElement.queryAll(By.css('div.circle'));
      expect((ngForElement.length).not.toBe(0); // check that ngFor contain at least one element

 });